Wizard

A long task chopped into ordered steps with Back and Next, plus a progress stepper showing how far you have to go.

stepperform split across steps with dots at topcheckout-style multi-page formmulti step formstep by step setup flowthe 1 2 3 progress dots thingonboarding flow with next and backwizzard ui

See it

Live demo coming soon

What it is

A wizard breaks one long task into ordered steps, shows which step you are on, and moves you with Back and Next. The strip of numbered circles or dots along the top is the stepper; the wizard is the whole flow behind it. Canonical examples: checkout (cart, shipping, payment, review), account onboarding, and any installer you have ever clicked Next through.

Reach for it when the task is long, the fields have a natural order, and earlier answers change what comes later. Splitting the form is progressive disclosure: fewer decisions per screen, validation that fails early instead of at the very end, and a visible finish line that keeps people going. If the fields are independent and there are only eight of them, a single scrolling form beats a wizard every time.

Gotchas cluster around state. Going Back must restore what was typed, not reset it, so hold the answers in one form store rather than in each step's local state. Give every step its own URL or history entry so the browser back button does the obvious thing and people can refresh without losing the flow. Validate per step but let people revisit completed steps freely, and never lie about the number of steps left (the '3 of 4' that becomes '3 of 7' is how you lose people).

Ask AI for it

Build a 4-step wizard: a horizontal stepper at the top with numbered circles connected by a line, where completed steps show a checkmark in a filled circle, the current step is highlighted with an accent ring, and upcoming steps are muted. Below it render only the current step's fields, with Back and Next buttons at the bottom right (Next becomes 'Finish' on the last step). Keep all answers in a single form state object so Back restores previous input, validate the current step before advancing, sync the step index to the URL so browser back/forward and refresh work, and slide the step content horizontally on transition.

You might have meant

progress barmodal dialogtabscoach markempty state