Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Disabled State
A disabled React combobox with non-interactive trigger using disabled prop preventing user selection while showing current value with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes choices are locked—disabled shows read-only state. This React combobox sets disabled prop on trigger Button preventing interaction while displaying selected value (Option 1). Built with shadcn/ui Command and Popover featuring visual disabled styling with reduced opacity. The disabled state pattern communicates unavailability—perfect for conditional fields, locked settings, read-only views, or anywhere selections depend on prerequisites showing user what would be selected without allowing changes until conditions met.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With Default Selected Value
Pre-selected enabled state
With Disabled Items
Selectively disabled options
Simple Single Select
Enabled combobox
Disabled Button
Disabled button state
Disabled Select
Native select disabled
Full Width Variant
Width variant
Questions you might have
React Combobox - Large Size Variant
A large React combobox variant with h-12 trigger, text-base typography, and size-5 icons for prominent display and improved touch accessibility with shadcn/ui
React Combobox - Full Width Variant
A responsive full-width React combobox using w-full className on trigger and popover adapting to parent container width with shadcn/ui