Stepper
ProA horizontal or vertical progress indicator for multi-step workflows like checkout, onboarding, or form wizards. Each step displays a number or icon, a label, and an optional description. Steps are marked as completed, active, or upcoming. Does not handle page routing — it is a visual indicator paired with your own navigation logic.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Horizontal | Steps arranged left to right with connecting lines between them. | Use for workflows with 3–5 steps on desktop where horizontal space is available. |
| Vertical | Steps arranged top to bottom, suited for longer workflows or mobile. | Use when there are more than 5 steps or descriptions are lengthy. |
| Compact | Minimal stepper showing only dots or a progress bar with step count text. | Use in space-constrained contexts like modals or mobile onboarding flows. |
Usage Guidelines
Clearly indicate completed, active, and upcoming steps with distinct visual styles.
Allow users to skip ahead to uncompleted steps without validation.
Allow users to click completed steps to navigate back.
Use a stepper for non-sequential content — use Tabs instead.
Keep step labels short — one or two words.
Exceed 7 steps — break the workflow into sub-flows.
Use aria-current="step" on the active step.
Use a stepper for navigation between unrelated pages.
Code
Design Tokens
Accessibility
- Wrap in <nav aria-label="..."> describing the workflow — e.g., "Checkout progress".
- Use an <ol> since steps represent an ordered sequence.
- Active step uses aria-current="step" for screen reader identification.
- Completed steps should be announced as "completed" — use aria-label="Step 1: Cart, completed".
- Upcoming steps that are not navigable should use aria-disabled="true".