shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Standard
Disabled State Combobox for React
A disabled combobox that shows its current value but can't be opened.
A combobox that's switched off. The button shows Option 1 in the dimmed disabled style and won't open, so the value can be read but not changed. Use it for fields that wait on another choice, or settings someone isn't allowed to edit.
Preview
Installation
FAQ
What disables this combobox?
disabled on Combobox.
The trigger picks it up from the root, so the button needs no prop of its own.
Can someone still open the list?
No. A click or a key press on the disabled button leaves the list closed, and the button is skipped when tabbing.
Why does it still show a value?
The combobox starts with Option 1 selected, and disabling it doesn't clear the value.
defaultValue is the first option.
What would the list contain?
Option 1, Option 2 and Option 3, with a Search option... box and No option found. when a search matches nothing. It's all there for when the combobox is turned back on.
Should I use disabled or read-only?
Disabled says the field doesn't apply right now and is usually left out of a form submission. When the value matters but can't be changed, show it as text instead, as in the read-only view.
Related
- Read-Only/View Mode ComboboxA read-only combobox that shows its value
- With Default Selected Value ComboboxA combobox that starts with English
- Simple Single Select ComboboxA single-select combobox that opens from
- With Disabled Items ComboboxA combobox where plans that aren't
- Full Width Variant ComboboxA combobox whose button and list stretch
- Large Size Variant ComboboxA large combobox with a taller button and