shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Multiple Groups with Labels Combobox for React
A combobox with Frontend and Backend groups, each under its own label.
A technology picker split into two labeled groups: React, Vue and Angular under Frontend, and Node.js, Python and Ruby under Backend. Use it when the options fall into a few clear categories and the labels help people scan.
Preview
Installation
FAQ
How are the groups built?
The data is a list of groups. Each ComboboxGroup gets its items, a ComboboxLabel, and a ComboboxCollection that renders the items.
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.
Related
- Nested/Hierarchical Groups ComboboxA combobox that lists countries under
- Categories with Separators ComboboxA combobox whose pages are split into
- Groups with Item Counts ComboboxA combobox whose group headings show how
- Simple Single Select ComboboxA single-select combobox that opens from
- Recent Selections Section ComboboxA combobox with a Recent section of files
- Recent vs All Items ComboboxA combobox with recently used projects