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 Svelte, Ark UI keeps the picks as a list.
Installation
Anatomy
Usage
<Combobox collection={collection} multiple onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} value={value}><ComboboxTrigger class={cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)} bind:ref={triggerRef}>{#if value.length > 0}{`${value.length} categor${value.length > 1 ? "ies" : "y"}`}{:else}{"Select categories..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search categories..." showTrigger={false} /><ComboboxEmpty>No category found.</ComboboxEmpty><ComboboxList>{#each collection.items as category (category.value)}{@const checked = value.includes(category.value)}<ComboboxItem class="gap-2" item={category} showIndicator={false}><span aria-hidden="true" class={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"
)}>{#if checked}<CheckIcon class="size-3.5" />{:else}{/if}</span>{category.label}</ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>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.
API Reference
Combobox
Sets collection={collection}, multiple, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.
