shadcn.io is an independent project built on shadcn/ui
Select All sits at the top, set off by a separator. It picks Read, Write, Delete, and Admin together, and clears them when they are all picked. The button counts permission(s) selected.
Use it where people often want everything, or everything but one. Picking a few by hand is a Combobox with checkboxes. In Svelte, Ark UI does not add Select All. This row does.
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 count > 0}{`${count} permission(s) selected`}{:else}{"Select permissions..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search permissions..." showTrigger={false} /><ComboboxEmpty>No permission found.</ComboboxEmpty><ComboboxList>{#each collection.items as option}{#if option.value === ALL}<ComboboxItem item={option}><span class="font-medium">{option.label}</span></ComboboxItem>{#if collection.items.length > 1}<ComboboxSeparator />{:else}{/if}{:else}<ComboboxItem item={option}>{option.label}</ComboboxItem>{/if}{/each}</ComboboxList></ComboboxContent></Combobox>FAQ
How is Select All built?
As one more option with the value all, in font-medium, followed by a ComboboxSeparator. Being an option, it gets the arrow keys, Enter and the check mark like any other row.
What happens when it's picked?
The demo's change handler compares the new value with the old one. When all was just added it selects every permission. When it was just removed it clears them all.
Why does Select All get checked by itself?
Picking the last permission by hand adds all to the value too, and unpicking any permission removes it. So the row's check always matches whether everything is selected.
What does the button count?
Only the permissions, leaving all out: 4 permission(s) selected, or Select permissions... when none are.
API Reference
Combobox
Sets collection={collection}, multiple, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.
