shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Favorites + All Items Combobox for React
A combobox with starred favorites above the rest of the tools.
A tool picker that puts favorites first. VS Code and Figma sit under Favorites with a filled star, and Slack, Notion, GitHub and Linear follow under All Tools. Use it where a few options account for most picks and people want them at the top.
Preview
Installation
FAQ
How are the two sections built?
Two ComboboxGroups, Favorites and All Tools, with a ComboboxSeparator between them.
The heading is a ComboboxLabel at the top of each group.
How is the star drawn?
A StarIcon at size-3 with fill-warning text-warning, rendered only in the Favorites rows. It has aria-hidden, since the heading already says Favorites.
Why don't favorites appear twice?
All Tools lists only the tools that aren't favorites. A tool can be in one group at a time, so it has one row and one value.
Does the search cover both groups?
Yes. Typing filters both, and a group with no matches is hidden. No tool found. shows when neither has one.
What does the button show?
Select tool... until a tool is picked, then its label, whichever group it came from.
How would people manage their favorites?
Keep the favorite list in state or user settings and build both groups from it. A star button on each row, as in Items with Action Buttons, can add and remove them.
Related
- Recent vs All Items ComboboxA combobox with recently used projects
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Recent Selections Section ComboboxA combobox with a Recent section of files
- Categories with Separators ComboboxA combobox whose pages are split into
- Simple Single Select ComboboxA single-select combobox that opens from
- Collapsible Groups ComboboxA combobox whose department groups open