shadcn.io is an independent project built on shadcn/ui
The button shows an eye icon and Option 2. It does not open a list. Under it, a line says This field is read-only and cannot be changed.
Use it on a detail page, or for someone without edit rights. A field that will unlock later should look disabled, not like a Combobox they can try. In React, Ark UI keeps this value from changing.
Installation
Anatomy
Usage
<div className="flex flex-col gap-2">
<Combobox collection={collection} defaultValue={["Option 2"]} readOnly>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)}
>
<span className="flex items-center gap-2">
<EyeIcon aria-hidden="true" className="size-4 opacity-50" />
Option 2
</span>
</ComboboxTrigger>
</Combobox>
<p className="text-muted-foreground text-xs">
This field is read-only and cannot be changed
</p>
</div>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 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.
API Reference
Combobox
Sets collection={collection}, defaultValue={["Option 2"]}, readOnly, cn, buttonVariants and variant. The rest is on the Combobox page.
