Navigation
Stepper
Stepper visually represents a multi-step process, guiding users through a sequence of actions.
Examples
Personal Details
Documents
3
Review4
SubmitAccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- aria-current="step" on the current step indicator
- Completed steps marked with checkmark icon + aria-label
- Keyboard navigation for clickable steppers
- Color + icon combination, not color alone
- Focus ring on clickable steps
- Role="progressbar" on the trail for screen readers
When to use this component
✓Do's
- •Multi-step forms or wizards
- •Sequential processes with clear stages
- •When users need to see overall progress
- •Flows where steps can be completed or revisited
✗Don'ts
- •For non-sequential content, use Tabs.
- •For simple progress, use Progress bar.
- •For page navigation, use Breadcrumb.
- •Single-step forms
Do's and Don'ts
✓ Do's, Use 3–5 steps with clear labels
Personal Details
Documents
3
Review4
Submit3–5 well-labelled steps give users a clear sense of progress without overwhelming them.
✗ Don'ts, Use too many steps (8+)
1
2
3
4
5
6
7
8
Don't use more than 7 steps, it causes anxiety and high abandonment. Break into sub-flows (e.g. 2 flows of 4 each).