Autocomplete

The autocomplete is a text input enhanced by a list of suggested options. This component is useful when the user has to choose a single option from a predefined list.

This component shouldn't be used in the following scenarios:

The input may contain multiple options. Please refer to the AutocompleteMultiple component
The input must be an address. Please refer to the AutocompletePlace component

View source code

onAddOption
```
(newOptionLabel: string) => T | Promise<T>
```
Handler that is called when an option has been added.
onSearch
```
(search: string) => void
```
Handler that is called when the input changes.
onSelect
```
(option: T) => void
```
Handler that is called when a option is selected.
options
```
(T | ComboboxOptionGroup<T>)[]
```
The list of ComboBox options.
value
```
Option
```
The current value.
className
```
string
```
className for the element
dropdownMenuContentMaxHeight
```
string
```
Maximum height of the dropdown menu.
fit
```
"content" | "parent"
```
Whether the Combobox should fit its parents or content.
Default: content
inputVariant
```
"default" | "magicGradient"
```
The visual style of the Combobox
isAutocompletePlace
```
boolean
```
Internal props, do not use.
Default: false
isDisabled
```
boolean
```
Whether the Combobox is disabled.
isInputVisible
```
boolean
```
Whether the input should be displayed.
isInvalid
```
boolean
```
Whether the Combobox is invalid.
isLoading
```
boolean
```
Whether the Combobox is loading.
name
```
string
```
The name of the Combobox, used when submitting an HTML form.
onBlur
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element loses focus.
onFocus
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element receives focus.
placeholder
```
string
```
Temporary text that occupies the Combobox when it is empty.

placement

"bottom-end" | "bottom-start" | "end-bottom" | "end-top" | "top-end" | "top-start"

Placement the menu will render relative to the field

renderAddOption
```
(rawValue: string) => ReactNode
```
Function to render the add option item. It should always return a DropdownItem component.

renderInput

(inputProps: HTMLProps<HTMLInputElement>) => ReactNode

Function to render the input.

renderLoadingOption
```
({ key }: { key: string | number; }) => ReactNode
```
Function to render options in a loading state.
renderNoOptions
```
(rawValue: string) => ReactNode
```
Function to render when no options are available

renderOption

(option: T, state?: { isSelected: boolean; }) => ReactNode

Function to render option.

renderOptionGroup

((optionGroup: ComboboxOptionGroup<T>) => ReactNode) & ((optionGroup: ComboboxOptionGroup<T>) => ReactNode)

Function to render option group.

renderPrefix
```
(option: T) => ReactNode
```
Function to render the selected options. Act like a leftAddon for the underneath input.
renderSearchBar
```
(args: { getInputProps: () => GetInputPropsReturnValue; }) => ReactNode
```
Function to render the search bar inside the dropdown header. Provides Downshift's getInputProps so the header input supports keyboard navigation (arrow keys, enter, etc.).
showClearSelectionButton
```
boolean
```
Whether the combobox should show a clear button.
Default: false
variant
```
"noDropdown" | "withDropdown"
```
The visual style of the Autocomplete.