Build Assets
UI Component
Multi-Step Form
A wizard that splits a long form into ordered steps with a progress indicator and Back/Next/Finish navigation.
Platform: bothTags: form, wizard, stepper, multi-step, onboarding
Purpose
Breaks a long or complex form into a sequence of focused steps. Chunking respects working-memory limits (Miller's Law) and reduces the choices on any one screen (Hick's Law); a visible progress indicator sets expectations and reduces abandonment. Best when a task has natural phases (account → plan → review) or too many fields for one screen.
Anatomy
- Step indicator: numbered/among-completed circles + titles with connectors
- Compact mobile indicator: "Step x of n" + a progress bar
- Active step: title, optional description, and the step's fields
- Footer: Back and Next/Finish controls
States
- Per step: upcoming, current (highlighted), completed (check)
- Next/Finish disabled until the current step is valid
- Completed steps can be revisited by clicking the indicator
Do
- Group fields into meaningful steps, not arbitrary splits
- Show progress (step x of n) so users know how much is left
- Validate per step and only allow advancing when the step is valid
- Let users go back to change earlier answers without losing data
- End with a review step before the final submit
Don't
- Split a short form into steps just for the look — it adds clicks
- Hide how many steps remain
- Lose entered data when navigating backward
- Block the whole wizard because a later, optional step is incomplete
Accessibility
- Step indicator is an ordered list; the current step marks aria-current="step"
- Navigation uses real buttons with visible focus states
- Progress conveyed as text ("Step x of n"), not by color alone