shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Standard
With Item Icons Combobox for React
A combobox with an icon beside each platform, repeated on the button once one is picked.
A platform picker with an icon on every row: a globe for Web, a phone for Mobile and the GitHub mark for GitHub. The chosen platform's icon and name then show on the button. Use it for platform, tool or integration pickers, where an icon is recognized faster than a word.
Preview
Installation
FAQ
Where do the icons live?
Each platform keeps its icon component next to its label and value, and the row renders it before the label at size-4. The GitHub mark is a small SVG component, since the icon set has no brand logos.
How does the button show the same icon?
It renders the selected platform's icon and label side by side, and Select platform... when nothing is picked.
ComboboxValue takes a function that gets the selected platform.
Does the search match the icons?
No, only the labels. Typing git finds GitHub. The search box says Search platform..., and No platform found. shows when nothing matches.
Are the icons announced?
No. They have aria-hidden, since the label next to them already says the same thing.
Related
- Items with Icons and Descriptions ComboboxA combobox of plans, each row with an
- Simple Single Select ComboboxA single-select combobox that opens from
- Items with Avatars ComboboxA combobox of people with an avatar on
- Color-Coded Items ComboboxA combobox with a colored dot beside each
- With Default Selected Value ComboboxA combobox that starts with English
- Disabled State ComboboxA disabled combobox that shows its