Import Stepper, StepperOrientation, StepperSelection, and StepperState from @prepared911/ui/stepper.
Stepper takes the props below and nothing else: no native attributes, no style.
Prop
Type
Default
Notes
steps
readonly StepperStep[]
required with flat layout
Mutually exclusive with sections. An empty list renders nothing
sections
readonly StepperSection[]
required with sectioned layout
Horizontal only; mutually exclusive with steps
sectionSummary
(position: { index: number; count: number }) => LocalizedMessage
Current section only; omitted means no summary line
stateLabels
Record<StepperState, LocalizedMessage>
required
Hidden text read before the label, one entry per state
aria-label
LocalizedMessage
Name of the list. aria-label or aria-labelledby is required
aria-labelledby
string
Id of the element that names the list
current
string
Id of the current step. Controlled; a value that names no step warns once
announcement
(change: StepperChange) => LocalizedMessage
The sentence for a step that became current or complete
className
string
Appended to the list
id
string
Id of the list
onStepSelect
(id: string) => void
When set, selectable steps become buttons with roving keyboard focus
selection
StepperSelection
Completed
All allows every non-disabled non-current step
orientation
StepperOrientation
Horizontal
Vertical for a side rail
compact
boolean
false
Horizontal only: hide non-current labels visually
Below the centered-block width (640px), the stepper applies a container-query fold: markers stay on the track, per-step labels and descriptions hide visually, and the current step label (plus section label when sectioned) appears in a fold footer. The root establishes container-type: inline-size; callers do not need an extra wrapper for the fold.
StepperSection
Field
Type
Notes
id
string
Required
label
LocalizedMessage
Shown below the section track segment
steps
readonly StepperStep[]
Steps in this section, in order
StepperStep
Field
Type
Notes
id
string
Required; the React key and what current points at
label
LocalizedMessage | DisplayValue
Required
description
LocalizedMessage
Supporting copy under the label
error
LocalizedMessage
Alert copy under the label; progress stays derived from current (A16)
optional
LocalizedMessage
Muted suffix after the label
disabledReason
LocalizedMessage
Step is not selectable; replaces the description
StepperChange
Field
Type
Notes
step
StepperStep
The step that changed
state
StepperState.Complete | StepperState.Current
The state it moved to
StepperState
Complete, Current, Upcoming, Error (hidden label when step.error is set; does not override progress).
Exports
Stepper, StepperState, and the types StepperProps, StepperStep, StepperChange and StepperStateLabels.
Props
Name
Type
Default
Description
stateLabels
Readonly<Record<StepperState, LocalizedMessage>>
—
—
announcement
((change: StepperChange) => LocalizedMessage)
—
—
aria-label
LocalizedMessage
—
—
aria-labelledby
string
—
—
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
compact
boolean
false
Horizontal only: hide non-current labels visually while keeping them in the accessible name.
current
string
—
Id of the current step (controlled).
id
string
—
—
onStepSelect
((id: string) => void)
—
When set, completed steps are buttons that call this handler; arrow keys move among them.