Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Live Demo
Actually clickableStep 2 of 4 · Address
What you just saw:The "Cart › Address › Payment › Done" row at checkout, or the "Step 2 of 4" indicator during sign-up, are both steppers.
What it actually is
A stepper removes the anxiety of not knowing how much is left. How it differs from tabs: a stepper is ordered, and the steps form a process; tabs are parallel switches between content.
Anatomy · What it's made of
Step Node步骤节点
A circle holding the number or an icon
Connector连接线
The line between nodes, tinted for completed parts
Label步骤名
Three states: completed / current / not started
Current Step当前步骤
Highlighted and bolded
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The task must be done in order (3–5 steps is the sweet spot) | Yes |
| There are enough steps that users worry about how long it takes | Yes |
| Going back to a completed step is allowed | Yes |
| The task can be finished in one step | No |
| The number of steps changes dynamically | Depends |
Splitting something that takes one step into three is pure user harm.
Past 5 steps the horizontal layout overflows — on mobile switch to "Step 2 of 5" plus a progress bar.
Similar Patterns
Don't mix these upStepperCurrent
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
In one line:A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Pagination
分页
A long list is cut into pages, with a row of page numbers at the bottom that lets you jump to one of them.
How to tell AI
Three levels of promptAdd the component name and specifics
Turn the checkout flow into a 4-step stepper: Cart / Address / Payment / Done. Highlight the current step, show a checkmark on completed steps, and allow clicking back into a completed step.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add some progress indication so users know where they are.
Say this instead
Use a stepper for the 4-step checkout flow (Cart/Address/Payment/Done): check completed steps, highlight the current one, allow going back to completed steps, and fall back to "Step 2 of 4" on mobile.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.