shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
No Results Variation Combobox for React
A combobox with an illustrated message when a search finds no fruit.
A friendlier dead end. When a search matches none of the fruits, the popup shows a search icon, No results, and Try a different search term instead of a single line. Use it in pickers where people often type something that isn't there, to say what to do next.
Preview
Installation
FAQ
What does the no-results block show?
A SearchIcon at size-8 in text-muted-foreground, No results in font-medium, and Try a different search term in muted text-xs, centered in a column.
When does it show?
Only when the search leaves nothing to show.
It's the content of ComboboxEmpty, which renders only then.
Which fruits are listed?
Apple, Banana, Cherry, Date and Elderberry. The search box says Search fruits....
How do I pick a fruit?
Type to narrow the list, then click a fruit or move to it with the arrow keys and press Enter. The button then shows it in place of Select fruit....
Can the message offer an action?
Yes, any content fits. Add a button that clears the search or creates the missing item, as in Empty State with Action.
Related
- Empty State with Action ComboboxA combobox that starts with no items and
- Simple Single Select ComboboxA single-select combobox that opens from
- Async/Dynamic Search ComboboxA combobox that fetches its options as
- Loading State ComboboxA combobox that shows skeleton rows while
- Error State with Retry ComboboxA combobox whose list failed to load
- Read-Only/View Mode ComboboxA read-only combobox that shows its value