City Selector

A dropdown for selecting cities, filtered based on the selected country and state. The final component in the cascading location selector trio.

Import


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

Props

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

Usage


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

City Selector

Import

Props

Usage

Related