MultiSelect

Select for choosing several options, such as roles: the listbox stays open while options are checked, and the trigger lists what is chosen. The same field as Select otherwise, down to its select and select-trigger names, so a brand sizing selects sizes this one too. Compose options with SelectItem.

import { MultiSelect } from "@evolve-storefront/ui/multi-select";

Preview

DefaultOpen in Storybook ↗

Usage

Choosing two keeps the list open and hands both over.

<MultiSelect name="approvers" label={t("approvers")} value={roleKeys} onValueChange={setRoleKeys}>
  {roles.map((role) => (
    <SelectItem key={role.id} id={role.id}>
      {role.name}
    </SelectItem>
  ))}
</MultiSelect>;

Props

Prop	Type	Description
`data-component?`	`undefined`	Not a caller's to rename — see `controlProps`.
`name?`	`string`
`value?`	`readonly string[]`
`defaultValue?`	`readonly string[]`
`onValueChange?`	`((value: string[]) => void)`	Hands over every chosen value, in the order of the options.
`disabled?`	`boolean`
`required?`	`boolean`
`invalid?`	`boolean`
`children?`	`ReactNode`	The options: `SelectItem`s from `@evolve-storefront/ui/select`.
`label?`	`ReactNode`	Visible label, rendered inside so the listbox and trigger are named by it.
`description?`	`ReactNode`
`placeholder?`	`string`
`placement?`	`SelectPlacement`

Any other props go to the root element, like on a plain HTML element.