Form Progress

The Form Progress component indicates a user's progress in a Form and is positioned above the Form content. It is used when a user is completing a process containing more than two steps. Each step in Form Progress must have content for the Form as well as actions, which include the usage of Buttons that will navigate through the steps by modifying the currentId prop.

If there are fewer than 3 steps in a form, you may choose not to display Form Progress. If there are 3 or more steps, the Form Progress component displays where the user is in the flow of the process.

Only the current step will display its label. All other steps will display their label within a Tooltip as the user hovers over them. In order to allow steps to be navigated through or skipped by clicking on the step marker, make sure to pass the onClick property to the steps.

Form Progress components allow for two different depths for a step, 0 and 1. If a step is at depth 0, it will render with a larger indicator than steps at depth 1. This helps identify sub-steps within the process.