Combobox
Searchable dropdown combobox with keyboard navigation, search filtering, and animated dropdown. Inspired by shadcn/ui.
Installation
$ npx shadcn@latest add comboboxPreview
With Icons
Usage (React/TSX)
import { Combobox } from "@/components/ui/combobox"
const priorities = [
{ value: "low", label: "Low" },
{ value: "medium", label: "Medium" },
{ value: "high", label: "High" },
];
export default function TaskForm() {
const [priority, setPriority] = React.useState("");
return (
<Combobox
items={priorities}
value={priority}
onValueChange={setPriority}
placeholder="Select priority..."
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ComboboxItem[] | — | Array of items with value, label, and optional icon. |
| value | string | — | Currently selected value. |
| onValueChange | (value: string) => void | — | Callback when selection changes. |
| placeholder | string | "Select item..." | Placeholder text when nothing is selected. |
| searchPlaceholder | string | "Search..." | Placeholder for the search input. |
| emptyMessage | string | "No results found." | Message shown when no items match search. |
| width | string | "w-[300px]" | Width of the combobox. |
| className | string | — | Additional CSS classes. |
ComboboxItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique value for the item. |
| label | string | — | Display label for the item. |
| icon | ReactNode | — | Optional icon element. |
Keyboard Navigation
- ↑ ↓ to navigate items
- Enter to select
- Escape to close
- Type to search and filter items