Combobox
A searchable select built on Radix UI Popover and cmdk. The popup opens below the trigger and includes a live search input.
combobox-demo.app
Installation
terminal.sh
npx y2kui@latest add comboboxUsage
import {
Combobox,
ComboboxTrigger,
ComboboxValue,
ComboboxPopup,
ComboboxItem,
} from "@/components/ui/combobox"
<Combobox defaultValue="apple">
<ComboboxTrigger className="w-48">
<ComboboxValue />
</ComboboxTrigger>
<ComboboxPopup>
<ComboboxItem value="apple">Apple</ComboboxItem>
<ComboboxItem value="banana">Banana</ComboboxItem>
<ComboboxItem value="cherry">Cherry</ComboboxItem>
</ComboboxPopup>
</Combobox>Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | Initial selected value. |
value | string | — | Controlled selected value. |
onValueChange | (value: string) => void | — | Called when selection changes. |
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Called when open state changes. |
ComboboxItem | { value: string; disabled?: boolean } | — | Selectable option. |
ComboboxValue | { placeholder?: string } | — | Displays the selected value. |