The Places (New) Autocomplete Svelte component offers a range of properties for customising its behavior, appearance, and data handling. This page provides a detailed overview of each property.
Configure the behavior and appearance of the Places Autocomplete component using the following properties:
PUBLIC_GOOGLE_MAPS_API_KEY *Type: string
Your Google Maps API Key with Places API enabled.
onResponse *Type: (response: PlaceResult) => void
Callback function triggered with the selected place details (PlaceResult object) after fetchFields is complete.
onError *Type: (error: string) => void
Callback function triggered when an error occurs (API loading, fetching suggestions, fetching details).
requestParams Type: Partial<RequestParams> | Default: { inputOffset: 3, ... }
Parameters for the Autocomplete request. See AutocompletionRequest options.
fetchFields Type: string[] | Default: ['formattedAddress', 'addressComponents']
Array of Place Data Fields to request when a place is selected. Affects API cost.
options Type: Partial<ComponentOptions> | Default: { debounce: 100, ... }
Options to control component behavior and appearance. See details below.
Configure the behavior and appearance of the Places Autocomplete component using the following properties:
placeholder Type: string | Default: ''
Placeholder text for the input field.
debounce Type: number | Default: 100
Delay in milliseconds before triggering autocomplete API request after user stops typing. Set to 0 to disable debouncing.
distance Type: boolean | Default: true
Show distance from requestParams.origin in suggestions (if origin is provided).
distance_units Type: 'km' | 'miles' | Default: 'km'
Units to display distance in.
label Type: string | Default: ''
Optional label text displayed above the input field.
autofocus Type: boolean | Default: false
Automatically focus the input field on mount.
autocomplete Type: string | Default: 'off'
Standard HTML autocomplete attribute for the input field.
classes Type: Partial<ComponentClasses> | Default: {}
Object to override default CSS classes for various component parts. See Styling
clear_input Type: boolean | Default: true
If `true` (default), clears the input field after a suggestion is selected. If `false`, the input field retains the `formattedAddress` of the selected place.