Combobox
Form ControlsStable
Searchable dropdown with fuzzy filtering. Selecting the same value clears the selection. Portals content for proper z-index stacking.
Quick Import
import { Combobox } from "@cohere-ai/waypoint-ui/combobox";Live Preview
Loading Combobox...
Props
| Name | Type | Default | Description |
|---|---|---|---|
id* | string | - | Accessibility ID |
options* | ComboboxOption[] | - | List of options { value, label } |
value | string | - | Controlled selected value |
onValueChange | function | - | Callback on selection change |
placeholder | string | 'Select option...' | Trigger placeholder text |
searchPlaceholder | string | 'Search...' | Search input placeholder |
emptyMessage | string | 'No options found.' | Message when no results match |
disabled | boolean | false | Disables the combobox |
required | boolean | false | Marks as required |
debounceMs | number | 0 | Debounce delay for search |
* Required prop
Examples
Basic Combobox
Searchable framework selector
1 import { Combobox } from '@cohere-ai/waypoint-ui/combobox'; 2 3 const options = [ 4 { value: 'react', label: 'React' }, 5 { value: 'vue', label: 'Vue' }, 6 { value: 'angular', label: 'Angular' }, 7 ]; 8 9 <Combobox 10 id="framework" 11 options={options} 12 placeholder="Select framework..." 13 value={value} 14 onValueChange={setValue} 15 />
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Combobox component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.