Autocomplete

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

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

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

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

Copied!

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

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

Copied!

キーボード操作

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

ARIAロールと属性

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

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

前NativeSelect 次MultiAutocomplete