shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Forms
Status Selector Button Group for React
A workflow status picker with To Do, In Progress, Review and Done, and Backlog, Active and Completed that share one selection.
Status buttons for a task form or a board card. The first row is a four-step workflow, the second a shorter three-stage one. Both write one value that starts at To Do, and the selected button is filled and announced as pressed.
Preview
Installation
FAQ
How is the status tracked?
One value, starting at todo. Each button carries its own value, such as inProgress, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
Do the two rows share a selection?
Yes. Picking Active clears To Do. Keep the row that matches your workflow.
Can someone skip from To Do to Done?
Yes, any button can be picked. Disable the steps that aren't allowed yet if your workflow enforces an order.
Does the demo save the status?
No. It only stores it in the component. Send the value to your API when it changes.
Related
- Priority Selector Button GroupA priority picker with Low, Medium, High
- Date Selector Button GroupA date range picker with presets from
- Wizard Steps Button GroupWizard navigation with Back and Next
- Default Toggle GroupA toggle group for bold, italic and
- Badge with Text (Standard)A default badge with a short label for a
- Quantity Picker Button GroupTwo quantity pickers with minus and plus