Stepper (UI)
A control that breaks a task into ordered steps and shows where somebody is in the sequence.
UI ComponentsA stepper does two jobs: it splits a long task into pieces small enough to face, and it tells people how much is left. The second is what keeps completion up — an unbounded form is abandoned at a rate an equally long but visibly finite one is not. Use it for genuinely sequential work where later steps depend on earlier answers; a set of independent sections is tabs or an accordion, not a stepper.
The mechanics decide whether people finish. Every step needs its own URL so a refresh, a shared link or a returning session lands in the right place. Progress must be saved as each step completes, not on final submit. Completed steps should be editable without restarting the flow. And step labels should name the content — “Business details” rather than “Step 2” — so people can judge what is coming.
In practice
A business banking onboarding ran seven steps in a single-page component with no URLs and no intermediate saving. 38% of applicants who left the tab never returned to a usable state. Giving each step a route and persisting on step completion brought resumed applications to 61% of interrupted sessions.
Where teams get it wrong
- No URL per step, so refresh or back destroys progress.
- Progress saved only on final submit.
- Completed steps locked, forcing a restart to change one answer.
- Labels that number steps without naming them.
- A stepper on a task whose sections are independent, where it imposes an order that does not exist.
Learn more
You may ask
Frequently Asked Questions
When should a form be split into steps?
Past roughly ten fields, or wherever the form changes subject — personal details, then business details, then documents. Splitting only helps if each step is saved and has its own URL.
Should users be able to skip steps?
Let them move back freely and forward only when the current step's dependencies are met. Locking completed steps is what forces a restart over one wrong answer.
Related terms
All terms- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- OnboardingThe experience that takes a new user from first opening a product to getting real value from it for the first time.
- Progress BarA determinate indicator showing how much of a known task is done — usable only when the total is actually known.
- Tabs (UI)A row of labels that switch between alternative views of the same object, showing one panel at a time.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us