opinion
MultiSelect
Pick several, see them all.
Share withCheckboxes in a closed menu
Share with
2 selected
Choose at least one.
In context
Share a projectWho can see it, and what they can do
Share “Harbour rebrand”
People
3 people can comment. Only you can edit.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
options | MultiSelectOption[] | Yes | — |
values | string[] | undefined | No | — |
defaultValues | string[] | undefined | No | — |
onValuesChange | ((values: string[]) => void) | undefined | No | — |
placeholder | string | undefined | No | Select… |
disabled | boolean | undefined | No | — |
invalid | boolean | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
Built on Radix DropdownMenu with CheckboxItems: each option is a real role="menuitemcheckbox" with aria-checked; the trigger is a <button> with aria-haspopup and aria-expanded. Picking keeps the menu open, so several picks need one open.
data-rebar-* attributes
data-rebar-component="multi-select" on the trigger; data-rebar-part is "value" (the summary text), "content" (the popup) or "item" (per option).
Migrating to Ant Design
AntD has no closed-menu multi-select: its Select mode="multiple" is the searchable-with-chips shape that Combobox multiple covers. A Checkbox.Group inside a Dropdown is the closer match.