shadcn.io is an independent project built on shadcn/ui
The button reads 2 topic(s) selected. Frontend and Backend start selected and show as badges under the field, so the button stays one line as more topics are added.
Use it in a form where the picks should stay visible without crowding the button. Chips inside the field are a Combobox with badges in the control. In Vue, Ark UI keeps the picks as a list.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2">
<Combobox
:collection="collection"
:multiple="true"
@input-value-change="handleInputValueChange"
@value-change="handleValueChange"
:positioning="{ getAnchorElement: () => triggerRef }"
:value="value"
>
<ComboboxTrigger
:class='cn(
buttonVariants({ variant: "outline" }),
"w-[250px] justify-between"
)'
ref="triggerRef"
>
{{ value.length > 0
? `${value.length} topic(s) selected`
: "Select topics..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search topics..." :showTrigger="false" />
<ComboboxEmpty>No topic found.</ComboboxEmpty>
<ComboboxList>
<ComboboxItem v-for="topic in collection.items" :item="topic" :key="topic.value">
{{ topic.label }}
</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>
<div v-if="selected.length > 0" class="flex flex-wrap gap-1">
<!-- The rest of the file is under Installation. -->FAQ
Where is the selection kept?
In the demo's state, passed to Combobox and updated on every change. Both the button and the badges read from it.
The value is an array of topic values, starting with frontend and backend.
What does the button show?
The number of picked topics, as 2 topic(s) selected, or Select topics... when none are.
How are the badges rendered?
A flex flex-wrap gap-1 row of secondary Badges, one per picked topic, below the combobox. The row is hidden when nothing is selected.
How do I remove a topic?
Open the list and pick it again: in a multiple combobox a second pick clears it. The badges are display only. Add a remove button to them if people should clear picks from there.
API Reference
Combobox
Sets collection="collection", multiple, input-value-change="handleInputValueChange", value-change="handleValueChange", positioning and getAnchorElement. The rest is on the Combobox page.
Badge
Sets v-for="topic in selected", key="topic.value" and variant="secondary". The rest is on the Badge page.
