City Select

info

The CitySelect component allows users to select a city based on a selected country and state. It provides a simple and flexible interface for integrating city selection in your React applications.

Usage

import React, { useState } from "react";
import { CountrySelect, StateSelect, CitySelect } from "react-country-state-city";
import "react-country-state-city/dist/react-country-state-city.css";

export default function App() {
  const [country, setCountry] = useState(null);
  const [currentState, setCurrentState] = useState(null);
  const [currentCity, setCurrentCity] = useState(null);

  return (
    <div>
      {/* Country Selection */}
      ...
      
      {/* State Selection */}
      ...
      
      {/* City Selection */}
      <h6>City</h6>
      <CitySelect
        countryid={country?.id}
        stateid={currentState?.id}
        onChange={(_city) => setCurrentCity(_city)}
        defaultValue={currentCity}
        placeHolder="Select City"
      />
    </div>
  );
}

Live Example

Country

State

City

Props

Prop Name	Type	Default	Required	Description
countryid	number	Empty	✅	The ID of the selected country.
stateid	number	Empty	✅	The ID of the selected state.
src	string	Empty	❌	URL to host data files. Defaults to a hosted CDN.
defaultValue	City	null	❌	The initial selected city object.
containerClassName	string	Empty	❌	CSS class for the container.
inputClassName	string	Empty	❌	CSS class for the input field.
onChange	(city: City) => void	Empty	❌	Callback triggered when a city is selected.
onTextChange	(text: string) => void	Empty	❌	Callback triggered when input text changes.
placeHolder	string	Empty	❌	Placeholder text for the input field.

---