shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
Read-Only/View Mode Combobox for React
A read-only combobox that shows its value with a note that it can't be changed.
A combobox for viewing, not editing. The button shows an eye icon and Option 2, and a line below says This field is read-only and cannot be changed. Use it on detail pages and for people without edit rights, where the value matters but can't be changed here.
Preview
Installation
FAQ
What makes it read-only?
readOnly on Combobox.
The button stays in view but doesn't open a list, so there's nothing to change.
What is on the button?
An EyeIcon at size-4 opacity-50 and Option 2, side by side. The selected value is Option 2.
What is the eye for?
It says view only at a glance. It's hidden from screen readers, so the note below does the explaining.
What is the text under the button?
This field is read-only and cannot be changed, in text-muted-foreground text-xs. Say why if you can, such as Only admins can change this.
How is this different from the disabled state?
A read-only value is still part of the form and reads as information. Disabled says the field doesn't apply right now. See the disabled state.
How do I switch it to edit mode?
Drop the read-only flag and add the search box and list in ComboboxContent, as in Simple Single Select.
Related
- Disabled State ComboboxA disabled combobox that shows its
- With Default Selected Value ComboboxA combobox that starts with English
- With Validation Feedback ComboboxA required currency combobox that shows
- With Disabled Items ComboboxA combobox where plans that aren't
- Empty State with Action ComboboxA combobox that starts with no items and
- Error State with Retry ComboboxA combobox whose list failed to load