shadcn.io is an independent project built on shadcn/ui
One priority, two rows, starting at Medium. Words are Low, Medium, High, and Urgent. Codes are P1, P2, P3, and P4. They are not paired: picking P2 clears Medium, and P2 is not stored as Medium. The selected button is filled. Urgent is not a different color.
Keep the row your team uses, or map the codes onto the words yourself. One tab stop with arrow keys is a Radio Group. In React, Ark UI does not submit this choice with the form.
Installation
Anatomy
Usage
<div className="flex flex-col gap-4">
<ButtonGroup aria-label="Priority">
{LEVELS.map((item) => (
<Button
aria-pressed={priority === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={priority === item.value ? "default" : "outline"}
>
{item.label}
</Button>
))}
</ButtonGroup>
<ButtonGroup aria-label="Priority code">
{CODES.map((item) => (
<Button
aria-pressed={priority === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={priority === item.value ? "default" : "outline"}
>
{item.label}
</Button>
))}
</ButtonGroup>
</div>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.
API Reference
Button Group
Sets aria-label="Priority" and aria-label="Priority code". The rest is on the Button Group page.
Button
Sets aria-pressed={priority === item.value}, onClick={handleSelect}, size="sm", value={item.value} and variant={priority === item.value ? "default" : "outline"}. The rest is on the Button page.
