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 React, Base UI keeps the picks as a list.
Installation
Anatomy
Usage
<ComboboxItem
className="gap-2 [&_.cn-combobox-item-indicator]:hidden"
key={category.value}
value={category}
>
<span
aria-hidden="true"
className={cn(
"flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs",
checked &&
"border-primary bg-primary text-primary-foreground"
)}
>
{checked ? <CheckIcon className="size-3.5" /> : null}
</span>
{category.label}
</ComboboxItem>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.
API Reference
Combobox
Sets value={category}. The rest is on the Combobox page.
