synthetic
Steps
Where you are in a sequence.
Release pathHorizontal and vertical
- ✓BriefMaya Chen
- 2Design24 Oct
- 3ReviewPriya Nair
- 4Ship25 Oct
- ✓BriefMaya Chen
- ✓Design24 Oct
- 3ReviewPriya Nair
- 4Ship25 Oct
- ✓BriefMaya Chen
- ✕Design24 Oct
- 3ReviewPriya Nair
- ✓BriefMaya Chen
- ✓Design24 Oct
- ✓ReviewPriya Nair
In context
New projectA wizard's progress on a phone
New project
Step 2 of 4
- ✓Name
- 2Crew
- 3Dates
- 4Review
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | StepItem[] | Yes | — |
current | number | undefined | No | 0 |
direction | "horizontal" | "vertical" | undefined | No | horizontal |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
onItemClick | ((index: number) => void) | undefined | No | — |
connector | boolean | undefined | No | true |
Accessibility
current (an index) derives each step's status: before it "finish" (✓), at it "process", after it "wait"; the active step is marked aria-current="step". Any item can set its own status (including "error"). With onItemClick every step is a real button.
data-rebar-* attributes
data-rebar-component="steps", data-rebar-direction, data-rebar-part="item" | "icon" | "content", data-rebar-status="wait" | "process" | "finish" | "error" on each item.
Migrating to Ant Design
AntD's Steps takes the same items/current/direction shape almost verbatim. Not yet codemod-covered.