Autocomplete
The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the Combobox and Listbox components with minor UI differences.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Best practices
The autocomplete component should:
- Be clearly labeled so it’s obvious to the merchant what type of options will be available
- Limit the number of options displayed at once
- Not be used within a popover
- Indicate a loading state to the merchant while option data is being populated
Content guidelines
The input field for autocomplete should follow the content guidelines for text fields.
Related components
- For an input field without suggested options, use the text field component
- For a list of selectable options not linked to an input field, use the option list component
- For a text field that triggers a popover, use the combo box component
Accessibility
Structure
The autocomplete component is based on the ARIA 1.2 combobox pattern and the Aria 1.2 Listbox pattern.
The autocomplete list displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the preferredPosition prop.
Autocomplete features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the autocomplete.
Keyboard support
- Give the autocomplete text input keyboard focus with the tab key (or shift + tab when tabbing backwards)
- Access the list of options with the up and down arrow keys
- Select an option that has focus with the enter/return key