shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
With Select All Option Combobox for React
A multi-select combobox with a Select All row that picks or clears every permission.
A permission picker with Select All at the top, set off by a separator. It picks all four permissions at once, or clears them when they're all picked, and it shows as checked once every permission is. Use it where people often want everything, or everything but one.
Preview
Installation
FAQ
How is Select All built?
As one more option with the value all, in font-medium, followed by a ComboboxSeparator. Being an option, it gets the arrow keys, Enter and the check mark like any other row.
What happens when it's picked?
The demo's change handler compares the new value with the old one. When all was just added it selects every permission. When it was just removed it clears them all.
Why does Select All get checked by itself?
Picking the last permission by hand adds all to the value too, and unpicking any permission removes it. So the row's check always matches whether everything is selected.
What does the button count?
Only the permissions, leaving all out: 4 permission(s) selected, or Select permissions... when none are.
Related
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- With Clear All Functionality ComboboxA multi-select combobox with a button
- With Max Selections Limit ComboboxA multi-select combobox that stops at
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- With Subtitle CheckboxA checkbox whose label has a short muted
- Categories with Separators ComboboxA combobox whose pages are split into