The Places Autocomplete Svelte component is designed to be highly customizable, allowing you to tailor its appearance to match your application's design. You can override the default styles by providing your own CSS classes for various parts of the component.
Below is a list of all the classes you can override, along with a description of what each class targets.
| Class | Description | Default Value |
|---|---|---|
| section | The wrapper `<section>` element for the entire component. | |
| container | The container for the input field and dropdown. | |
| icon_container | Container for the search icon. | |
| icon | The SVG search icon. Customize this to use a different icon. | |
| input | Styles for the input field. | |
| kbd_container | Container for keyboard shortcut hints. | |
| kbd_escape | Style for the "Esc" key hint. | |
| kbd_up | Style for the "Up" key hint. | |
| kbd_down | Style for the "Down" key hint. | |
| kbd_active | Style for the active key hint. | |
| ul | Styles for the suggestions dropdown (<ul>). | |
| li | Styles for each suggestion list item (<li>). | |
| li_current | Styles for the currently highlighted/selected suggestion. | |
| li_a | Styles for the anchor link (<a>) within each list item. | |
| li_a_current | Styles for the currently highlighted/selected anchor link. | |
| li_div_container | Container for the content within each list item. | |
| li_div_one | Container for the primary text content within each list item. | |
| li_div_one_p | Primary text content within each list item. | |
| li_div_two | Container for the secondary text content within each list item (e.g., distance). | |
| li_div_two_p | Secondary text content within each list item. | |
| highlight | The class applied to the <span> wrapping the matched text within suggestions. | |
Copy and paste the following code into your Svelte application and replace ___YOUR_API_KEY___ with your actual API key to 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 ',
li_div_two: 'shrink-0 flex flex-col items-end min-w-16',
li_div_two_p: 'mt-1 text-xs/5',
highlight: 'font-bold',
}
}
...
</script>
<PlaceAutocomplete
{onError}
{onResponse}
{options}
{PUBLIC_GOOGLE_MAPS_API_KEY}
/>