MultiSelect

MultiSelect is a component used for allowing users to select multiple values from a list of options.

The MultiSelect follows the WAI-ARIA - Combobox Pattern for accessibility.

If you are not using FormControl, set aria-label or aria-labelledby to MultiSelect.

<MultiSelect placeholder="キャラクターを選択" aria-label="キャラクター">
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    キャラクター
  </Heading>

  <MultiSelect placeholder="キャラクターを選択" aria-labelledby="label">
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
</VStack>

Copied!

Key	Description	State
`ArrowUp`	Focuses the previous non-disabled item. If on the first item, focuses the last non-disabled item.	-
`ArrowDown`	Focuses the next non-disabled item. If on the last item, focuses the first non-disabled item.	-
`Home`	Focuses the first non-disabled item.	-
`End`	Focuses the last non-disabled item.	-
`Space`, `Enter`	Selects the focused item and closes the listbox.	-
`Escape`	Closes the listbox.	`closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`MultiSelectField` Internal	`role="combobox"`	Indicates that this is a combobox.
	`aria-haspopup="listbox"`	Indicates that a listbox exists.
	`aria-activedescendant`	Set to the `id` of the focused item.
	`aria-expanded`	Set to `"true"` when the listbox is open, `"false"` when closed.
	`aria-controls`	Set to the `id` of the related `MultiSelectList` when open, `undefined` when closed.
	`aria-readonly`	Set to `"true"` when `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.
	`aria-invalid`	Set to `"true"` when `isInvalid` is set.
	`aria-required`	Set to `"true"` when `isRequired` is set.
`SelectClearIcon` Internal	`role="button"`	Indicates that this is a button.
	`aria-label`	`"Clear value"` is set.
`MultiSelectList` Internal	`role="listbox"`	Indicates that this is a listbox.
	`id`	The `id` used to associate with `MultiSelectField`.
	`aria-multiselectable`	Indicates that multiple selection is possible.
	`aria-hidden`	Set to `"true"` when the listbox is open, `"false"` when closed.
`OptionGroup`	`role="group"`	Indicates that this is a group.
	`aria-labelledby`	Sets the `id` of the associated `OptionGroupLabel`.
`OptionGroupLabel` Internal	`role="presentation"`	Indicates that this is a presentation.
	`id`	The `id` used to associate with `OptionGroup`.
`Option`	`role="option"`	Indicates that this is an option.
	`id`	The `id` used to associate with `MultiSelectField`.
	`aria-selected`	Set to `"true"` when the option is selected, `"false"` when not selected.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.

Edit this page on GitHub

PreviousSelect NextNativeSelect