Auto Complete

Autocomplete is a component that allows you to search and select a value from a list of options. It is a combination of a text input and a dropdown menu.

#

Default

value:

#

Disabled

Autocomplete supports disabled states

Disabled:

#

Placeholder

Autocomplete can have placeholders.

value:

#

Sizes

You may also choose from small and large custom selects to match our similarly sized text inputs.

Selected value: undefined

#

Complex Items

You can have complex objects as item and you need to use itemKey and itemValue props to extract the data that Autocomplete needs

value: {"id":"third","value":"Third Item"}

#

States

You can set the valid or invalid boolean properties to apply the valid or invalid state to a Autocomplete.

#

Custom Key

You can choose a key to increase performance.

value: {"id":"third","value":"Third Item"}