ui patterns
Stepper (wizard)
What is a stepper or wizard in UI design?
A stepper - or wizard - splits a long task into a short sequence of steps, showing your current position and how many remain. It turns a daunting wall of fields into a series of small, clearly 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:28
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: it breaks a long task into small, manageable steps, and its progress indicator keeps you moving as the end nears. Use it for genuinely long, linear tasks - keep steps few, let users 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".
A stepper wizard UI design turns complex workflows into digestible steps, letting users track progress visually. Try the interactive demo to see how it works in real time. Stepper UX thrives when steps are few, back navigation is allowed, and errors aren’t hidden - all to keep users moving forward without overwhelm.
A stepper wizard turns overwhelming tasks into digestible steps, letting users track progress and avoid overwhelm - try the demo to see it in action. Use a stepper wizard for linear, multi-step processes where users benefit from clear visual progress and the ability to revisit earlier steps.
A stepper wizard UI design helps users tackle complex tasks by splitting them into digestible steps, with visual progress to keep motivation high. Try the hands-on demo on this page to see how a stepper wizard works - you’ll interact with it directly, not just read about it.