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.
The component includes built-in styles with .pac- prefixed CSS classes,
providing a complete, accessible UI out of the box. These styles are:
Pure CSS with no dependencies on Tailwind or other frameworks.
Clean, professional appearance with proper spacing, shadows, and hover effects.
Includes keyboard navigation indicators, loading states, and responsive behavior.
All styles can be overridden via the options.classes prop.
💡 How It Works
Override any default styling by providing your own CSS classes via options.classes.
Your custom classes will replace the default .pac- classes for the specified elements.
Below is a complete list of all the classes you can override, along with their default class names and descriptions.
| Class | Description | Default Value |
|---|---|---|
| section | The wrapper `<section>` element for the entire component. | |
| container | The container for the input field and dropdown. | |
| label | The `<label>` element for the input field. | |
| icon_container | Container for the search icon (positioned absolutely). | |
| icon | The SVG search icon. Customize this to use a different icon. | |
| input | Styles for the input field with focus states and shadow. | |
| kbd_container | Container for keyboard shortcut hints (Esc, ↑, ↓). | |
| kbd_escape | Style for the "Esc" key hint. | |
| kbd_up | Style for the "Up" arrow key hint. | |
| kbd_down | Style for the "Down" arrow key hint. | |
| kbd_active | Style applied to keyboard hints when active/highlighted. | |
| ul | Styles for the suggestions dropdown (<ul>) with scroll behavior. | |
| li | Styles for each suggestion list item (<li>) with hover states. | |
| li_current | Styles for the currently highlighted/selected suggestion item. | |
| li_button | The `<button>` element within each list item. | |
| li_button_current | Styles for the currently highlighted button within list items. | |
| li_div_container | Container div for content within each list item. | |
| li_div_one | First inner div containing the main text content. | |
| li_div_one_p | The `<p>` tag containing the primary suggestion text with matched highlighting. | |
| li_div_one_p_secondaryText | The `<p>` tag for secondary/subtitle text (e.g., city, country). | |
| li_div_p_container | Container for paragraph elements within list items. | |
| li_div_two | Second inner div containing secondary info (e.g., distance). | |
| li_div_two_p | The `<p>` tag containing distance or secondary metrics. | |
| map_pin_icon | The SVG map pin icon displayed next to suggestions. | |
| highlight | The class applied to the <span> wrapping matched text within suggestions for emphasis. | |
Here are practical examples of customizing the component with different CSS frameworks and approaches.
Override classes with Tailwind utility classes:
const options = {
classes: {
input: 'w-full px-4 py-2.5 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500',
ul: 'absolute mt-1 w-full bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-auto',
li: 'px-4 py-2 hover:bg-blue-500 hover:text-white cursor-pointer',
li_current: 'bg-blue-500 text-white',
highlight: 'font-semibold text-blue-700'
}
};Use your own custom CSS class names:
const options = {
classes: {
section: 'autocomplete-wrapper',
input: 'search-input',
ul: 'suggestions-list',
li: 'suggestion-item',
li_current: 'suggestion-item--active',
highlight: 'match-highlight'
}
};Create a dark theme variant:
const options = {
classes: {
input: 'w-full px-4 py-2.5 bg-slate-800 text-slate-100 border border-slate-600 rounded-md focus:ring-2 focus:ring-sky-500',
ul: 'absolute mt-1 w-full bg-slate-800 shadow-lg rounded-md border border-slate-600 max-h-60 overflow-auto',
li: 'px-4 py-2 text-slate-300 hover:bg-sky-600 hover:text-white cursor-pointer',
li_current: 'bg-sky-600 text-white',
highlight: 'font-semibold text-sky-400'
}
};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}
/>