Steps

Multi-step progress indicators: horizontal, vertical, with progress.
✓
Account
2
Profile
3
Review
iOS
✓
Account
2
Profile
3
Review
Android
✓
Account
2
Profile
3
Review
Web
tsx
<Steps
steps={[{ label: "Account" }, { label: "Profile" }, { label: "Review" }]}
defaultCurrent={1}
/>

Props

Prop
Description
steps
required
Step[]
Ordered steps to render. Each is a label with an optional one-line note.
current
number
Index of the active step (CONTROLLED). Earlier steps read completed, later ones muted. Omit for uncontrolled use.
defaultCurrent
number
Initial active step for uncontrolled use (pressing a step, with `onStepPress`, moves it).
vertical
boolean
Layout (pick one; default is horizontal).
progress
boolean
Render a labeled percentage progress bar instead of discrete steps.
stacks
boolean
Responsive (horizontal layout only): render the EXISTING vertical layout when the component's own CONTAINER is at or below `stackBreakpoint` (default `sm` = 640). Container-measured with a viewport seed, mirroring Row `stacks`. `vertical` and `progress` are unaffected (a progress bar is already fluid).
stackBreakpoint
BreakpointKey
The breakpoint at and below which `stacks` goes vertical (default `"sm"`). Only meaningful with `stacks`.
value
number
Progress mode only: filled fraction, 0-100 (clamped). Defaults to 0.
label
string
Progress mode only: caption shown left of the percentage.
onStepPress
(index: number) => void
When set, each step circle is pressable, reporting the step index.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Horizontal

Don’t
1
Account
2
Profile
3
Review
Styling several steps as active at once hides which step the user is actually on.
Do
✓
Account
2
Profile
3
Review
Mark exactly one step active; show completed steps filled and the rest pending.

Vertical

Don’t
✓
Account created
2
Profile setup
3
Team invite
4
Done
A vertical step with only a title wastes the space the layout is built to use.
Do
✓
Account created
Email verified and password set.
2
Profile setup
Add your name and avatar.
3
Team invite
Invite collaborators to your workspace.
4
Done
You're all set.
Pair each vertical step with a one-line description so the extra width earns its place.

Progress bar

Don’t
A bare progress bar with no percentage leaves users guessing how far along they are.
Do
Setup progress
68%
Label the bar and show the exact percentage so progress is legible at a glance.
← Sidebar
TabBar →