Navigation

Stepper

A stepper is a signpost that shows, at a glance, where you currently are in a long process broken into several steps.

Step 2 · Shipping

Completed steps show a check; the current step is highlighted.

Definition

A stepper is a signpost that shows, at a glance, where you currently are in a long process that has been broken into several steps. The steps are usually laid out in a row: the ones you've already finished get a checkmark, the step you're working on now is highlighted with color or weight, and the steps still ahead are dimmed. When an ordered task like checkout or sign-up is too much to fit on one screen, the stepper splits it into a few short steps and spreads that flow across the top like a map. Unlike a plain progress bar, each step here has a name, so it even tells you what you'll be doing next.

Why does it matter?

People tire easily and give up in the middle when a task has no visible end. A stepper eases that anxiety by making it clear which step you're on and how many steps are left. Showing the full length up front lets users brace themselves and find the energy to see it through, and the checkmarks piling up on completed steps give a small sense of accomplishment that pulls them toward the next one. Splitting a long form into steps instead of cramming it all onto one screen also reduces how much a person has to focus on at once, so input errors and mental strain drop together. In the end, a stepper is a device that cuts drop-off and helps people reach the finish line.

Common mistakes

Slicing the process into too many tiny steps just to raise the count. When there are too many steps, the road ahead looks even longer, so users get tired before they even start, and the labels on screen get so cramped that it's hard to tell what each step is. More divisions is not automatically better.
Not deciding up front whether users can go back to an earlier step. When someone wants to fix a mistyped value from a previous step but has no way to return, they end up starting over from scratch or abandoning the flow entirely. You also need to make sure the values they already entered don't disappear when they go back.
Making the completed, current, and waiting states look so similar that they can't be told apart. If color or icons don't clearly separate how far you've gotten from where you are now, the whole point of showing progress falls apart.

Practical tips

Keep it to around three to five steps, and decide clearly from the start whether going back is allowed. Splitting a long, ordered process into reasonable chunks and showing how far along and how much is left cuts mid-way drop-off dramatically.
Distinguish the completed, current, and waiting steps firmly with color and icons. A checkmark for finished steps, a highlight for the current one, and a dim look for what's left lets users read their own position at a glance.
Give each step a short name that says what happens inside it. A label with real content like "Shipping" or "Payment" beats a bare number, because it lets users gauge what's coming and move to the next step already prepared for it.

Ask your AI

Splitting a long form into a stepper

This is [the process — e.g. an 8-field sign-up]. Design it as a stepper for me. Group it into no more than 3–5 steps, and give each step a short label that says what happens inside it — like "Shipping" or "Payment" instead of a bare number. Unlike a plain progress bar, a stepper also shows what's coming next, so choose names that let users gauge the upcoming task, and decide up front whether going back is allowed and why. Lay out the final step structure in a table.

Completed, current, and waiting steps look alike

In the stepper I'm pasting below, the completed, current, and waiting states are too close in color to tell apart. Split the three states clearly using more than color: a checkmark for completed, a color/weight highlight for the current step, and a dimmed look for the ones still ahead. Don't lean on color alone so color-blind users can still tell them apart, and mark the current step with aria-current="step". Summarize the new styles in a three-row completed/current/waiting table.

Going back to an earlier step wipes the input

Audit the back-navigation in the stepper code I'm pasting below. Check whether users can return to an earlier step and whether the values they already entered survive the trip back — if they get wiped, fix it so they're preserved. If going back is allowed, make completed steps clickable while blocking steps they haven't reached yet, and spell out clearly how far back and forward a user can move.