Styling & Customisation

Customise the appearance of Places Autocomplete JS to perfectly match your application's design system and brand identity.

← Back to Home API Reference → Examples →

Two Styling Approaches

The component can be styled in two ways. You can use the pre-built CSS file for quick setup, or customise every aspect using CSS classes.

Pre-built CSS (Recommended)

Quick setup with sensible defaults. Works out-of-the-box with no configuration.

✓ Zero configuration required

✓ Responsive design included

✓ Accessible by default

Custom CSS Classes

Full control over appearance. Override any element's styling.

✓ Match your design system

✓ Framework integration (Bootstrap, etc.)

✓ Complete customisation

Using Pre-built CSS

With a Bundler

import { PlacesAutocomplete } from 'places-autocomplete-js';
import 'places-autocomplete-js/places-autocomplete.css';

With a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/places-autocomplete-js@latest/dist/places-autocomplete.css">

Place this in the <head> of your HTML file.

CSS Class Reference

All available CSS classes that can be customised via the options.classes object.

Class Key	Default Class	Element	Description
section	pac-section	section	Main container section
container	pac-container	div	Container for input and suggestions
label	N/A	label	Label element (if provided)
input	pac-input	input	Main text input element
icon_container	pac-icon-container	div	Container for search icon
ul	pac-ul	ul	Suggestions list
li	pac-li	li	Individual suggestion item
li_current	pac-li-current	li	Currently highlighted suggestion
li_button	pac-li-button	button	Button within suggestion
highlight	pac-highlight	span	Matched text highlighting
li_div_container	pac-li-div-container	div	Container within suggestion button
li_div_one	pac-li-div-one	div	First inner div (name & icon)
li_div_one_p	pac-li-div-one-p	p	Suggestion main text
li_div_two	pac-li-div-two	div	Second inner div (distance/type)
li_div_two_p	pac-li-div-two-p	p	Distance text paragraph
li_div_two_p_place_type	pac-li-div-two-p-place_type	span	Place type container
li_div_two_p_place_type_icon	pac-li-div-two-p-place_type-icon	span	Place type icon element
li_div_two_p_place_type_label	pac-li-div-two-p-place_type-label	span	Place type label text
kbd_container	pac-kbd-container	div	Keyboard hint container
kbd_escape	pac-kbd-escape	kbd	Escape key hint
kbd_up	pac-kbd-up	kbd	Up arrow key hint
kbd_down	pac-kbd-down	kbd	Down arrow key hint
kbd_active	pac-kbd-active	kbd	Active key state
icon	N/A	svg	Search icon SVG string
li_button_current	pac-li-button-current	button	Current button state

Custom Classes Example

Override default classes to match your design system. Provide your custom class names via the options.classes object.

JavaScript

const autocomplete = new PlacesAutocomplete({
  containerId: 'autocomplete-container',
  googleMapsApiKey: 'YOUR_API_KEY',
  options: {
    classes: {
      input: 'my-custom-input',
      ul: 'my-dropdown-list',
      li: 'my-suggestion-item',
      li_current: 'my-active-item',
      highlight: 'my-text-highlight',
    },
  },
});

CSS

.my-custom-input {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s;
}

.my-custom-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.my-dropdown-list {
  margin-top: 0.5rem;
  max-height: 20rem;
  overflow-y: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.my-suggestion-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.my-active-item {
  background-color: #3b82f6;
  color: white;
}

.my-text-highlight {
  font-weight: 600;
  color: #1d4ed8;
}

Framework Integration

Bootstrap

Integrate with Bootstrap by using Bootstrap's form and dropdown classes.

const autocomplete = new PlacesAutocomplete({
  containerId: 'autocomplete-container',
  googleMapsApiKey: 'YOUR_API_KEY',
  options: {
    classes: {
      input: 'form-control form-control-lg',
      ul: 'dropdown-menu show w-100',
      li: 'dropdown-item',
      li_current: 'active',
    },
  },
});

Material Design

Use Material Design Web Components classes.

const autocomplete = new PlacesAutocomplete({
  containerId: 'autocomplete-container',
  googleMapsApiKey: 'YOUR_API_KEY',
  options: {
    label: 'Address',
    classes: {
      section: 'mdc-text-field-wrapper',
      label: 'mdc-floating-label',
      input: 'mdc-text-field__input',
      ul: 'mdc-menu-surface mdc-menu-surface--open',
      li: 'mdc-list-item',
      li_current: 'mdc-list-item--selected',
    },
  },
});

React Integration

Use the component in React with proper lifecycle management.

import { useEffect, useRef } from 'react';
import { PlacesAutocomplete } from 'places-autocomplete-js';
import 'places-autocomplete-js/places-autocomplete.css';

function AddressAutocomplete() {
  const autocompleteRef = useRef(null);

  useEffect(() => {
    const autocomplete = new PlacesAutocomplete({
      containerId: 'autocomplete-container',
      googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_KEY,
      onResponse: (placeDetails) => {
        console.log('Selected place:', placeDetails);
      },
    });

    autocompleteRef.current = autocomplete;

    return () => {
      // Cleanup on unmount
      autocomplete.destroy();
    };
  }, []);

  return (
    <div className="address-autocomplete">
      <div id="autocomplete-container"></div>
    </div>
  );
}

export default AddressAutocomplete;

Vue Integration

Use the component in Vue with proper lifecycle hooks.

<template>
  <div class="address-autocomplete">
    <div id="autocomplete-container"></div>
  </div>
</template>

<script>
import { PlacesAutocomplete } from 'places-autocomplete-js';
import 'places-autocomplete-js/places-autocomplete.css';

export default {
  name: 'AddressAutocomplete',
  data() {
    return {
      autocomplete: null
    };
  },
  mounted() {
    this.autocomplete = new PlacesAutocomplete({
      containerId: 'autocomplete-container',
      googleMapsApiKey: process.env.VUE_APP_GOOGLE_MAPS_KEY,
      onResponse: (placeDetails) => {
        console.log('Selected place:', placeDetails);
        this.$emit('place-selected', placeDetails);
      },
    });
  },
  beforeUnmount() {
    if (this.autocomplete) {
      this.autocomplete.destroy();
    }
  }
};
</script>

Accessibility Considerations

When customizing styles, ensure accessibility isn't compromised:

Color Contrast

Ensure text has sufficient contrast ratio (WCAG AA: 4.5:1 minimum for normal text).

Focus Indicators

Maintain visible focus states for keyboard navigation. Don't remove outline without providing an alternative.

Touch Targets

Keep interactive elements at least 44x44px for mobile users.

← API Reference

Home Examples →