Combobox
Demo
Props
| Prop | Type | Description |
|---|---|---|
options | { value: string; label: string }[] | An array of options for the combobox, each with a value and a label. |
triggerVariant | 'default' | 'secondary' | 'outline' | 'destructive' | 'ghost' | 'link' (optional) | The variant style of the trigger button. |
selectPlaceholder | string (optional) | Placeholder text for the select button when no value is selected. |
searchPlaceholder | string (optional) | Placeholder text for the search input inside the dropdown. |
emptyPlaceholder | string (optional) | Placeholder text to display when the search yields no results. |
defaultValue | string (optional) | The default value of the combobox. |
onSelect | (value: string) => void (optional) | Callback function that triggers when an option is selected. |
classNames | { trigger?: string; content?: string } (optional) | Custom class names for the trigger button and dropdown content. |
Styles
This component allows for custom styles via the classNames prop:
trigger: CSS class for styling the trigger button.content: CSS class for styling the dropdown content.
Functionality
- The combobox combines a button and a dropdown list.
- Users can select an option from the list or use the search input to filter options.
- Supports custom styling and various trigger button variants.
- Features placeholders for different states and an optional default value.