Autocomplete

Specifications

See Inputs and Lists for additional specifications.

There are two sizes of autocomplete input fields defined:

• Default: default form inputs should have a height of 32px (8px padding) and a font size of 12px (.75rem). Used for most forms.
• Large: larger variant should have a height of 48px (16px padding) and a font size of 14px (.875rem). Used for forms in in-cab applications

Text input field Users input text and they are provided with a list of suggestions to choose from. When the user selects an option, the choice is then displayed in the field.

Selection menu A list of selectable options that can be grouped into sub-categories. Sub-category titles should be written in all caps. The list of options should appear in alphabetical order by default. In some cases it might be best to list in order of importance.

Clear text icon Clears all text from the input field or reverts to the default selection (or previous selection).

Chip (optional) A chip can be used to clear the filled selection instead of the default “X” clear icon but only in the larger (48px) variant. Please use one or the other but never both.

Colors

Behaviors

• In cases where the available options are longer than the dropdown field, the dropdown menu will grow to the width of the longest option. Alternately, the long list item name will truncate at a specified max-width set.
• When the user clicks in the field, then change the field to “focused”, open the drop menu, place a text cursor in the field, and allow the user to lookup or select a value from the dropdown.
• When the user starts typing, swap the chevron icon for the clear option (for easy deletion of the entered search value).
• If the user enters a value that doesn’t exist in the dropdown, notify the user that the value entered returned no results. The message should read: “No results found.” Additionally, if possible display tip, “Check spelling or try a different keyword.”
• If the label is longer than the width of the dropdown menu, then expand the menu to fit the longest option. If the menu has a fixed width then truncate the label when the max width is exceeded.
• When the list exceeds 1,499 options, lazy load the content and provide pagination at the bottom of the list.
• For validation and states follow the Inputs guidelines.

Editorial

• When possible, add helper text below an input field to further clarify selections or validation errors.
• Always mark required fields with an * .
• Provide input constraints, such as a character limit within a text entry box to provide guidelines and improve form efficiency.