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.