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 Svelte, Ark UI keeps this value from changing.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2"><Combobox collection={collection} defaultValue={["Option 2"]} readOnly><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, cn, buttonVariants and variant. The rest is on the Combobox page.
