shadcn.io is an independent project built on shadcn/ui
English is selected from the first render. The button shows English, and the list marks that row. The other languages are still there to search.
Use it for a setting with a sensible default, or to show a value saved earlier. A field that must start empty is a Select with a placeholder. In Vue, Ark UI shows that initial value on the button.
Installation
Anatomy
Usage
<Combobox
:collection="collection"
@input-value-change="handleInputValueChange"
@value-change="handleValueChange"
:positioning="{ getAnchorElement: () => triggerRef }"
selectionBehavior="clear"
:value="value"
>
<ComboboxTrigger
:class='cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between"
)'
ref="triggerRef"
>
{{ selected ? selected.label : "Select language..." }}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search language..." :showTrigger="false" />
<ComboboxEmpty>No language found.</ComboboxEmpty>
<ComboboxList>
<ComboboxItem v-for="item in collection.items" :item="item" :key="item.value">
{{ item.label }}
</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
How is English selected on first render?
The demo holds the value and starts it at ["en"]. The value is an array of item values.
Can it be changed afterwards?
Yes. The default is only the starting point. Picking another language replaces it.
Which languages are in the list?
English, Spanish, French, German and Italian. The search box says Search language..., and No language found. shows when nothing matches.
How is English marked when the list opens?
ComboboxItem shows its check on the selected row, so English has it until another language is picked.
API Reference
Combobox
Sets collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.
