location input

Location Input

Location Input

Country and state picker based on your local countries/states JSON data.

Preview

Features

  • Country search with flag + country name.
  • State list automatically filtered by selected country.
  • Controlled callbacks for form integrations.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/location-input.json

Registry JSON: /registry/location-input.json

Usage

import LocationSelector from '@/components/ui/location-input'


<LocationSelector
  onCountryChange={(country) => setCountry(country?.name ?? '')}
  onStateChange={(state) => setState(state?.name ?? '')}
/>

Add countries.json and states.json in your /data directory before using this component.