The Autocomplete component is typically used for search components. It consists of a text input for writing a query, and properties for rendering suggestions.


border?: boolean
filterOption?: (query: string, option: Option) => boolean
fontSize?: number | number[]
icon?: React.ComponentType | React.ReactNode
id: string
loading?: boolean
onChange?: (value: string) => void
onQueryChange?: (query: string | null) => void
onSelect?: (value: string) => void
options: {value: string}[]
The options to render.
padding?: number | number[]
prefix?: React.ReactNode
radius?: number | number[]
renderOption: (option: {value: string}) => React.ReactNode
The callback function for rendering each option.
renderValue?: (value: string, option?: Option) => string
suffix?: React.ReactNode
value?: string
The current value.

Example with custom rendering  

Updated Sep 22, 2021 @ 07:33

Made withby folks at