Steps Composition
Position in an ordered sequence — the thing Tabs must not be used for, because tabs let a person skip straight to step three.
Usage
- Account (completed)Who is signing up
- Workspace (current step)Name and members
- BillingPlan and payment
- Done
- Account (completed)Who is signing up
- Workspace (completed)Name and members
- Billing (current step)Plan and payment
- Done
<Steps current={1} steps={[ { label: 'Account', description: 'Who is signing up' }, { label: 'Workspace', description: 'Name and members' },]} />What it announces
Completed and current steps carry a visually hidden "(completed)" and "(current step)". Without them the state is a colour and a tick, and neither reaches a screen reader.
Do
Keep it to five steps or fewer; past that a progress bar with a count reads better.
Don't
Make the markers clickable to jump ahead — if steps can be visited in any order, they were not steps.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| steps | Array<{ label, description? }> | — | In order. |
| current | number | — | Zero-based index of the step in progress. Everything before it renders as done. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical suits a sidebar or a long form. |