navigation contract
Stepper
Sequential step indicator for multi-page flows (onboarding, checkout).
Variants
- horizontal
- Top of page — desktop wizards
- vertical
- Left of page — long forms with branching
- compact
- "Step 2 of 4" text only
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.