# Autocomplete

Source: https://design.ritchiebros.com/components/inputs/autocomplete/

Autocomplete is an input field that provides selectable suggestions as a person types. It lets people quickly search through and select from large collections of options.

## Figma

The Figma reference for **Autocomplete** will appear here once the design link is added.

## Storybook

Interactive examples for **Autocomplete** will render here once the Storybook link is wired in.

## Best practices

- Be clearly labeled so it’s obvious what type of options will be available.
- Limit the number of options displayed at once.
- Indicate a loading state while option data is being populated.
- Follow the same content guidelines as text fields for the input itself.

## Do’s and don’ts

**Do:** Use autocomplete as a progressive enhancement that makes the interface easier to use for most people.

**Don’t:** Require people to make a selection from the autocomplete to complete a task.

## Accessibility

- Based on the ARIA combobox and listbox patterns; the suggestion list appears below the input by default so it’s easy to discover.
- The text input is reachable with Tab; options are navigated with the up/down arrow keys and chosen with Enter.
- Never make autocomplete the only way to search or enter data — some assistive technologies struggle with it.

## Related components

- [TextField](https://design.ritchiebros.com/components/inputs/text-field/)
- [Select](https://design.ritchiebros.com/components/inputs/select/)