Stepper @astryx-svelte/core v0.4.5 · Stepper
Usage
Steppers display progress through a sequence of logical and numbered steps. Use them for multi-step workflows like forms, onboarding flows, or checkout processes where users need to see their position and the steps ahead. Rendered as an ordered list (not a navigation landmark).ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep step labels short and descriptive: "Payment" not "Enter your payment information". |
| Do | Use the vertical orientation for narrow containers or when steps have longer descriptions. |
| Do | Provide onStepClick for non-linear workflows where users may need to revisit earlier steps. |
| Do | Use status only to apply a semantic color (accent/success/warning/error); pass a custom icon for richer indicators. |
| Don't | Use a stepper for fewer than 3 steps; a simple heading or progress bar works better. |
| Don't | Use more than 7 steps; consider grouping related steps or using a different pattern. |
Examples
Common configurations, variations, and states.Stepper — Custom Content
A vertical stepper where each step owns a slice of the page. The content slot takes any node — form fields, a summary panel, a banner — so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.
Stepper — Indicator Modes
The indicator prop side by side: none (the bar and label carry the progress on their own), auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.
Stepper — On-Track Horizontal
The on-track layout in horizontal orientation: instead of sitting beside the label, each indicator is slotted into the connector itself, so the numbered nodes read as beads on one continuous line. Labels center under their node.
Stepper — On-Track Vertical
The on-track layout in vertical orientation: indicators sit inline on a continuous connector rail, with each label and description beside its node. Compare with the separated layout, where the indicator sits alongside its own bar segment instead of on a shared rail.
Stepper — Validation Status
Semantic status per step in a verification flow: success shows a green check, error a red glyph, accent the in-progress step. Status sets the indicator color and glyph only, never the connector, and is announced to assistive tech as text.