Location Input - HapplyUI

A Google Maps address autocomplete input with async search and place resolution.

Installation

bunx @happlyui/cli@latest add location-input

Dependencies

npm packages

use-debounce
@remixicon/react
@radix-ui/react-scroll-area
react-remove-scroll

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
popover
input
happly-ui-utils

Usage

import * as LocationInput from "@/components/ui/location-input"

const [location, setLocation] = useState<LocationRequest>(null)

<LocationInput.Root
  location={location}
  onLocationChange={setLocation}
  placeholder="Search address..."
/>

Examples

Default

Basic location input with default settings.

const [location, setLocation] = useState<LocationRequest>(null)

<LocationInput.Root
  location={location}
  onLocationChange={setLocation}
/>

With React Hook Form

Used inside a FormField.Root with automatic error handling and validation on blur.

const { setValue, watch } = useFormContext()

<FormField.Root name="location" label="Location" required>
  <LocationInput.Root
    location={
      watch('location')
        ? { formatted_address: watch('location') } as LocationRequest
        : null
    }
    onLocationChange={(loc) =>
      setValue('location', loc?.formatted_address ?? '', {
        shouldValidate: true,
      })
    }
  />
</FormField.Root>

Custom Country Restrictions

Restrict autocomplete to specific countries.

<LocationInput.Root
  location={location}
  onLocationChange={setLocation}
  countryRestrictions={['ca', 'us']}
/>

With Error State

Manually set error state.

<LocationInput.Root
  location={location}
  onLocationChange={setLocation}
  hasError
/>

API Reference

LocationInput.Root

Google Maps address autocomplete input. Reads `hasError` and `onBlur` from FormField context when available.

Prop	Type	Default	Description
`location`	`LocationRequest`	-	The current location object. Pass `null` for empty state. The component syncs its internal search text when this prop changes (e.g. on form reset).
`onLocationChange`	`(location: LocationRequest) => void`	-	Callback when a location is selected or cleared.
`placeholder`	`string`	`'Search address...'`	Input placeholder text.
`icon`	`React.ElementType`	`RiMapPinLine`	Leading icon component.
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Input size variant.
`hasError`	`boolean`	`false`	Error state. Automatically read from FormField context if not provided.
`disabled`	`boolean`	`false`	Disabled state. Automatically read from FormField context if not provided.
`countryRestrictions`	`string[]`	`['ca', 'us', 'fr']`	ISO 3166-1 alpha-2 country codes for autocomplete restrictions.