shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Color-Coded Items Combobox for React
A combobox with a colored dot beside each label, shown on the button once one is picked.
An issue-label picker where every label has its own color: Bug, Feature, Improvement, Documentation and Question. The dot sits before the name in the list and on the button after a pick. Use it for labels, tags and categories that people already know by color.
Preview
Installation
FAQ
How is the dot drawn?
A span with size-3 rounded-full and the label's background class. It's aria-hidden, since the name next to it says the same thing.
Which colors does it use?
Theme colors, so they follow light and dark mode: bg-destructive for Bug, bg-info for Feature, bg-success for Improvement, bg-primary for Documentation and bg-warning for Question.
How does the button show the dot?
It renders the picked label's dot and name side by side, and Select label... before a pick.
ComboboxValue takes a function that gets the picked label.
What does the search match?
The label names. The search box says Search labels..., and No label found. shows when nothing matches.
Related
- Items with Status Indicators ComboboxA combobox of tasks with a status badge
- Items with Icons and Descriptions ComboboxA combobox of plans, each row with an
- Badge with Text (Destructive)A destructive badge for an error, a
- Items with Descriptions ComboboxA combobox of integrations with a
- Simple Single Select ComboboxA single-select combobox that opens from
- Multiple Items with Badges ComboboxA multi-select combobox that shows each