The Auto-complete input allows a user to quickly select a single, valid input by dynamically matching text with a list of defined options (e.g. account names, cities, states, etc). It is often preferred over a drop down when there are more than 12 defined options.

Common Characteristics

The auto-complete input combines a text input with icon, with a panel of text matches. Matches dynamically update as the user types. The non-typed portion of matches is displayed in bold text. Only one match can be selected as the input. The selection can be cleared.

The text input can be 40px high (normal) or 32px (small). The width is variable.

For accessibility, the text matches can be navigated and selected with the keyboard.

States and Options

The auto-complete input can have these states: default (empty), disabled, focused, error, or populated. The error state only applies if the input is required but is skipped.

Type to select a U.S. State.

Displaying Matches

The text matches panel can be set to display after one, or two, or three characters are typed in the input. Three characters is the default.

Display a maximum of eight matches on larger break points, five on the XS breakpoint.