shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
With Checkboxes Visible Combobox for React
A multi-select combobox that marks each row with a checkbox.
A category picker where every row starts with a checkbox, so it's clear at a glance that several can be picked. The button counts them, as 1 category or 3 categories. Use it when people might not expect a combobox to take more than one value.
Preview
Installation
FAQ
Is the checkbox a real Checkbox component?
No. It's a span drawn like one: a bordered size-4 box that fills with the primary color and shows a CheckIcon when the row is picked. The row itself is the option, so a real checkbox inside it would be a second control in the same place.
What happens to the usual check mark?
It's hidden, so the checkbox is the only mark.
The item's indicator is hidden with a class on ComboboxItem.
How does each box know it's checked?
It checks whether the row's category is in the selection the demo keeps in state.
What does the button show?
1 category, 2 categories and so on, or Select categories... when none are picked.
Related
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- With Select All Option ComboboxA multi-select combobox with a Select All
- Simple CheckboxA checkbox with a label for a single
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- With Max Selections Limit ComboboxA multi-select combobox that stops at
- Simple Single Select ComboboxA single-select combobox that opens from