components
Stepper (design)
Steppers let a user know what their current position is in a series of steps.
Usage
Use a Stepper as a guidance for users where they need to take multiple steps in order to complete a task e.g. registrations, check-outs, etc. A Stepper should've three steps or more.
Options
Default Stepper
A Stepper always takes the 100% available width of its parent container.
Larger screens
- Current: Step 1
- Step 2
- Step 3
- Step 4
Smaller screens
- Current: Step 1
- Step 2
- Step 3
- Step 4
Text flow labels
Longer labels will wrap onto multiple lines if the length exceeds the available space.
Larger screens
- Current: Step 1
- Step 2 with a longer label
- Step 3
- Step 4
Smaller screens
- Current: Step 1
- Step 2 with a longer label
- Step 3
- Step 4
Guidelines
- Always use clear and short labels that describe the purpose of the steps.
- A Stepper should've at least three steps. If there are less than three, consider using a button labelled "Next".
- If a specific proces needs more than 5 steps, consider simplifying the process.