AutocompletePlace
The autocompletePlace is an address input enhanced by Mapbox. This component is useful when the user need to enter an address.
View source code- handleSelect
(value: MapboxPlace) => void
Handler that is called when an option is selected.
- renderNoOptions
(value: string, debouncedSearchValue: string) => ReactChild
The content to display when no options are available.
- className
string
className for the element
- country
string
Restricts the search to a specific country.
- 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
- proximityCountry
string
Bias results around a specific country.
- renderInput
(inputProps: HTMLProps<HTMLInputElement>) => ReactNode
Function to render the input.
- renderLoadingOption
({ key }: { key: string | number; }) => ReactNode
Function to render options in a loading state.
- 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.
- showClearSelectionButton
boolean
Whether the combobox should show a clear button.
Default: false - value
string
The current value (controlled).
- variant
"noDropdown" | "withDropdown"
The visual style of the Autocomplete.