API and Development
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 |
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.
| Field | Type | Notes |
|---|---|---|
id | string | Required |
label | LocalizedMessage | Shown below the section track segment |
steps | readonly StepperStep[] | Steps in this section, in order |
| 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 |
| Field | Type | Notes |
|---|---|---|
step | StepperStep | The step that changed |
state | StepperState.Complete | StepperState.Current | The state it moved to |
Complete, Current, Upcoming, Error (hidden label when step.error is set; does not override progress).
Stepper, StepperState, and the types StepperProps, StepperStep, StepperChange and StepperStateLabels.
| 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. |
orientation | StepperOrientation | — | Sectioned layout is horizontal only (ST-24). |
ref | Ref<HTMLOListElement> | — | — |
sections | readonly StepperSection[] | — | — |
sectionSummary | ((position: { index: number; count: number; }) => LocalizedMessage) | — | Horizontal sectioned layout only: formats the current step position within its section (for example "Step 2 of 4"). Nothing renders when omitted. |
selection | StepperSelection | StepperSelection.Completed | Which steps become buttons when {@link StepperSharedProps.onStepSelect} is set. |
steps | readonly StepperStep[] | — | — |