Select

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

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

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

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

Copied!

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

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

Copied!

キーボード操作

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

ARIAロールと属性

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

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

前Toggle 次MultiSelect