Homecomponentsinput
Autocomplete
A text field that allows searching from a large collection of options.
Overview
Create a text input that aids in filtering and selecting from a list of options.
It also supports all features of the TextField
.
Here's an example of a simple Autocomplete
.
Required Selection
Use the required
property require a selection.
Here's an example of a required Autocomplete.
Empty State
Use emptyState
property to show when there are no options available.
Highlight search matches
Use highlightMatches
property to highlight found matches in Autocomplete
dropdown.
Show a Loading Indicator
Use the loading
property to show a loading indicator.
API
onQueryChange
Required
(value: string) => void
onChange
Required
(value: string | null) => void
options
Required
AutocompleteOption[]
emptyState
Required
string
name
Required
string
query
string
value
string | null
loading
true
false
highlightMatches
true
false
textAlign
center
end
start
size
small
regular
disabled
true
false
data
DataAttributeMap
label
string
id
string
placeholder
string
prefix
ReactNode
onBlur
FocusEventHandler<HTMLInputElement>
onKeyDown
KeyboardEventHandler<HTMLInputElement>
required
true
false
suffix
ReactNode
maxLength
number
tip
string
secondaryLabel
ReactNode
description
string
errorMessage
string
ref
Ref<HTMLInputElement>
key
Key | null