MultiSelect

MultiSelectは、ユーザーがオプションのリストから複数の値を選択するために使用されるコンポーネントです。

MultiSelectは、アクセシビリティに関してWAI-ARIA - Combobox Patternに従います。

FormControlを使用しない場合は、MultiSelectにaria-labelまたはaria-labelledbyを設定します。

<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!

キーボード操作

キー	説明	状態
`ArrowUp`	無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。	-
`ArrowDown`	無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。	-
`Home`	無効ではない最初の項目をフォーカスします。	-
`End`	無効ではない最後の項目をフォーカスします。	-
`Space`, `Enter`	フォーカスされている項目を選択し、リストボックスを閉じます。	-
`Escape`	リストボックスを閉じます。	`closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`MultiSelectField` 内部	`role="combobox"`	コンボボックスであることを示します。
	`aria-haspopup="listbox"`	リストボックスが存在することを示します。
	`aria-activedescendant`	フォーカスされた項目の`id`を設定します。
	`aria-expanded`	リストボックスが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	リストボックスが開いている場合は関連した`MultiSelectList`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-readonly`	`isReadOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`isDisabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`isInvalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`isRequired`が設定されている場合は`"true"`を設定します。
`SelectClearIcon` 内部	`role="button"`	ボタンであることを示します。
	`aria-label`	`"Clear value"`を設定します。
`MultiSelectList` 内部	`role="listbox"`	リストボックスであることを示します。
	`id`	`MultiSelectField`と関連付けるために使用する`id`。
	`aria-multiselectable`	複数選択可能であることを示します。
	`aria-hidden`	リストボックスが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
`OptionGroup`	`role="group"`	グループであることを示します。
	`aria-labelledby`	関連した`OptionGroupLabel`の`id`を設定します。
`OptionGroupLabel` 内部	`role="presentation"`	プレゼンテーションであることを示します。
	`id`	`OptionGroup`と関連付けるために使用する`id`。
`Option`	`role="option"`	オプションであることを示します。
	`id`	`MultiSelectField`と関連付けるために使用する`id`。
	`aria-selected`	オプションが選択されている場合は`"true"`を設定し、選択されていない場合は`"false"`を設定します。
	`aria-disabled`	`isDisabled`が設定されている場合は`"true"`を設定します。

GitHubでこのページを編集する

前Select 次NativeSelect