shadcn.io is an independent project built on shadcn/ui
JavaScript and TypeScript start selected. The button says 2 skills selected, and the plural follows the count. The button stays one line however many skills are picked.
Use it where the button has to stay narrow and the number of picks is the useful summary. Showing each name as a chip fits a Combobox with chips. In React, Ark UI does not write the count. The button label does.
Installation
Anatomy
Usage
<Combobox
collection={collection}
multiple
onInputValueChange={handleInputValueChange}
onValueChange={handleValueChange}
positioning={{ getAnchorElement: () => triggerRef.current }}
value={value}
>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)}
ref={triggerRef}
>
{value.length > 0
? `${value.length} skill${value.length > 1 ? "s" : ""} selected`
: "Select skills..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search skills..."
showTrigger={false}
/>
<ComboboxEmpty>No skill found.</ComboboxEmpty>
<ComboboxList>
{collection.items.map((skill) => (
<ComboboxItem item={skill} key={skill.value}>
{skill.label}
</ComboboxItem>
{/* The rest of the file is under Installation. */}FAQ
How is the label built?
From the number of selected values: skill gets an s when there is more than one, so it reads 1 skill selected or 3 skills selected. With nothing picked it says Select skills....
What is selected at first?
JavaScript and TypeScript, the starting value of the selection the demo keeps.
Which skills are listed?
JavaScript, TypeScript, Python, Rust, Go and Java. The search box says Search skills..., and No skill found. shows when nothing matches.
How are picked skills marked?
ComboboxItem shows its check on every picked row, and a second pick clears it.
API Reference
Combobox
Sets collection={collection}, multiple, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.
