State Selector

A dropdown for selecting states or provinces, filtered based on the selected country. Part of the cascading location selector trio.

Import


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

Props

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

Usage


import { CountrySelector } from "...";
import { StateSelector } from "...";
 
const [country, setCountry] = useState("US");
const [state, setState] = useState("");
 
<CountrySelector value={country} onChange={setCountry} />
<StateSelector
  country={country}
  value={state}
  onChange={setState}
  placeholder="Select state..."
/>

Country Selector — must be set first
City Selector — depends on both country + state
Render Form Fields

State Selector

Import

Props

Usage

Related