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 onChange callback..
Best practices 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. Code examples Default Usage, set the selected item as value of the text input.
function AutocompleteExample ( ) {
const items = [
{ value : 1 , label : 'Ananas' } ,
{ value : 2 , label : 'Apple' } ,
{ value : 3 , label : 'Banana' } ,
{ value : 4 , label : 'Lemon' } ,
{ value : 5 , label : 'Avocado' } ,
] ;
const [ filteredItems , setFilteredItems ] = React . useState ( items ) ;
const [ selectedItem , setSelectedItem ] = React . useState ( ) ;
const handleQueryChange = ( query ) => {
setFilteredItems (
query ? items . filter ( ( item ) => item . label . includes ( query ) ) : items ,
) ;
} ;
const handleOnChange = ( item ) => {
setSelectedItem ( item . label ) ;
} ;
return (
< Autocomplete
items = { filteredItems }
onQueryChange = { handleQueryChange }
width = { 'full' }
placeholder = { 'search' }
emptyListMessage = { 'no result found' }
noMatchesMessage = { 'no matches' }
dropdownProps = { { isFullWidth : true } }
onChange = { handleOnChange }
selectedItem = { selectedItem }
>
{ ( options ) =>
options . map ( ( option ) => < span key = { option . value } > { option . label } </ span > )
}
</ Autocomplete >
) ;
}
Hide source Usage for filling in a list of items.
function AutocompleteExample ( ) {
const items = [
{ value : 1 , label : 'Ananas' } ,
{ value : 2 , label : 'Apple' } ,
{ value : 3 , label : 'Banana' } ,
{ value : 4 , label : 'Lemon' } ,
{ value : 5 , label : 'Avocado' } ,
] ;
const [ filteredItems , setFilteredItems ] = React . useState ( items ) ;
const [ selectedItems , setSelectedItems ] = React . useState ( [ ] ) ;
const handleQueryChange = ( query ) => {
setFilteredItems (
query ? items . filter ( ( item ) => item . label . includes ( query ) ) : items ,
) ;
} ;
const handleOnChange = ( item ) => {
setSelectedItems ( ( tagElements ) => [ ... tagElements , item . label ] ) ;
} ;
return (
< >
< Autocomplete
items = { filteredItems }
onQueryChange = { handleQueryChange }
width = { 'full' }
placeholder = { 'search' }
emptyListMessage = { 'no result found' }
noMatchesMessage = { 'no matches' }
dropdownProps = { { isFullWidth : true } }
onChange = { handleOnChange }
maxHeight = { 100 }
>
{ ( options ) =>
options . map ( ( option ) => (
< span key = { option . value } > { option . label } </ span >
) )
}
</ Autocomplete >
< h3 > Shopping List </ h3 >
< ul >
{ selectedItems . map ( ( item , index ) => (
< li key = { ` element- ${ item } - ${ index } ` } > { item } </ li >
) ) }
</ ul >
</ >
) ;
}
Hide source Example for showing error messages
function AutocompleteExample ( ) {
const items = [
{ value : 1 , label : 'Ananas' } ,
{ value : 2 , label : 'Apple' } ,
{ value : 3 , label : 'Banana' } ,
{ value : 4 , label : 'Lemon' } ,
{ value : 5 , label : 'Avocado' } ,
] ;
const [ filteredItems , setFilteredItems ] = React . useState ( items ) ;
const [ selectedItem , setSelectedItem ] = React . useState ( ) ;
const handleQueryChange = ( query ) => {
setFilteredItems (
query ? items . filter ( ( item ) => item . label . includes ( query ) ) : items ,
) ;
} ;
const handleOnChange = ( item ) => {
setSelectedItem ( item . label ) ;
} ;
return (
< div >
< span > Favorit Fruit * </ span >
< Autocomplete
id = " autocomplete "
items = { filteredItems }
onQueryChange = { handleQueryChange }
width = { 'full' }
placeholder = { 'search' }
emptyListMessage = { 'no result found' }
noMatchesMessage = { 'no matches' }
dropdownProps = { { isFullWidth : true } }
onChange = { handleOnChange }
selectedItem = { selectedItem }
validationMessage = " This item is required "
>
{ ( options ) =>
options . map ( ( option ) => (
< span key = { option . value } > { option . label } </ span >
) )
}
</ Autocomplete >
< p style = { { marginTop : '45px' } } > * Required fields </ p >
</ div >
) ;
}
Hide source Content recommendations 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) Accessibility dismisses the dropdown when selecting with the enter key 
