Skip to main content

AutoComplete

AutoCompletes are input fields where a user is suggested several options, based on the input they provide.

OverviewReactSwiftKotlin

Usage​

  • Use an AutoComplete when you want to suggest related options that can be selected as a user types into it. It makes searching and selecting from a large collection of options easier.
  • A default AutoComplete should always be paired with a clear label. It should indicate what sort of input the field requires in a short an concise way.
  • An optionalLabel can be used to indicate that the field is optional. This property also removes the required attribute from the input.
  • When a user selects the input field and starts typing, they trigger the selection menu which contains a list of suggested options. The options are being filtered based on every change made by the user, either by keyboard or mouse.
  • A clear all "x" appears on user input and clears everything in the input field.

Required vs optional​

Rather than using an asterisk (*) to indicate required form inputs, Chameleon treats all form elements as required by default and displays an optionalLabel for fields that are optional.

Do’s & Don’ts​

Sort the list of options in a way that makes sense to the user. Numerically, alphabetically, most selected, ...