shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
With Disabled Items Combobox for React
A combobox where plans that aren't available yet are shown but can't be picked.
A service picker where two plans are listed but locked: Premium (Coming Soon) and Enterprise (Contact Sales). They're dimmed, skipped by the arrow keys and ignore clicks, while Basic and Standard work as usual. Use it to show what exists without letting people choose what they can't have yet.
Preview
Installation
FAQ
Which items are disabled?
Premium (Coming Soon) and Enterprise (Contact Sales). Each service has a disabled flag in the data.
Where does the dimmed look come from?
ComboboxItem styles its disabled state with opacity-50 and turns off pointer events, so the demo adds no classes.
Are disabled rows still found by search?
Yes. Typing prem shows Premium (Coming Soon), still disabled, so people learn it exists.
How do I say why an item is off?
Put the reason in the label, as this demo does, or add a short description under it as in Items with Descriptions.
Related
- Disabled State ComboboxA disabled combobox that shows its
- Items with Status Indicators ComboboxA combobox of tasks with a status badge
- With Validation Feedback ComboboxA required currency combobox that shows
- Simple Single Select ComboboxA single-select combobox that opens from
- With Max Selections Limit ComboboxA multi-select combobox that stops at
- Empty State with Action ComboboxA combobox that starts with no items and