Default
With Disabled Items
Java is disabled in this list.
Custom Width
Multi-Select
Select multiple items. Click items to toggle selection.
Disabled
Props
| Prop | Type | Description |
|---|---|---|
| items | IComboboxItem[] | Array of { value, label, disabled? } objects |
| value | string | Controlled selected value |
| onValueChange | (value: string) => void | Change handler for controlled mode |
| placeholder | string | Placeholder text when nothing is selected |
| searchPlaceholder | string | Placeholder for the search input |
| emptyText | string | Text shown when no results match search |
| disabled | boolean | Disable the combobox |
| className | string | Additional classes for the trigger button |
Usage
import { Combobox } from "@/components/ui/Combobox";
const items = [
{ value: "next.js", label: "Next.js" },
{ value: "remix", label: "Remix" },
];
<Combobox
items={items}
placeholder="Select framework..."
onValueChange={(value) => console.log(value)}
/>
<Combobox.Multi
items={items}
placeholder="Select many..."
onValuesChange={(values) => console.log(values)}
/>