MultiSelect
Form ControlsStable
Multi-select dropdown displaying selected values as deletable badges. Supports search, clear-all, and custom badge variants.
Quick Import
import { MultiSelect } from "@cohere-ai/waypoint-ui/multi-select";Live Preview
Loading MultiSelect...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string[] | - | Controlled selected values |
onValueChange | function | - | Callback on selection change |
defaultValue | string[] | [] | Default selected values |
placeholder (MultiSelectTrigger) | string | 'Select...' | Placeholder when nothing selected |
grow (MultiSelectTrigger) | boolean | false | Full-width trigger |
value (MultiSelectBadge)* | string | - | Value this badge represents |
badgeVariant (MultiSelectBadge) | Badge variant | 'info' | Badge visual style |
deleteable (MultiSelectBadge) | boolean | true | Shows delete button on badge |
* Required prop
Examples
Basic Multi-Select
Multi-select dropdown for choosing frameworks
1 import { 2 MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectItem, 3 } from '@cohere-ai/waypoint-ui/multi-select'; 4 5 <MultiSelect value={selected} onValueChange={setSelected}> 6 <MultiSelectTrigger placeholder="Select frameworks..." /> 7 <MultiSelectContent> 8 <MultiSelectItem value="react">React</MultiSelectItem> 9 <MultiSelectItem value="vue">Vue</MultiSelectItem> 10 <MultiSelectItem value="angular">Angular</MultiSelectItem> 11 </MultiSelectContent> 12 </MultiSelect>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the MultiSelect 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.