shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Forms
Priority Selector Button Group for React
A priority picker with Low, Medium, High and Urgent, and P1 to P4 buttons that share one selection.
The priority field on a task or issue form. Words in the first row, codes in the second, both writing one value that starts at Medium. The selected button is filled and announced as pressed.
Preview
Installation
FAQ
How is the priority tracked?
One value, starting at medium. Each button carries its own value, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
Do the two rows share a selection?
Yes. Picking P2 clears Medium. Keep only the row your team uses, or map P1 to Urgent and so on.
Can Urgent be red?
Yes. Set that button's variant to destructive when it's selected. The demo uses the same fill for every level so the row stays even.
How do I submit the choice with a form?
Put a hidden input with the value in the form, or read it in your submit handler. The buttons have type="button", so pressing one doesn't submit.
Is this a radio group?
No. These are buttons with aria-pressed. A Radio Group or a Toggle Group gives one tab stop and Arrow key movement if you need them.
Related
- Status Selector Button GroupA workflow status picker with To Do, In
- Date Selector Button GroupA date range picker with presets from
- Default Toggle GroupA toggle group for bold, italic and
- Badge with Text (Destructive)A destructive badge for an error, a
- Button with Text (Outline)A border, no fill
- Quantity Picker Button GroupTwo quantity pickers with minus and plus