Used to inform users which step they are at in a form or a process
- Step number: Indicate the sequence of step.
- Marker title: Label that indicates the purpose of the steps.
- Track: A bar to show the progress through a set of steps.
Within the stepper
Ensure that there is a min 32px horizontal spacing between dropdown item.
Ensure that there is a min of 4px vertical spacing between the marker icon and marker title.
Steppers should be used when:
- There are multiple steps in a form where content can be divided into logical steps.
Steppers should not be used when:
- Form is short. If a form or process has fewer than three sections, there is no need to use a stepper.
Keep marker title short and concise
Use labels that clearly indicate the purpose of the step and keep it as short as 1 to 2 words.
Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the progress using the different states. Allow the user to return to a previous step to make ammendment.
Indicate the current step
Inform user of their current step within the process. This helps the user to know where they are in relation to where they have beem, and what sections are to follow. Use validation to confirm that a previous step has been completed.