ui patterns
Stepper (wizard)
What is a stepper or wizard in UI design?
A stepper - or wizard - breaks one long task into a short sequence of steps, showing where you are and how many are left. It turns a daunting wall of fields into a series of small, obviously-finishable chunks, and the visible progress keeps you moving toward the end.
Also known as: wizard, multi-step form, step indicator, progress stepper
Prefer to watch?
Watch the recap 0:39
The demo
The same short sign-up, two ways. Step through it, then flip to "all at once" - and notice how the portioning and the progress bar change how the work feels.
What this demo shows (text version)
A short sign-up (name, email, a password, and two preferences) is shown first as a three-step wizard: each step asks for only a little, a labelled indicator reads "step 1 of 3", and a bar fills as you advance with Back and Next.
Flipping to "all at once" puts the identical fields on a single page. The work is the same, but it now looks like one long chore, with no sense of progress. That contrast is the point: a stepper helps by chunking the task into finishable pieces and by showing the end getting closer (the goal-gradient effect) - so reserve it for genuinely long, linear tasks, and don't wrap a short form in needless "next" clicks.
A stepper helps for two reasons at once: it chunks a long task so each screen feels small and finishable, and its progress indicator pulls you on as the end gets closer. Use it for genuinely long, linear tasks - and keep steps few, let people go back, and never hide errors on a step they've already left.
Stepped, the same task never felt like much - each screen asked for only a little, and the filling bar kept tugging you toward "done". Faced with all of it on one page, the very same fields read as a chore. Nothing about the work changed; only how it was portioned and how clearly the finish line showed.
A stepper works on two well-known levers together. Chunking shrinks each screen to something that fits in working memory, and the progress indicator triggers the goal-gradient effect - the closer the end looks, the harder people push to reach it. That's why a visible "step 2 of 3" beats an unmarked sequence.
Steppers earn their keep on long, linear, must-finish tasks - checkout, onboarding, applications. For a short form, a wizard just adds clicks and hides fields behind "next"; show it on one page instead. The pattern is a cure for length, not a default dressing for every form.
Three rules keep a wizard honest: let people go back without losing what they typed; keep the number of steps small and named, so the scope is never a surprise; and validate gently, surfacing an error on the step it belongs to rather than dumping it all at the final "submit".