Build Assets
UI Component
Stepper / Wizard
Multi-step flow indicator that shows progress through a sequential process.
Platform: bothTags: stepper, wizard, steps, progress, onboarding
Purpose
Guides users through a multi-step process where order matters and each step must be completed before proceeding. Progressive disclosure applied: shows only the current step while conveying overall progress.
Anatomy
- Step indicators: numbered circles or icons in a horizontal row
- Connector lines: between indicators, filled for completed steps
- Step labels: below indicators (12–13px), optional on mobile
- Current step content: main area below the indicator row
- Navigation: Back + Next/Submit buttons below content
States
- Completed: filled accent circle, checkmark icon
- Current: accent border circle, accent number, animated entrance
- Upcoming: grey empty circle, grey number/icon
- Error: red circle with ✗ on a step with validation errors
Tokens
spacing
stepSize: 32pxconnectorHeight: 2pxlabelGap: 8px
Do
- Show total step count upfront — "Step 2 of 5" reduces anxiety
- Allow back navigation to completed steps without losing progress
- Validate each step before proceeding — show errors inline
- Save progress automatically when possible (localStorage or server)
Don't
- Use more than 7 steps — break into separate flows
- Prevent back navigation without warning (data loss risk)
- Use a stepper for non-sequential tasks — use tabs instead
- Show all step content simultaneously — defeats the purpose
Accessibility
- aria-label="Step 2 of 5: Your information" on current step
- Completed steps: aria-label includes "Completed: Step 1"
- Back/Next buttons clearly labeled with step context
- Keyboard: Tab navigates forward, Shift+Tab backward in the current step