Autocomplete

Autocomplete is a component used to display suggestions in response to user text input.

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

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

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

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.	`closeOnSelect={true}`
`Escape`	Closes the listbox.	`closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`AutocompleteField` Internal	`role="combobox"`	Indicates that this is a combobox.
	`aria-haspopup="listbox"`	Indicates that a listbox exists.
	`aria-autocomplete="list"`	Indicates that the component proposes a list of values related to the input value.
	`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 `AutocompleteList` 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.
`AutocompleteList` Internal	`role="listbox"`	Indicates that this is a listbox.
	`id`	The `id` used to associate with `AutocompleteField`.
	`aria-hidden`	Set to `"true"` when the listbox is open, `"false"` when closed.
`AutocompleteOptionGroup`	`role="group"`	Indicates that this is a group.
	`aria-labelledby`	Sets the `id` of the associated `AutocompleteOptionGroupLabel`.
`AutocompleteOptionGroupLabel` Internal	`role="presentation"`	Indicates that this is a presentation.
	`id`	The `id` used to associate with `AutocompleteOptionGroup`.
`AutocompleteOption`	`role="option"`	Indicates that this is an option.
	`id`	The `id` used to associate with `AutocompleteField`.
	`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

PreviousNativeSelect NextMultiAutocomplete