Stepper
stable 3.1 kB<hk-stepper>Multi-step flows with validation gating: in linear mode a step only unlocks when the previous one reports valid. Three presentations share that one state — a numbered rail, a vertical panel list, and a compact progress header — so `variant` changes how a wizard looks without touching what it does or what it emits.
#wizard#flow
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| step | number | 0 | Zero-based active index. Two-way bindable. |
| variant | 'rail' | 'panels' | 'progress' | 'rail' | Numbered markers on a track, a vertical rail carrying its own copy, or a compact segmented header. Swapping it changes how the wizard looks, never what it emits. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Rail direction. Panels are vertical regardless. |
| linear | boolean | false | Requires each step to be valid before advancing. |
Outputs
completedEventEmitter<void>Fires when the last step is confirmed.
Theming
This one adds no tokens of its own — it renders entirely from the global token layer.
Accessibility
- Rail is decorative and aria-hidden; progress is announced via aria-current="step".