navigation contract
Stepper
Sequential step indicator for multi-page flows (onboarding, checkout).
Variants
- horizontal
- vertical
- compact
Sizes
- md
- lg
Example
<Stepper steps={['Account', 'Plan', 'Payment', 'Review']} current={2} />Usage rule
aria-label="Progress" + aria-valuenow/valuemax on the parent.
The full Stepper contract has 4 more rules, plus the do-not patterns. Get the full recipe.