The Places (New) Autocompelte Svelte component offers a range of properties for customizing 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:
VITE_PUBLIC_GOOGLE_MAPS_API_KEY *Type: string
Your Google Maps API Key with Places API enabled.
onResponse *Type: callback
Callback function triggered with the selected place details (PlaceResult object) after fetchFields is complete.
onError Type: callback
Callback function triggered when an error occurs (API loading, fetching suggestions, fetching details).
requestParams Type: object | Default: {}
Object for additional request parameters (e.g., types, bounds). See AutocompleteRequest.
fetchFields Type: array | Default: ['formattedAddress', 'addressComponents']
Array of place data fields to return. See Supported Fields documentation for a comprehensive list of available fields. Note that the Places Autocomplete service does not support the following fields, even if they are available in the Place Details API: geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours,icon, and name. If you need these fields, you must make a separate call to the Place Details API using the returned `place_id`.
options Type: object | Default: See default values below.
Options to control component behavior and appearance. See details below.
Configure the behavior and appearance of the Places Autocomplete component using the following properties:
debounce Type: number | Default: 100
(New) Delay in milliseconds before triggering autocomplete API request after user stops typing. Set to 0 to disable debouncing.
autofocus Type: boolean | Default: false
If true, the input field will be focused automatically when the component mounts.
placeholder *Type: string | Default: Start typing...
Placeholder text for the input field.
autocomplete Type: string | Default: off
HTML autocomplete attribute for the input field. Set to "off" to disable browser autocomplete.
distance Type: boolean | Default: {}
If true, and if an origin is specified in requestParams, displays the distance to each suggestion. The distance is calculated as a geodesic in meters.
distance_units Type: string | Default: km
Specified the distance units. "km" or "miles". Only used if distance is set to true.
classes Type: object
Object to override default Tailwind CSS classes. See Styling