States
Both component variations use the same colours to indicate the state of each step:
- Default — Step has not been reached yet (unfilled, inactive appearance)
- Active — Current step the user is on (highlighted, emphasized appearance)
- Completed — Steps that have been finished (filled, often with a checkmark)
State Examples
Navigation (Steps 1-5)
For flows with five or fewer steps:
- Users can click on any completed step to navigate backward
- Clicking on future (default) steps typically does not navigate forward
- The active step is not clickable
- Use Next/Back button group for navigation
- Navigation maintains form data when moving between steps
Navigation (Steps 6 or more)
For flows with six or more steps:
- Individual step indicators are not clickable
- Use Next/Back button group for navigation
- Show step numbers (e.g., "Step 3 of 8") for additional context