Stepper
Force a state; otherwise derived from currentStep.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
Force a state; otherwise derived from currentStep.
Accessibility
Arrow keys move between items; the current item is marked aria-current. Tabs follow the WAI-ARIA tabs pattern (roving tabindex, Home/End).
Import
const { Stepper } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
steps | Step[] | Yes | |
currentStep | number | — | 0-indexed current step; earlier steps render complete. |
orientation | "horizontal" | "vertical" | — | |
markerPosition | "start" | "end" | — | Marker placement relative to the label. "end" = icon-after-text (horizontal) or right-aligned text-on-left rail (vertical). Default "start". |
onStepClick | (index: number, step: Step) => void | — | Makes completed steps clickable: (index, step) => void. |
className | string | — |