Stepper
Shows where the reader is in a sequence, how much is left, and whether they can move between steps.
Definition
A stepper displays the stages of a multi-step process and the current position within it. The word also names the small plus and minus control for numeric input, which is a different component with different rules.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- A process genuinely has three or more sequential stages.
- People need to know how much is left before committing.
- A task is genuinely split into ordered steps and readers need to know where they are in it.
Common mistakes
- Steppers on two-step flows.
- Progress indicated by colour alone.
- Back navigation that clears earlier answers.
- A step count that changes partway through.
States to specify
| State | Means | Must be distinguishable by |
|---|---|---|
| Completed | Finished and valid | Icon plus text, not colour alone. |
| Current | Where the reader is now | Position, weight and an accessible current marker. |
| Upcoming | Not yet reached | Reduced emphasis, still readable. |
| Error | Reached, left invalid | Icon, text and colour together. |
| Disabled | Not reachable yet | Stated reason, not silence. |
Behaviour
Do
- Let people go back to a completed step without losing what they entered.
- Name each step with the task, not with a number alone.
- Keep the count honest: five steps shown, five steps delivered.
- Announce the position as text as well as visually: 'Step 2 of 5, Delivery'.
- Mark a step that holds an error clearly, and let it be reached directly.
- On narrow screens, collapse to the current step plus a count rather than shrinking every label.
Do not
- Do not use a stepper for a process with fewer than three steps. It adds furniture without information.
- Do not indicate progress with colour alone.
- Do not let the stepper imply navigation that the flow does not allow.
- Do not allow forward jumps that skip required validation, unless the later steps genuinely do not depend on the earlier ones.
- Do not number steps that can be completed in any order.
- Do not confuse the sequence indicator with the numeric input control of the same name.
The keyboard and screen reader contract
A stepper is navigation and status at the same time, which is why it is so often built as decoration that announces nothing.
- Mark it up as an ordered list inside a labelled navigation region, so its structure is available rather than implied by layout.
- Put aria-current on the current step, which is what tells assistive technology where the reader is.
- Make reachable steps links or buttons and unreachable ones plain text, so nothing announces as actionable when it is not.
- Include the state in the accessible name: Step 2 of 5, Delivery, completed. Icons and colour convey none of this.
- Move focus to the heading of the new step on each transition, rather than leaving it on a button that no longer exists.
- Announce a step that has failed validation, including how many errors it holds, so a reader who has moved on knows what is waiting.
In practice
- i.
Progress that motivates
Showing the first step as already complete, because the reader arrived with an email address, measurably improves completion. The mechanism is the goal-gradient effect, and it stays honest as long as the step really was completed.
- ii.
Three of five, and going back
What a stepper promisesA stepper showing completed steps as links implies the reader can return to them. If the flow forbids that, the stepper is making a promise the product will break, and it should render them as plain marks instead.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Multi-Step Flows
PatternA task divided into sequential screens, each validated before the next.
Key difference
A multi-step flow is the division of the task itself. A stepper is the small map that shows where you are inside it. Splitting a task without a stepper leaves people lost; adding a stepper does not make a badly split task better.
Use Stepper when
- The split already exists and people need orientation.
- How many steps remain affects whether they start.
- Going back to a finished step should be possible and visible.
Use Multi-Step Flows when
- The decision is whether to split the task at all.
- The steps are genuinely sequential, not merely numerous.
- You are weighing per-screen load against abandonment.
Local chart
CMP·029 · Region III · Grid E2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- Goal-Gradient EffectLAW·014 · Law
Often used with
These usually appear in the same screen or the same decision.
- Progress IndicatorCMP·026 · Component
- Input ValidationPAT·007 · Pattern
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist