Styling & Customisation

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

← 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
kbd_container	pac-kbd-container	div	Keyboard hint container

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 →