Stepper UI Design

The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px), text-xs (12px) and spacing gap-3 (12px), gap-2 (8px), constrained by max-w-lg and w-6. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.

Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.

A customer starts checkout and sees three steps across the top: Details, Payment and Review. After entering her address, the Details step shows a checkmark and Payment becomes current. She realizes she used her old postcode, clicks Details, fixes it and returns to Payment without losing the card details she had started typing.

On the Review step, everything is summarized with edit links next to each section, and the button reads 'Place order' rather than 'Next', making it clear this is the final action. On her phone, the stepper becomes a compact header that says 'Step 2 of 3: Payment', and the Back and Continue buttons sit within thumb reach at the bottom.

Two days later she abandons a long insurance application halfway through. When she returns, the stepper opens on the step she left, with completed steps marked and her answers saved. A small error icon on step two reminds her that one field still needs attention, and clicking it takes her straight there.

Checkout flows use three or four steps: details, shipping, payment and review.

Onboarding uses steps to collect setup information, often with the option to skip non-essential steps.

Applications and forms, such as loans or insurance, use longer vertical steppers with saved progress.

Step indicators are typically 24 to 32px circles or numbers with short labels underneath or beside them. Connect steps with a line or bar that fills as users progress. Use one color for completed and current steps and a muted color for upcoming ones, and keep labels to one or two words.

On mobile, horizontal steppers with labels rarely fit. Switch to a compact header that shows the current step name and progress, and keep Back and Continue buttons at the bottom of the screen within easy reach.

Use an ordered list for the steps, mark the current step with aria-current="step", and move focus to the step heading when the step changes. Save progress so users can return later, especially for long applications.

In a design system, the stepper is a component that receives an ordered list of steps with their status and renders horizontal, vertical or compact layouts. Pair it with a step container that manages focus and validation, and with standard Back and Continue button placements so every multi-step flow behaves the same way.

Track drop-off per step. A large drop at one step points to a confusing or demanding question; consider simplifying, splitting or moving it later in the flow.

Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:

Name steps by what the user does or provides: Details, Payment, Review. Buttons should describe the next step: 'Continue to payment', 'Review order', 'Place order'. On the review step, make it clear that nothing happens until the final button is pressed.

If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:

Steppers differ from tabs, which allow free switching. They often lead into a checkout page and should use the same error message patterns as your forms.