Stepper

Multi-step / wizard flow. Steps expose data-state (active / completed / inactive); navigate with per-step triggers or the built-in Prev/Next buttons. Set linear to prevent skipping ahead. Controlled and uncontrolled.

Features

Horizontal or vertical orientation.

Steps expose data-state for active, completed, and inactive styling.

Built-in Prev/Next triggers that auto-disable at the ends.

Linear mode blocks jumping to steps ahead of the current one.

Per-step Content panels with optional forceMount.

Can be controlled or uncontrolled.

Example

Account

Create your account credentials.

Anatomy


import { Stepper } from '@wire-ui/react'
 
<Stepper.Root count={3} defaultValue={0}>
<Stepper.List>
<Stepper.Item index={0}>
  <Stepper.Trigger>Account</Stepper.Trigger>
  <Stepper.Separator />
</Stepper.Item>
<Stepper.Item index={1}>
  <Stepper.Trigger>Profile</Stepper.Trigger>
  <Stepper.Separator />
</Stepper.Item>
<Stepper.Item index={2}>
  <Stepper.Trigger>Review</Stepper.Trigger>
</Stepper.Item>
</Stepper.List>
 
<Stepper.Content index={0}>Account step</Stepper.Content>
<Stepper.Content index={1}>Profile step</Stepper.Content>
<Stepper.Content index={2}>Review step</Stepper.Content>
 
<Stepper.PrevTrigger>Back</Stepper.PrevTrigger>
<Stepper.NextTrigger>Next</Stepper.NextTrigger>
</Stepper.Root>

Styling

Stepper sets data-state on Item, Trigger, and Content (and on Separator when it sits inside an Item). Use it to highlight the active step, mark completed steps, and fill completed connectors.


<Stepper.Trigger className="
  text-gray-400
  data-[state=active]:text-black
  data-[state=completed]:text-black
">
  Step
</Stepper.Trigger>
 
<Stepper.Separator className="
  bg-gray-200
  data-[state=completed]:bg-black
" />

Using data attributes

Item, Trigger, and Content carry data-state with "active", "completed", or "inactive". Root and List carry data-orientation. Separators inside an Item carry data-state ("completed" / "inactive").


/* Completed connector */
[data-state="completed"] { background: #000; }
 
/* Vertical layout tweaks */
[data-orientation="vertical"] .connector { width: 1px; height: 100%; }

Root props

Prop	Type	Default	Description
`count`	`number`	required	Total number of steps (used to clamp next/prev)
`value`	`number`	—	Controlled current step (0-based)
`defaultValue`	`number`	`0`	Initial current step (uncontrolled)
`onChange`	`(index: number) => void`	—	Called when the current step changes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation
`linear`	`boolean`	`false`	Prevent jumping to steps ahead of the current one

Renders a <div> with data-orientation; accepts standard div attributes (except onChange).

Item props

Prop	Type	Description
`index`	`number`	0-based position of this step

Renders a <div role="listitem"> with data-state and data-index.

Content props

Prop	Type	Default	Description
`index`	`number`	required	Step index this panel belongs to
`forceMount`	`boolean`	`false`	Keep the panel mounted (hidden) when inactive

Renders a <div role="tabpanel"> with data-state and data-index.

Trigger / Separator / PrevTrigger / NextTrigger props

Sub-component	Type	Description
`Stepper.Trigger`	`ButtonHTMLAttributes`	Navigates to its Item’s step. Sets `aria-current="step"` when active; auto-disabled for steps ahead in linear mode
`Stepper.Separator`	`HTMLAttributes`	Connector; `role="separator"`, `aria-hidden="true"`, `data-orientation`
`Stepper.PrevTrigger`	`ButtonHTMLAttributes`	Goes to the previous step; disabled at the first step
`Stepper.NextTrigger`	`ButtonHTMLAttributes`	Goes to the next step; disabled at the last step
`Stepper.List`	`HTMLAttributes`	Wraps the items; `role="list"`, `aria-orientation`, `data-orientation`

Data attributes

Attribute	Element	Values
`data-state`	Item, Trigger, Content, Separator (in Item)	`"active"` / `"completed"` / `"inactive"`
`data-orientation`	Root, List, Separator	`"horizontal"` / `"vertical"`
`data-index`	Item, Content	The step’s 0-based index

Accessibility

Stepper.List renders role="list" with aria-orientation; each Stepper.Item is a role="listitem".
The active Stepper.Trigger sets aria-current="step".
Stepper.Content renders role="tabpanel"; with forceMount an inactive panel is rendered with hidden.
In linear mode, triggers for steps ahead of the current one are disabled.

Keyboard Interactions

Key	Description
`Enter`	Activates the focused step trigger or Prev/Next button.
`Space`	Activates the focused step trigger or Prev/Next button.
`Tab`	Moves focus to the next trigger.
`Shift+Tab`	Moves focus to the previous trigger.