Stepper
also known aswizard · progress steps · step indicator · process bar
A horizontal sequence of numbered steps showing progress through a multi-step flow like checkout, onboarding, or a wizard.
A stepper visualizes a linear, multi-step process. Each step is a numbered or labeled circle, with a connecting line between them. The current step is highlighted, completed steps show a checkmark and a filled style, and upcoming steps are muted.
Steppers reduce abandonment in long flows by making progress visible — users tolerate a 5-step checkout if they can see exactly how much is left. They fail when steps are non-linear (users want to jump around) or when the total step count is hidden.
Variants: horizontal (most common, 3–6 steps), vertical (good for documentation and longer wizards), and compact "3 of 5" text-only versions for mobile. The accent color of the active step should match the brand's primary action color so the next step feels reachable.
- Multi-step checkout flows
- Account creation and onboarding wizards
- Form-heavy processes (KYC, applications, surveys)
- Single-step forms — overkill
- Non-linear flows — confuses users when they can skip ahead
- Flows longer than 7 steps — break into chapters or sub-flows instead
- +Show step labels, not just numbers, when space allows
- +Mark completed steps with a check + let users navigate back
- +Match the active state to your primary brand color
- −Don't use a stepper for fewer than 3 steps — a button label is enough
- −Don't allow forward jumps unless the user has actually completed prior steps
People also ask
Stepper vs progress bar — when to use which?
Use a stepper when each step is a distinct, labeled task (Account → Profile → Billing). Use a progress bar when progress is continuous or non-discrete (file upload, percent complete).