Auto Complete

AutoComplete control of input field.


Basic usage, add auto-complete list for all inputs.


Disable all.

Only allow selected

You can only change the value of the input by select.


Update the contents of drop-down list based on input.

Waiting in search

Show friendly tips and UI when searching.

custom searching text

You can replace the default waiting text with any components.

custom no options

You can also customize the prompt with no options.

custom option

You can rewrite each item of the AutoComplete to express more.


Components of different sizes.


Add a clear button in the input box.


Add an entry to be selected for any value.

APIs / Schnittstellendokumentation


AttributeDescriptionTypeAccepted valuesDefault
optionsoptions of inputAutoCompleteOptions--
statusinput typeNormalTypes'default', 'secondary', 'success', 'warning', 'error'default
sizeinput sizeNormalSizes'mini', 'small', 'medium', 'large'medium
initialValueinitial valuestring--
valuecurrent valuestring--
widthcontainer widthstring--
clearableshow clear iconboolean-false
searchingshow loading icon for searchboolean-false
onChangevalue of input is changed(value: string) => void--
onSearchcalled when searching items(value: string) => void--
onSelectcalled when a option is selected(value: string) => void--
dropdownClassNameclassName of dropdown boxstring--
dropdownStylestyle of dropdown boxobject--
disableMatchWidthdisable Option from follow parent widthboolean-false
disableFreeSoloonly values can be changed through Selectboolean-false
...native propsInputHTMLAttributes'id', 'className', ...-

AutoComplete.Item[alias: AutoComplete.Option]

AttributeDescriptionTypeAccepted valuesDefault
valuea unique ident valuestring--
...native propsHTMLAttributes'id', 'className', ...-


AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-


AttributeDescriptionTypeAccepted valuesDefault
hiddenhide empty boxboolean-false
...native propsHTMLAttributes'id', 'className', ...-

type AutoCompleteOptions

  label: string
  value: string
} | AutoComplete.Item>