Address Autocomplete

A component that provides an autocomplete functionality for addresses using the Google Maps API.

This component is build on top of the Autocomplete component.

Address

Anatomy

vue

<script setup lang="ts">
import {
  VcAutocomplete,
  VcSelectItem,
} from '@wisemen/vue-core-components'
</script>

<template>
  <VcAutocomplete>
    <template #item>
      <VcSelectItem />
    </template>
  </VcAutocomplete>
</template>

Props

Prop

Description

Default

classConfig

The class configuration for the component. This allows customizating the default styles by overriding them with custom values.

-

clearSearchTermOnSelect

Whether to clear the search term when an item is selected.

-

debounceTimeoutInMs

The debounce timeout in milliseconds.

-

errorMessage

The error associated with the input.

-

hint

The hint text of the input.

-

iconLeft

Icon displayed on the left side of the input field. If null, no icon is displayed.

-

iconRight

Icon displayed on the right side of the input field.

-

The id of the element. If set to null, no ID will be applied.

-

isDisabled

Determines whether the element is disabled. When true, the element becomes non-interactive.

-

isDropdownHidden

Controls the visibility of the dropdown. When set to true, the dropdown remains hidden.

-

isLoading

Whether the select input should display a loading state. This is useful when data is being fetched asynchronously.

-

isPopoverArrowVisible

Controls the visibility of the popper arrow.

-

isRequired

Whether the input is required.

-

isSearchTermControlled

Determines whether the search term is controlled externally. If true, the search term will only be updated when explicitly controlled via props. If false, the search term is managed internally.

-

isTouched

Whether the input is touched. Used to determine if an error should be shown.

-

label

The label of the input.

-

placeholder

Placeholder text for the select input when no value is selected.

-

popoverAlign

Defines how the popper content is aligned relative to the trigger element.

-

popoverAlignOffset

An offset in pixels from the start or end alignment options.

-

popoverAnchorReferenceElement

The HTML element that serves as the anchor point for the popover. If set to null, the popover will be anchored to the trigger element.

-

popoverCollisionPadding

Specifies the padding (in pixels) used when handling collision detection. A larger value increases the spacing between the popper and the container edges.

-

popoverContainerElement

The HTML element in which the popper content should be rendered. By default, the popper content is rendered inside the viewport.

-

popoverSide

Defines which side the content should appear on.

-

popoverSideOffset

The distance in pixels between the popper content and the trigger element.

-

popoverWidth

Determines the width of the popper content.

anchor-width: Matches the width of the trigger element.
available-width: Expands to fit the available space.
null: Uses the natural width of the content.

-

remainOpenOnSelect

Determines whether the dropdown should remain open when the selected value changes.

If true, the dropdown remains open after selecting an option.
If false, the dropdown closes when an option is selected.
If null, defaults to true if the select allows multiple selections, otherwise false.

-

searchInputPlaceholder

Placeholder text for the search input.

-

testId

A unique identifier used for testing purposes. If set to null, no test ID will be applied.

-

variant

Defines the visual style of the select component.

-

Default styles

Slot

Classes

base

overflow-hidden flex items-center size-full

baseMultiple

px-sm group-data-icon-left/select:pl-2 group-data-icon-right/select:pr-2 flex items-center gap-xs size-full

baseSingle

text-sm text-primary group-data-disabled/select:text-disabled px-3 group-data-icon-left/select:pl-2 group-data-icon-right/select:pr-2 w-full flex items-center

content

outline-none min-w-(--reka-popover-trigger-width) overflow-auto p-xs max-h-80

empty

text-tertiary text-sm p-sm

group

-

groupLabel

text-tertiary text-sm font-medium py-xs

iconLeft

shrink-0 size-4.5 ml-3 text-quaternary group-data-disabled/select:text-fg-disabled

iconRight

shrink-0 size-4.5 mr-3 text-quaternary group-data-disabled/select:text-fg-disabled

inlineSearchInput

outline-none z-10 size-full text-sm text-primary bg-transparent px-3 group-data-icon-left/select:pl-2 group-data-icon-right/select:pr-2 disabled:cursor-not-allowed

item

outline-none w-full cursor-pointer data-disabled:cursor-not-allowed rounded-sm p-md not-last:mb-xxs flex items-center justify-between gap-x-md text-sm data-[state=checked]:font-medium text-secondary data-disabled:text-disabled data-[state=checked]:bg-secondary not-data-disabled:data-highlighted:bg-secondary-hover not-data-disabled:hover:bg-secondary-hover not-data-disabled:data-highlighted:data-[state=checked]:brightness-98

itemIndicator

size-4 text-secondary

loader

pointer-events-none shrink-0 mr-3 size-4 text-quaternary

placeholder

text-placeholder text-sm

root

relative group/select overflow-hidden flex items-center h-10 border border-solid border-primary focus-within:border-brand-500 data-disabled:border-disabled-subtle data-invalid:border-error data-invalid:focus-within:border-error bg-primary data-disabled:bg-disabled-subtle rounded-md shadow-xs outline outline-transparent focus-within:outline-brand-500 focus-within:data-invalid:outline-error-500 duration-200 data-disabled:cursor-not-allowed

searchInput

-

separator

h-px bg-quaternary my-xs

Address Autocomplete ​

Anatomy ​

Props

Default styles

Address Autocomplete

Anatomy