Places Autocomplete Svelte - Google Maps Autocomplete Component for SvelteKit

Styling

The Places (New) Autocompelte Svelte component comes with default styles using Tailwind CSS, but you can fully customise the appearance to match your project's design. This section details how to customise the component's appearance.

Tailwind CSS style (default)

Component elements and classes

Customise the component's appearance by providing an object to the classes property. This object should contain key-value pairs, where the keys correspond to the component's elements and the values are your custom CSS class names.

section: The wrapper `<section>` element for the entire component.
container: relative z-10 transform rounded-xl mt-4

The container for the input field and dropdown.
icon_container: pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3

Container for the search icon.
icon: <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>

The SVG search icon. Customize this to use a different icon.
input: border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm

Styles for the input field.
kbd_container: absolute inset-y-0 right-0 flex py-1.5 pr-1.5

Container for keyboard shortcut hints.
kbd_escape: inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1

Style for the "Esc" key hint.
kbd_up: inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6

Style for the "Up" key hint.
kbd_down: inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6

Style for the "Down" key hint.
kbd_active: bg-indigo-500 text-white

Style for the active key hint.
ul: absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100

Styles for the suggestions dropdown (<ul>).
li: z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white

Styles for each suggestion list item (<li>).
li_current: bg-indigo-500

Styles for the currently highlighted/selected suggestion.
li_a: block w-full flex justify-between

Styles for the anchor link (<a>) within each list item.
li_a_current: text-white

Styles for the currently highlighted/selected anchor link.
li_div_container: flex min-w-0 gap-x-4

Container for the content within each list item.
li_div_one: min-w-0 flex-auto

Container for the primary text content within each list item.
li_div_one_p: text-sm/6 font-semibold

Primary text content within each list item.
li_div_two: shrink-0 flex flex-col items-end min-w-16

Container for the secondary text content within each list item (e.g., distance).
li_div_two_p: mt-1 text-xs/5

Secondary text content within each list item.

Property	Description
`section`	The wrapper `<section>` element for the entire component.
`container`	`relative z-10 transform rounded-xl mt-4` The container for the input field and dropdown.
`icon_container`	`pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3` Container for the search icon.
`icon`	`<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>` The SVG search icon. Customize this to use a different icon.
`input`	`border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm` Styles for the input field.
`kbd_container`	`absolute inset-y-0 right-0 flex py-1.5 pr-1.5` Container for keyboard shortcut hints.
`kbd_escape`	`inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1` Style for the "Esc" key hint.
`kbd_up`	`inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6` Style for the "Up" key hint.
`kbd_down`	`inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6` Style for the "Down" key hint.
`kbd_active`	`bg-indigo-500 text-white` Style for the active key hint.
`ul`	`absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100` Styles for the suggestions dropdown (<ul>).
`li`	`z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white` Styles for each suggestion list item (<li>).
`li_current`	`bg-indigo-500` Styles for the currently highlighted/selected suggestion.
`li_a`	`block w-full flex justify-between` Styles for the anchor link (<a>) within each list item.
`li_a_current`	`text-white` Styles for the currently highlighted/selected anchor link.
`li_div_container`	`flex min-w-0 gap-x-4` Container for the content within each list item.
`li_div_one`	`min-w-0 flex-auto` Container for the primary text content within each list item.
`li_div_one_p`	`text-sm/6 font-semibold` Primary text content within each list item.
`li_div_two`	`shrink-0 flex flex-col items-end min-w-16` Container for the secondary text content within each list item (e.g., distance).
`li_div_two_p`	`mt-1 text-xs/5` Secondary text content within each list item.

Code

Copy and paste the following code into your Svelte application and replace ___YOUR_API_KEY___ with your actual API keyto start using the Places Autocomplete Svelte component.

<script lang="ts">
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
// Google Maps API key
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';

const options = {
	classes : {
		section: '',
		container: 'relative z-10 transform rounded-xl mt-4',
		icon_container: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
		icon: '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>',
		input: 'border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm',
		kbd_container: 'absolute inset-y-0 right-0 flex py-1.5 pr-1.5',
		kbd_escape: 'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
		kbd_up: 'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
		kbd_down: 'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
		kbd_active: 'bg-indigo-500 text-white',
		ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100',
		li: 'z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
		li_current: 'bg-indigo-500',
		li_a: 'block w-full flex justify-between',
		li_a_current: 'text-white',
		li_div_container: 'flex min-w-0 gap-x-4',
		li_div_one: 'min-w-0 flex-auto',
		li_div_one_p: 'text-sm/6 font-semibold',
		li_div_two: 'shrink-0 flex flex-col items-end min-w-16',
		li_div_two_p: 'mt-1 text-xs/5'
	}
}
...
</script>


{#if pacError}
	<p class="error">{pacError}</p>
{/if}	

	<PlaceAutocomplete 
		{onError} 
		{onResponse} 
		{options}
		{PUBLIC_GOOGLE_MAPS_API_KEY} 
	/>
			
<p>Response Object: {JSON.stringify(fullResponse, null, 2)}</p>

Previous: Reactive Parameters
Next: Customise request parameters