Feedback
Stepper
Progress through a multi-step flow with markers, connectors and labels.
Examples
States
DoneCurrentUpcoming
Anatomy
Stepper anatomy| # | Part | Description | Presence |
|---|
| 1 | Marker | 28px circle with number or check | Required |
|---|
| 2 | Connector | 2px line | Required |
|---|
| 3 | Label | Step name | Required |
|---|
| 4 | Sub-label | Manrope 11px | Optional |
|---|
Specifications
| Sub-label | Manrope 11px Regular |
|---|
Interaction
Keyboard| Key | Result |
|---|
| None | Static unless steps are links |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click | Only completed steps are links, if any |
|---|
Accessibility
role · ordered list
1.3.1Info and Relationships1.4.1Use of Colour4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Semantics | <ol> inside a <nav aria-label> |
|---|
| Current | aria-current="step" |
|---|
| State in words | Add visually-hidden text: completed, current step |
|---|
| Not colour only | Check, number and fill differ |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Allow going back to completed steps | ✕Do not make upcoming steps links |