1 viewer
Component · Navigation
Stepper
Horizontal step progress indicator showing completion state.
- Category
- Navigation
- Slots
- 4
- States
- 3
- Writer
- Shared
Preview
<Stepper
steps={[
{ id: "step-1", label: "Identity Verification", status: "done" },
{ id: "step-2", label: "Execution Lease", status: "current" },
{ id: "step-3", label: "Settlement Receipt", status: "upcoming" }
]}
/>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-stepper |
| item | — |
| circle | — |
| label | — |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-navigation | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
An ordered step list keeps progress understandable without recipe styling.
- Expose an accessible label for the overall progress landmark.
- Mark the active step with aria-current and keep completion state available as text.