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
Progress dot
With progress-dot, the step indicator becomes a dot (the current step is enlarged with a soft halo) and the connector is a thin line; combined with clickable, dots are clickable to jump (keyboard included).
Progress dot
Navigation mode
With navigation, steps become an arrow navigation bar: the current step is highlighted in primary color, previous steps use a light primary tint, waiting steps are gray, and descriptions are hidden. Step items are implicitly clickable (no clickable needed). A "Previous / Next" button row is rendered at the bottom (disabled at the first/last step); clicking a step or a button fires oas-change (detail is { index }) and switches the current step.
Navigation mode (Previous / Next)
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 (forced to horizontal in navigation mode) | string | horizontal |
navigation | Navigation mode: arrow bar with a bottom Previous/Next button row (boolean; enabled when present) | boolean | — |
progress-dot | Progress-dot steps: dot indicators with a thin connector line (boolean; enabled when present) | boolean | — |
steps | [{ title, description?, status? }] JSON string | StepItem[] | string | [] |
Events
| Event | Description |
|---|---|
oas-change | Fired when a clickable step or a navigation button 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.