Layouts · Task flow
Wizard
Also called: Stepper, Multi-step form, Step-by-step form, Setup wizard
Breaks a long task into a few steps in a set order. Each screen handles one step, a steps bar at the top shows progress, and users move through it with Back and Next.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstMake this setup flow a wizard. The steps bar at the top shows four steps: "Basic info, Choose a plan, Confirm payment, Done". Completed steps show a checkmark and the current step is highlighted. The middle shows only the current step's form. At the bottom, put "Back" on the left and "Next" on the right. Validate the current step's fields before moving on, keep what's already been filled in when going back, and change the button on the last step to "Submit".
Send to
01Decide
Does your content look like this?
Check both columns to confirm Wizard is what you need.
Use Wizard when
- The task has clear steps in order, and each step depends on the result of the one before it
- There are many fields to fill in (more than a dozen) that can be split into three to five groups by topic
- Users are doing something for the first time and need to be guided step by step
Pick something else when
There aren't many fields (ten or fewer) and they have no order between them
Use insteadSingle Page FormUsers need to keep coming back to change just one item
Use insteadSettings PageThe content is read-only, with nothing to fill in or choose
Use insteadDescription List
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Only four or five fields, yet they're split into three steps with one input box each
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Going back to the previous step clears what was already filled in
- 03
No steps bar, so users don't know how many steps there are or how many are left
- 04
Clicking "Next" doesn't validate, so all the errors from earlier steps show up at once on the final submit
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A horizontal steps bar at the top, the current step's content area in the middle (usually a short form), and a button bar with "Back" and "Next" at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A wizard breaks a complex task into three to five steps, like "Basic info → Choose a plan → Confirm payment → Done". At the top of the page is a steps bar showing which step you're on and which ones are already done. The middle shows only what needs to be filled in or chosen in the current step. At the bottom are "Back" and "Next" buttons, and on the last step the button becomes "Submit".
This design lowers the mental load. Faced with one long form of thirty fields, many people just give up. Split into a few steps with only a few questions each, users know how much is left and are more likely to finish. Later steps can also change based on earlier choices.
The difference from a Single Page Form is that the steps depend on each other or follow a clear order. If the fields have no order and there aren't many of them, splitting them into steps only adds clicks. It's also different from a Settings Page: a settings page is somewhere you come back to anytime to change one thing, while a wizard is usually walked through once from start to finish.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-wizard- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-steps.el-steps.arco-steps.t-steps.n-steps.MuiStepper-root
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026