Autocomplete
If you don't need to display a large list of options, use Select.
Autocomplete is an input that suggests options list based on the term typed. This options must be updated with each keystroke. Use it when you need to find an option within a very large volume of information.
Item types
It is currently not possible to customize the style of the Autocomplete options.
Auxiliary text
It allows you to use a main text to describe the option and, if necessary, a supporting text to supplement it.
With icon
Icons add complexity and can impact reading options, so use only when really necessary.
Icons are optional decorative elements that reinforce the meaning of an option and always appear to the left of the main text.
With Tag component
Use the Tag component when you need to highlight an option.
Dividers
Line divider
Use the line-style divider when you need to create a visual separation between options.
Grouper with text
When the intention is to create a grouping of options, use the text divider, in which you can add a name for the group of options.
Clear field
Default
To clear the field, just click on the "x" located to the right of the Autocomplete field. The "x" appears after any value is typed.
Multiple selection
To remove all selections at once, just click on the "x" located to the right of the Autocomplete field. It is also possible to individually remove each selected option by clicking on the "x" of each option.
When the number of selected options is greater than the field size, the tags are rearranged. Multi-selection Autocomplete is the only input component that allows you to change the height.
Without results
When no options are found, by default no message should be displayed. A message can be added and customized if needed.
You can add a new option to the list by changing the state of options being rendered. For more details visit our examples tab.
Loading
When Autocomplete has asynchronous loading, it is possible to add the loading property so that the Spinner appears inside the field.