Skip to content
UX Atlas
ComponentCraft conventionFoundational

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 page
  1. Definition
  2. States to specify
  3. Behaviour
  4. In practice
  5. Continue from here

States to specify

StateMeansMust be distinguishable by
CompletedFinished and validIcon plus text, not colour alone.
CurrentWhere the reader is nowPosition, weight and an accessible current marker.
UpcomingNot yet reachedReduced emphasis, still readable.
ErrorReached, left invalidIcon, text and colour together.
DisabledNot reachable yetStated 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'.
  • 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 allow forward jumps that skip required validation, unless the later steps genuinely do not depend on the earlier ones.
  • Do not confuse the sequence indicator with the numeric input control of the same name.

In practice

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.

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.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.