shadcn.io is an independent project built on shadcn/ui
React, Vue, and Angular sit under Frontend. Node.js, Python, and Ruby sit under Backend. Each group keeps its label while it still has matches.
Use it when options fall into a few categories and the labels help people scan. A list this short can also be a grouped Select. In Vue, Ark UI hides a group once a search clears it out.
Installation
Anatomy
Usage
<Combobox
:collection="collection"
@input-value-change="handleInputValueChange"
@value-change="handleValueChange"
:positioning="{ getAnchorElement: () => triggerRef }"
selectionBehavior="clear"
:value="value"
>
<ComboboxTrigger
:class='cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)'
ref="triggerRef"
>
{{ selected ? selected.label : "Select technology..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search..." :showTrigger="false" />
<ComboboxEmpty>No technology found.</ComboboxEmpty>
<ComboboxList>
<ComboboxGroup v-for="([group, items]) in groups" :heading="group" :key="group">
<ComboboxItem v-for="item in items" :item="item" :key="item.value">
{{ item.label }}
</ComboboxItem>
</ComboboxGroup>
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How are the groups built?
The items carry a group field, groupBy in useListCollection splits them, and each pair from collection.group() renders a ComboboxGroup with heading.
Does the search keep the labels?
Yes. A group keeps its label while it has matches and is hidden when it has none. No technology found. shows when neither group matches.
Which technologies are listed?
React, Vue and Angular under Frontend. Node.js, Python and Ruby under Backend.
How are the labels announced?
Each group is a group in the list, named by its label, so screen readers say Frontend or Backend when the highlight moves into it.
Can I add a line between the groups?
Yes, put a ComboboxSeparator between them, as in Categories with Separators.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
