Installation
Usage
Icons
Add an icon to the Indicator component to display an icon.
Vertical
Add orientation="vertical" to the Nav component to make the stepper vertical.
Form
Create a multi-step form with the Stepper component.
API Reference
Root
The root component of the stepper. Manages the current step state.
| Prop | Type | Default |
|---|---|---|
step? $bindable | number | - |
children? | Snippet | - |
Nav
The navigation container for the stepper. Controls the orientation of the stepper.
Item
A single step item in the stepper. Each item represents one step in the process.
| Prop | Type | Default |
|---|---|---|
id? | string | - |
Trigger
The clickable trigger button for a step. Allows users to navigate to a specific step.
| Prop | Type | Default |
|---|---|---|
ref? $bindable | HTMLButtonElement | null |
onclick? | function | - |
onkeydown? | function | - |
children? | Snippet | - |
Indicator
The visual indicator for a step (usually displays the step number or an icon).
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
Separator
The visual separator between steps. Automatically hidden for the last step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
Title
The title text for a step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
Description
The description text for a step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
Next
A button component that navigates to the next step. Automatically disabled when on the last step.
| Prop | Type | Default |
|---|---|---|
disabled? | boolean | false |
variant? | enum | default |
size? | enum | default |
child? | Snippet | - |
children? | Snippet | - |
Previous
A button component that navigates to the previous step. Automatically disabled when on the first step.