API and Development
Stepper, 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 | |
ref | Ref<HTMLOListElement> | The list element |
| Field | Type | Notes |
|---|---|---|
id | string | Required; the React key and what current points at |
label | LocalizedMessage | DisplayValue | Required |
state | StepperState | Wins over the state derived from current |
| Field | Type | Notes |
|---|---|---|
step | StepperStep | The step that changed |
state | StepperState.Complete | StepperState.Current | The state it moved to |
Complete, Current, Upcoming, NeedsConfirmation.
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 | — | — |
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> | — | — |