The autocomplete component is an input field that provides selectable suggestions as a user types into it. It allows users to quickly search through and select from large collections of options.
Keep in mind that this component is still in alpha state, which means it's unsupported and subject to breaking changes without warning.
Table of contents
How to use autocomplete
Autocomplete expects two callback Functions.
handleQueryChange called while a user types. This function should take care of filtering and refetching your items.
onChange called when a user selects one of the Options.
You can use Autocomplete either for a single or a multi selection,
by either saving all selected items in an array of items or forwarding only the last selected Item in the
- Autocomplete should have a clear label so user understands what type of action is possible
- Consider using autocomplete over selects if user will be will be choosing from a very long list, like for example country list.
Default Usage, set the selected item as value of the text input.
Usage for filling in a list of items.
Example for showing error messages
- Autocomplete label should be short, contain 1 to 3 words
- Label should be written in a sentence case (the first word capitalized, the rest lowercase)
- dismisses the dropdown when selecting with the enter key