stepper
Horizontal step progress indicator. Completed steps show a check icon; the active step has an accent border; upcoming steps are muted. A connector line between steps fills with accent colour as progress advances.
Step 1 active
1
Account
2
Details
3
Payment
4
Review
stepper({
steps: ['Account', 'Details', 'Payment', 'Review'],
current: 0,
})Step 2 active
Account
2
Details
3
Payment
4
Review
stepper({
steps: ['Account', 'Details', 'Payment', 'Review'],
current: 1,
})All complete
Account
Details
Payment
Review
stepper({
steps: ['Account', 'Details', 'Payment', 'Review'],
current: steps.length, // past the last index = all complete
})| Prop | Type | Default | |
|---|---|---|---|
steps | string[] | [] | Array of step label strings |
current | number | 0 | 0-based index of the active step. Pass steps.length to mark all steps complete. |
class | string | — |