shadcn.io is an independent project built on shadcn/ui
Every row starts with a checkbox, so it is obvious that several categories can be picked. The button says 1 category or 3 categories, matching the count.
Use it when people might not expect a combobox to take more than one value. One choice, with no boxes, is a Select. In Vue, Ark UI keeps the picks as a list.
Installation
Anatomy
Usage
{
filter: unref(filterApi).contains,
initialItems: categories,
}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.
showIndicator={false} on ComboboxItem leaves it out.
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.
