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 | The steps, in order. An empty list renders nothing |
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 |
| 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>> | — | — |
steps | readonly StepperStep[] | — | — |
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 | — | — |
ref | Ref<HTMLOListElement> | — | — |
selection | StepperSelection | StepperSelection.Completed | Which steps become buttons when {@link StepperBaseProps.onStepSelect} is set. |