Components

Unofficial shadcn components that you asked for and we could not find better so far.

Location Input

A dropdown components which contains all countries and their states.

Installation

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

Once the component is installed successfully, add the following JSON files to your project. /data/ folder is recommended for better organization.

Countries JSON
States JSON

Usage

'use client'

import { useState } from 'react'

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

const [countryName, setCountryName] = useState<string>('')
const [stateName, setStateName] = useState<string>('')

<LocationSelector
  onCountryChange={(country) => {
    setCountryName(country?.name || '')
    form.setValue(field.name, [country?.name || '', stateName || ''])
  }}
  onStateChange={(state) => {
    setStateName(state?.name || '')
    form.setValue(field.name, [countryName || '', state?.name || ''])
  }}
/>

Form

Loading preview...