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.

Your Car Manufacturer

Open in Playroom

Required Selection

Use the required property require a selection.

Here's an example of a required Autocomplete.

Your Car Manufacturer

Open in Playroom

Empty State

Use emptyState property to show when there are no options available.

Select a car

Open in Playroom

Highlight search matches

Use highlightMatches property to highlight found matches in Autocomplete dropdown.

Select a car

Open in Playroom

Show a Loading Indicator

Use the loading property to show a loading indicator.

Select a car

Open in Playroom

API

onQueryChange

Required

Called when the query is changed.

(value: string) => void

onChange

Required

Called when a selection is made.

(value: string | null) => void

options

Required

The options to display.

AutocompleteOption[]

emptyState

Required

The text or element to show when no matches found.

string

name

Required

Name for the field.

string

query

The query.

string

value

The id of the option.

string | null

Show a loading indicator.

true

false

highlightMatches

Highlights the matches if true.

true

false

textAlign

Aligns the text horizontally.

center

end

start

size

Size of the field.

small

regular

disabled

Disables the field.

true

false

data

An object with the data keys and values.

DataAttributeMap

label

Adds a label to the field.

string

ID of the field.

string

placeholder

Placeholder of the text field.

string

prefix

Content to display before the field.

ReactNode

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLInputElement>

onKeyDown

Action to perform when a key is pressed.

KeyboardEventHandler<HTMLInputElement>

required

Indicates the field is required.

true

false

suffix

Content to display after the field.

ReactNode

maxLength

Maximum character length for an field.

number

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

ref

Ref<HTMLInputElement>

key

Key | null