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