Stepper
A stepper gives users a visual indication of where they are in a journey and can be used to navigate through the process.
On this page
How to use a stepper
A stepper allows users to understand how much progress they've made in a journey and how many steps they have remaining in order to complete their current task.
When using a stepper:
- Use labels that clearly indicate the purpose of the step
- Always visually indicate the current step so users understand where they currently are within the process
- Display steps in a logical way from left to right
- Keep step labels short and concise
- If the stepper is being used on a smaller screen, only the active step label needs to be shown to the user
A stepper is recommended when all the steps the user needs to take are known and fully understood. If there's a possibility for the user to skip one of the steps, consider using a different pattern.
If a task needs more than 6 steps, it's best to simplify the process or break it up into smaller tasks rather than using a stepper.
Types of stepper
Horizontal
Use horizontal steppers when the actions of one step depend on an earlier step.
Vertical
Use vertical steppers when designing for smaller or narrower screen sizes.
- Step 1 of 5 - Title 1 - complete
- Step 2 of 5 - Title 2 - complete
- Step 3 of 5 - Title 3 - active
- Step 4 of 5 - Title 4 - incomplete
- Step 5 of 5 - Title 5 - incomplete