Combobox
Autocomplete input and command palette with a list of suggestions. Built using a composition of Popover and Command components.
Basic Combobox
A simple combobox for selecting a framework.
With Disabled Options
Some options can be disabled.
Java is disabled
With Custom Labels
Labels can include emojis or any custom content.
Multi-Select Combobox
Select multiple options from the list.
Multi-Select with Max Display
Limit the number of displayed selections.
Shows "X selected" when more than 2 items are selected
Installation
The Combobox is built using a composition of the Popover and Command components.
npx brutx@latest add combobox popover command
Props
Combobox
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ComboboxOption[] | required | Array of options to display |
| value | string | - | Selected value |
| onValueChange | (value: string) => void | - | Callback when value changes |
| placeholder | string | "Select option..." | Placeholder text |
| searchPlaceholder | string | "Search..." | Search input placeholder |
| emptyText | string | "No results found." | Text when no results |
| disabled | boolean | false | Disable the combobox |
ComboboxMulti
Same props as Combobox, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | [] | Array of selected values |
| onValueChange | (value: string[]) => void | - | Callback when values change |
| maxDisplay | number | 3 | Max items to show before "X selected" |
ComboboxOption
| Property | Type | Description |
|---|---|---|
| value | string | Unique value for the option |
| label | string | Display label |
| disabled | boolean | Whether the option is disabled |