Skip to content
界面图谱Interface Atlas
☰
中文
PatternsForm / Flow

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"fieldset

Mark 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

Form Validation表单校验

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 with
Stepper步骤条

An 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 with
Progressive Disclosure渐进式披露

Layer 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.

PatternsSimilar
Onboarding Tour新手引导

Introduces 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

Sources

Markdown for agents · JSON