components
AutoComplete (design)
AutoCompletes are input fields where a user is suggested several options, based on the input they provide.
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.
Options
Default
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.
Behaviour
When a user clicks into the text input field, they trigger the selection menu, which is a list of possible options. The user can then selects a single option from that list.
When a user selects the text input field and starts typing, they trigger the selection menu which contains a list of suggested options. The options are being filterd 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.
Guidelines
- Include a clear and concise label. An AutoComplete without a label is ambiguous and not accessible.
- Always sort the list of options in a way that makes sense to the user
- alphabetically
- numerically
- most selected options
Related components
Chameleon has a few components that give users the ability to choose from a list of options.
TextField: For an input field without suggested options, use a TextField component.
Select: For a single selection of a list of possible options, use a Select component.
Checkbox: For selecting options that require a button press to apply the setting, use a Checkbox component.
Switch: For turning an option on or off instantly, use a Switch component.
Radio: For selecting a single option from a set of options, use a Radio component.