Stepper
Markdown for agentsMulti-step flow indicator: ordered list, aria-current step, text state for complete/current/upcoming.
npx slipstream-ui@latest add stepperOnboarding wizard (interactive)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { label: string; description?: string }[] | required | Ordered step definitions. |
| current | number | required | Zero-based index of the active step. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction. |
| onStepClick | (index: number) => void | — | Makes steps clickable (revisit flows). |
Accessibility
- Ordered list semantics; the active step carries aria-current="step".
- Complete/current/upcoming are stated in screen-reader text, not only color.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.