Country Selector

A dropdown for selecting countries, with flag icons and ISO-3166 codes. Works in conjunction with StateSelector and CitySelector for cascading location selection.

Import


import { CountrySelector } from "@phpcreation/frontend-components-react-nextjs-bundle/components/CountrySelector";

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Controlled ISO country code
`onChange`	`(code: string) => void`	—	Change handler
`placeholder`	`string`	`"Select country..."`	Placeholder text
`disabled`	`boolean`	`false`	Disable the control
`className`	`string`	—	Additional CSS classes

Usage


import { CountrySelector } from "...";
import { StateSelector } from "...";
 
const [country, setCountry] = useState("");
const [state, setState] = useState("");
 
// Reset state when country changes
const handleCountryChange = (code: string) => {
  setCountry(code);
  setState("");
};
 
<CountrySelector
  value={country}
  onChange={handleCountryChange}
  placeholder="Select country..."
/>
 
<StateSelector
  country={country}
  value={state}
  onChange={setState}
/>

With React Hook Form


<FormField
  control={form.control}
  name="country"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Country</FormLabel>
      <FormControl>
        <CountrySelector
          value={field.value}
          onChange={field.onChange}
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Cascading Location

For complete address selection, chain the three location selectors:


<CountrySelector value={country} onChange={handleCountryChange} />
<StateSelector country={country} value={state} onChange={handleStateChange} />
<CitySelector country={country} state={state} value={city} onChange={setCity} />