Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - With Disabled Items
A React combobox with selectively disabled items using disabled property and opacity-50 styling preventing selection of unavailable options with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some choices aren't available yet—disabled items show what's coming. This React combobox displays items with disabled property using opacity-50 for Premium Coming Soon and Enterprise Contact Sales items preventing selection via onSelect return guard checking service.disabled. Built with shadcn/ui Command and Popover featuring conditional styling with cn utility. The disabled items pattern improves transparency—perfect for tiered plans, prerequisite features, permission-based options, or anywhere some selections require conditions showing users all possibilities while enforcing availability constraints communicating why items unavailable.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Disabled State
Entire combobox disabled
With Validation Feedback
Validation error states
Simple Single Select
All items enabled
Select Disabled Options
Native select disabled
Disabled Button
Button disabled state
With Status Badge
Status indicators
Questions you might have
React Combobox - With Validation Feedback
A React combobox with validation feedback showing border-destructive styling and error message using useEffect to validate selection with shadcn/ui
React Combobox - Read-Only/View Mode
A React combobox in read-only view mode displaying Eye icon with disabled Button showing selected value and explanatory text for non-editable fields with shadcn/ui