Autocomplete

Sizes

Autocomplete fields come in four different sizes (heights), which align to the regular text inputs within the Design system. Ensure when you are designing forms that you alway use the same size across element types.

Error state

All form elements have associated error states, see Error messages in our content guidelines for more.

User experience

Using an Autocomplete field can streamline and accelerate the process of inputting information. As the user starts typing, a filtered list of options appears, based on the characters they have entered. It can be very useful in scenarios where the list of possible options is very long, and the user already knows the answer they are looking for. When used correctly, this component helps make selections more efficiently, reduces typos and generally improves the user experience. 

We suggest using the word Search somewhere in the hint text label, this, along with the Search icon, this sets the expectation of search-oriented functionality rather than a simple text input.

Visual design

As with most components in the GUI the Autocomplete is designed to be simple, unobtrusive and accessible. The addition of the Search icon, provides the affordance to the user that there is a search functionality as opposed to a straight input.

Dos and don'ts

• Do use the Autocomplete field in scenarios where the user will already know the option they need to search for and select, e.g., their address or a country, etc.  
• Avoid using Autocomplete if the user needs to see the entire list of options before they can select, e.g., a list of Product specific options. 

Where is this available?