The Stepper component displays a multi-step progress indicator. Steps can be completed, active, or pending. Users can click steps to navigate between them, with optional linear progression constraints.
Basic Example
Click a step circle to navigate, or use the button to advance through the wizard:
No preview available
Example
Highlighting code...
Properties
Core Properties
- steps: Array of step objects
- current: Active step index (bindable)
- currentStage: Sub-stage within step (bindable)
- onclick: Callback on step click
Configuration
- linear: Only allow forward progression
- orientation: horizontal or vertical
- icons: Custom icon for completed state
- content: Snippet for step content area
Step Object
- text: Label shown below the circle
- label: Custom text inside circle (default: step number)
- completed: Whether the step is finished
- disabled: Prevents clicking
- stages: Number of sub-stages (shows dots)