Stepper
步骤条
Aliases:分步表单第几步那个进度步骤指示器wizard steps
What is it
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.
Name disambiguation
Stepper is ambiguous: it names both a numeric +/- input (input stepper) and a multi-step progress indicator. Pick by context — changing a number vs reading progress.
Interactive playground
Try it. Make an informed choice.Try continuing with an empty name, then fill it in, choose a type and go back to check value preservation.
Loading lab…
What to look for
- 01Invalid input blocks advancement with an actionable message.
- 02Going back preserves values; the last step summarizes them.
✓ When to use
- Ordered setup, registration or checkout flows.
- Tasks where people need to see how much work remains.
✕ When not to use
- A single step or a short form that fits together.
- Highly branching flows with an unpredictable number of stages.
Variants
Horizontal
水平步骤
Show progress across a wide canvas.
Vertical
垂直步骤
Stack stages for narrow screens or longer labels.
Implementation
display: flexaria-current="step"gapRepresent ordered stages with ol and mark the current stage with aria-current="step". Keep form values in the flow owner so going back preserves them. Explain validation failures in place and provide a clear completion message.
Related concepts
A loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsSimilarA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsSimilarNot to be confused with
A wizard is the multi-step flow itself; a progress stepper is only its indicator.
A slider picks along a continuum; an input stepper steps by a fixed delta.
Pagination moves through data pages; a stepper advances task steps.