shadcn.io is an independent project built on shadcn/ui
The button shows Option 1 in the dimmed disabled style. It does not open, so the value can be read and cannot be changed.
Use it for a field that waits on another choice, or a setting this person cannot edit. Hide it instead with nothing in place of the Combobox. In React, Base UI leaves a disabled combobox closed.
Installation
Anatomy
Usage
<Combobox defaultValue={options[0]} disabled items={options}>
<ComboboxTrigger
render={
<Button className="w-[200px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select option..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search option..." showTrigger={false} />
<ComboboxEmpty>No option found.</ComboboxEmpty>
<ComboboxList>
{(item: Option) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>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.
API Reference
Combobox
Sets defaultValue={options[0]}, disabled, items={options}, placeholder="Select option...", placeholder="Search option..." and showTrigger={false}. The rest is on the Combobox page.
Button
Sets variant="outline". The rest is on the Button page.
