Skip to main content

Autocomplete

Component
Live

The Autocomplete component provides a user with pre-loaded suggestions as they type.

FigmaCode

Usage​

An Autocomplete presents a dropdown list of relevant, pre-defined options as the user types into the input field. It removes excess scrolling when the user is aware of the selection they require.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import {
  AutocompleteContainer,
  Autocomplete,
} from "@iag/chroma-react-ui.components";

When to use​

Use Autocomplete when the number of options is larger than a comfortable scroll amount. It is beneficial in cases where a user knows the answer and does not require browsing, or may not know the exact format. For example, when selecting a country or vehicle make.

When to avoid​

Avoid using Autocomplete when the number of options can be quickly viewed and assessed without scrolling. Also avoid when users are not aware of the answer they required, consider the Select component.

Do

  • List results in alphabetical order to assist users scanning the presented options.
  • Do use Autocomplete if the user already knows what result they're looking for (e.g. address, vehicle make).
  • Do provide help text for additional context or prompts.
  • Do use informative error messages for easier correction.