Use the following composition to build a Stepper:
Add an icon to the Indicator component to display an icon.
Add orientation="vertical" to the Nav component to make the
stepper vertical.
Create a multi-step form with the Stepper component.
The root component of the stepper. Manages the current step state.
| Prop | Type | Default |
|---|---|---|
step? $bindable | number | - |
children? | Snippet | - |
The navigation container for the stepper. Controls the orientation of the stepper.
A single step item in the stepper. Each item represents one step in the process.
| Prop | Type | Default |
|---|---|---|
id? | string | - |
The clickable trigger button for a step. Allows users to navigate to a specific step.
The visual indicator for a step (usually displays the step number or an icon).
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
The visual separator between steps. Automatically hidden for the last step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
The title text for a step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
The description text for a step.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
A button component that navigates to the next step. Automatically disabled when on the last step.