Address Autocomplete

Search for addresses using Google Places API and auto-populate all related fields including street, city, postal code, and GPS coordinates. Uses the @better_form/plugin-google-places plugin.

Plugin Features

1
Google Places Autocomplete
Real-time address predictions from Google Places API
2
Interactive Map Picker
Click or drag marker to select location with reverse geocoding
3
Editable Detail Fields
Auto-filled address parts that remain editable
4
Callbacks for Auto-fill
onAddressSelected callback to populate other form fields

Loading plugin...

Installation

# Install the plugin
npm install @better_form/plugin-google-places

# Or with pnpm
pnpm add @better_form/plugin-google-places

Usage

import { googlePlacesPlugin } from '@better_form/plugin-google-places';
import '@better_form/plugin-google-places/styles';

// Create plugin instance
const googlePlaces = googlePlacesPlugin({
  apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
  defaultCountryRestrictions: ['IT'],
  defaultLanguage: 'it',
});

// Merge with default components
const fieldComponents = {
  ...defaultFieldComponents,
  ...googlePlaces.fieldComponents,
};

// Use in WizardProvider/WizardContainer
<WizardContainer config={config} fieldComponents={fieldComponents}>
  ...
</WizardContainer>

Step Callbacks All Examples