Location Picker

Usage

Select Location

location-picker.tsx

import { LocationPicker } from "@/components/location-picker"

export default function MyComponent() {
return (
<LocationPicker />
)
}

Installation

Install the Location Picker component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/location-picker.json

Features

The Location Picker component is packed with powerful features designed to provide an exceptional user experience.

Location Search

Users can search for locations by name, address, or postal code with real-time suggestions.

Dual Variants

Choose between popover variant for compact layouts or inline variant for full-featured forms.

Autocomplete Suggestions

As users type, the component provides autocomplete suggestions for locations with debounced search.

Geolocation Support

Allows users to quickly use their current location with browser geolocation API.

Props

Prop	Type	Default
`defaultLocation?`	`string`	`''`
`autoDetectOnLoad?`	`boolean`	`false`
`variant?`	`'popover' \| 'inline'`	`'popover'`
`placeholder?`	`string`	`'Enter city, district, or area'`
`showLabel?`	`boolean`	`true`
`onChange?`	`(location: string) => void`	`undefined`
`className?`	`string`	`''`

Advanced Examples

Explore different configurations and use cases for the Location Picker component.

Popover Variant (Default)

Compact trigger that opens a popover with location search functionality. Perfect for navigation bars or space-constrained layouts.

Select Location

import { LocationPicker } from "@/components/location-picker"

export default function PopoverExample() {
  return (
    <LocationPicker
      variant="popover"
      defaultLocation="New York"
      onChange={(location) => console.log('Selected:', location)}
    />
  )
}

Inline Variant

Full-featured inline interface with immediate access to search functionality. Ideal for forms or dedicated location selection pages.

import { LocationPicker } from "@/components/location-picker"

export default function InlineExample() {
  return (
    <LocationPicker
      variant="inline"
      showLabel={true}
      placeholder="Search for your city..."
      onChange={(location) => console.log('Selected:', location)}
    />
  )
}

Auto-detect Location

Automatically detect user's current location when the component loads.

import { LocationPicker } from "@/components/location-picker"

export default function AutoDetectExample() {
  return (
    <LocationPicker
      variant="inline"
      autoDetectOnLoad={true}
      showLabel={false}
      placeholder="Detecting your location..."
    />
  )
}

Custom Styling

Customize the appearance with className and custom placeholder text.

Los Angeles

import { LocationPicker } from "@/components/location-picker"

export default function CustomExample() {
  return (
    <LocationPicker
      variant="popover"
      placeholder="Find stores near you..."
      defaultLocation="Los Angeles"
      className="border-2 border-blue-200 rounded-lg"
    />
  )
}

With Change Handler

Handle location changes with a callback function for integration with forms or state management.

import { LocationPicker } from "@/components/location-picker"
import { useState } from "react"

export default function HandlerExample() {
  const [selectedLocation, setSelectedLocation] = useState("")

  return (
    <div className="space-y-4">
      <LocationPicker
        variant="inline"
        showLabel={true}
        onChange={setSelectedLocation}
      />
      {selectedLocation && (
        <p className="text-sm text-muted-foreground">
          Selected: {selectedLocation}
        </p>
      )}
    </div>
  )
}