Component Properties

The Places Autocomplete Svelte component is highly configurable through a set of properties (props) and a nested options object. This guide provides a detailed reference for each available prop, enabling you to tailor the component to your specific needs.

Core Properties

These are the primary props passed directly to the PlaceAutocomplete component.

PUBLIC_GOOGLE_MAPS_API_KEY (Required)

Type: string

Your Google Maps API Key with Places API enabled. Optional when using manual initialization (if the loader has been initialised in a parent component via initialiseGMaps()).

onResponse (Required)

Type: (response: PlaceResult) => void

Callback function triggered with the selected place details (PlaceResult object) after fetchFields is complete.

onError (Required)

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 billing costs. See Place Data Fields for available options and pricing.

options

Type: Partial<ComponentOptions>

Default: { debounce: 100, ... }

Options to control component behavior and appearance. See details below.

💰 Cost Impact: fetchFields

The fetchFields prop directly affects your Google Maps API billing. Each field category (Basic, Contact, Atmosphere) has different pricing. Only request the fields you actually need to minimize costs.

Pricing Categories:

  • • Basic: formattedAddress, location, addressComponents (Cheaper)
  • • Contact: phoneNumber, website, openingHours (Moderate)
  • • Atmosphere: rating, reviews, photos (More expensive)

→ View detailed pricing

Options Object

The options prop accepts an object to control finer details of the component's behavior and appearance.

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.

Google Maps Platform

Awards 2025 Winner

GitHub

2026 Places Autocomplete Svelte.