Steps
A step indicator that guides users through a task, with four states (wait / process / finish / error), vertical layout and clickable navigation.
Basic usage
In progress
Finished state
All finished
Initial step
Initial waiting
Four states
Set the state explicitly per step via the status field: wait waiting (secondary color + number), process in progress (primary color + number), finish done (success color + ✓), error error (danger color + ✕).
wait / process / finish / error
Clickable switching
With clickable enabled, step items are clickable to jump (the whole item is clickable and keyboard-reachable via Enter/Space); clicking fires oas-change (detail is { index }) and switches the current step.
Click a step to switch the current step
Without description
Titles only
Vertical
Vertical direction
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
clickable | Steps are clickable to jump (boolean; enabled when present) | boolean | — |
current | Current step index (0-based) | string | 0 |
direction | Direction | string | horizontal |
steps | [{ title, description?, status? }] JSON string | StepItem[] | string | [] |
Events
| Event | Description |
|---|---|
oas-change | Fired when a clickable step is clicked (including keyboard triggers); detail: { index } (0-based) |
State rules: an explicit status (wait / process / finish / error) takes priority; otherwise it is derived from current — index < current is finish (✓), === current is process, and the rest are wait.