Steps

Organism
Multi-step progress indicators: horizontal, vertical, with progress.
src/organisms/steps
View in Navigation

Playground

Every control sets a real prop of StepsProps. The JSX below updates as you go.
Account
2
Profile
3
Review
Props
current
number
1
Layout
pick one
JSX · StepsProps
<Steps current={1} />

Variants

3 examples from src/organisms/steps/steps.md, each rendered live from its own JSX.
Account
Email verified and password set.
2
Profile
Add your name and avatar.
3
Review
Invite collaborators.
Vertical
<Steps
vertical
steps={[
{ label: "Account", description: "Email verified and password set." },
{ label: "Profile", description: "Add your name and avatar." },
{ label: "Review", description: "Invite collaborators." }
]}
defaultCurrent={1}
/>
Setup progress
68%
Progress bar
<Steps progress steps={[]} value={68} />
Account
2
Profile
3
Review
Stacks at narrow widths
stacks renders the horizontal layout as the vertical one when the component's own container is at or below stackBreakpoint (default sm = 640): container-measured, like Row stacks, so a wizard header inside a narrow column stacks too.
<Steps
stacks
steps={[{ label: "Account" }, { label: "Profile" }, { label: "Review" }]}
defaultCurrent={1}
/>

Anatomy

Account
2
Profile
3
Review
1
Step
2
Marker
3
Connector
4
Label
Dimmed parts appear only in some states or variants.

Props

14 props on StepsProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
steps *
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).
Layout
pick one
11 props
vertical
boolean
false
compact
boolean
false
A short vertical list with 22px markers and no connector lines, for a workflow sidebar.
segmented
boolean
false
Equal segments in a row: each step a 4 px bar (the accent once reached, glowing on the current step) over its label and, from its description, a status line inked by the step's state (the success ink once done, the accent's text ink on the current step).
progress
boolean
false
Render a labeled percentage progress bar instead of discrete steps.
stacks
boolean
false
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.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
button
progressbar
ARIA on web
aria-current

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Setup progress
68%
Web
control 10 · field 10 · card 16 · Instrument Sans
Setup progress
68%
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Setup progress
68%
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Steps
steps={[{ label: "Account" }, { label: "Profile" }, { label: "Review" }]}
defaultCurrent={1}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion
--ion-fg
--ion-soft
--ion-tx
--ln2
--tx
--tx3

Related components