Wizard
多步表单
Aliases:多步表单分步填写向导步骤表单一步步填的表单wizardstepper form
What is it
A long form split into ordered steps, each focusing on a few fields, advancing toward completion. A step indicator marks progress and the current slot; users can revisit finished steps, correct them, and press on, usually with a final review. It turns an endless form into finishable small tasks and lightens per-screen cognitive load.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- More than ~8 fields that group naturally by topic
- Later answers depend on earlier ones — order matters
- Long applications — signup, booking, onboarding, claims
✕ When not to use
- Few fields — one screen beats stepping through
- Steps are independent — forced linearity only gets in the way
- Users must cross-check every field side by side
Variants
Linear
线性
Strictly one step at a time, no skipping — the default
Free-order
自由顺序
Steps are clickable; finished ones get a check
With review
带确认步
Final step summarizes answers for a last check before submit
Implementation
gridflexboxaria-current="step"fieldsetMark the step indicator as an ordered list with aria-current="step" on the active item and make finished steps clickable; wrap each step's fields in fieldset + legend. Validate the current step before advancing, keep values in memory, and persist on submit. On mobile collapse the indicator to "Step N of M". Respect prefers-reduced-motion — step changes may fade or jump.
Related concepts
Checks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed withAn ordered progress indicator that explains the stages of a task, the current step and completed work. Pair it with a multi-step form to make a long task easier to understand. Validate before advancing, preserve values when going back, and keep progress indication distinct from the controls that move the flow forward.
ComponentsUsed withLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsSimilarIntroduces an interface with an overlay, a spotlight cutout and step bubbles: each step reveals one key area and explains it in place, paced by prev/next controls and a step indicator, always skippable. The explanation lives where the feature happens instead of making users hunt for docs.
PatternsSimilar