shadcn.io is an independent project built on shadcn/ui
The button starts on Select interests... and then counts against the cap, as in 1/3 selected. At three picks, the other rows are disabled and a note says Maximum 3 selections reached.
Use it where a hard limit applies, such as a plan limit or a top-three choice. An unlimited multi-select is a Combobox with no cap. In Svelte, Ark UI does not enforce the limit of 3.
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}/${MAX_SELECTIONS} selected`}{:else}{"Select interests..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search interests..." showTrigger={false} /><ComboboxEmpty>No interest found.</ComboboxEmpty>{#if isMaxReached}<p class="p-2 text-center text-muted-foreground text-xs">Maximum {MAX_SELECTIONS} selections reached</p>{:else}{/if}<ComboboxList>{#each collection.items as interest (interest.value)}<ComboboxItem item={interest}>{interest.label}</ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>FAQ
Where is the limit set?
In a MAX_SELECTIONS constant of 3. The demo compares the number of picks against it on every render.
How are the other rows disabled?
When the cap is reached, every row that isn't picked is disabled. Picked rows stay enabled so they can be unpicked.
The collection is rebuilt with createListCollection and an isItemDisabled that checks the cap.
Where does the limit note show?
Above the list, inside ComboboxContent, as a centered muted line. It only renders while the cap is reached.
What does the button show?
The count against the cap, as 1/3 selected, or Select interests... when nothing is picked.
API Reference
Combobox
Sets collection={collection}, multiple, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.
