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 Vue, Ark UI keeps this value from changing.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2">
<Combobox :collection="collection" :defaultValue='["Option 2"]' :readOnly="true">
<ComboboxTrigger :class='cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)'>
<span class="flex items-center gap-2">
<EyeIcon aria-hidden="true" class="size-4 opacity-50" />Option 2
</span>
</ComboboxTrigger>
</Combobox>
<p class="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 and class. The rest is on the Combobox page.
