Forms & input
Status stepper
An inline status pill you advance with a single click — Backlog → Todo → In progress → In review → Done — with a progress track that fills as work moves. Right-click or the caret jumps straight to any status. The fastest way to nudge a task forward without opening a menu.
npx shadcn@latest add @orbit/status-stepperOverview
Click a pill to step it forward (it loops past Done), or use the caret / right-click to set any status directly.
Click a status to advance it
Left-click steps forward through the workflow · right-click (or the caret) picks any status
States
Disabled mutes the pill and blocks both the advance and the menu. showTrack={false} drops the progress bar for tight layouts.
Statuses
One pill per workflow stage. The dot, label, tint and reached track ticks all take the status colour, and the segmented bar fills as the status advances.
Controlled
Pass value + onValueChange to own the status, or defaultValue for an uncontrolled start. Advancing and jumping both report through onValueChange.
value: "todo" · Todo
Custom workflows
Pass your own ordered statuses — each with a value, label and colour token. The stepper loops through whatever sequence you give it, and WORKFLOW_STATUSES exports the default five-stage set.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| statuses | StepperStatus[] | WORKFLOW_STATUSES | Ordered workflow statuses. Defaults to the spec's five-stage set (exported as WORKFLOW_STATUSES). |
| value | string | — | Current status value. Use with onValueChange for a controlled stepper. |
| defaultValue | string | statuses[0].value | Initial status when uncontrolled. |
| onValueChange | (value: string) => void | — | Called with the new status value on advance or jump. |
| showTrack | boolean | true | Segmented progress bar beside the pill. |
| disabled | boolean | false | Blocks the advance click, the caret and the right-click menu. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the wrapper div, including ref and className. |
| Prop | Type | Default | Description |
|---|---|---|---|
| StepperStatus.value | string | — | Unique value identifying the status. |
| StepperStatus.label | string | — | Text shown in the pill and the jump menu. |
| StepperStatus.color | string | — | Status colour — a theme token or a color-mix of tokens (never raw hex). |
Usage
Use the stepper where a status moves forward in a known order. For unordered options or multi-select, a plain Combobox or Status menu is the right control.
Order matches the board
Step through the same sequence as your Kanban columns, so advancing here and dragging there mean the same thing.
Trap users in the loop
Looping past Done is handy, but always offer the direct picker so no one has to click five times to go back one.
Colour-code consistently
Reuse the status palette everywhere — the same green for Done in the pill, the track, the board and the charts.
Use it for unordered sets
Stepping implies a sequence. For labels, assignees or anything without a natural order, use a menu or combobox.
Keyboard & accessibility
The pill is a native button — its accessible name announces the current status and the step it advances to — and the jump menu inherits Base UI Menu semantics: roving focus, typeahead, Escape to close. The dot pulse and track transition freeze under prefers-reduced-motion.