shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Categories with Separators Combobox for React
A combobox whose pages are split into three unlabeled sections by separators.
A page picker in three sections with a thin rule between them: Home and Dashboard, then Settings and Profile, then Help and Logout. The sections have no headings, so the rules alone do the grouping. Use it for short lists with an obvious split, such as navigation, where a heading per section would be noise.
Preview
Installation
FAQ
How are the sections built?
Each section is a ComboboxGroup and a ComboboxSeparator sits between two groups.
The data is a list of groups, each with its own items.
Why don't the groups show a heading?
The original layout has none, so the groups only get an aria-label (Primary, Secondary, Other) that screen readers announce. Add a group label when the sections need a name on screen, as in Multiple Groups with Labels.
What happens to the separators during a search?
A group with no matches is hidden. Each separator belongs to the group above it, so it goes away with that group.
Related
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Nested/Hierarchical Groups ComboboxA combobox that lists countries under
- With Footer Actions ComboboxA workspace combobox with a Manage
- Collapsible Groups ComboboxA combobox whose department groups open
- Simple Single Select ComboboxA single-select combobox that opens from
- Groups with Item Counts ComboboxA combobox whose group headings show how