Region and country selector for website users

Region/Country Selector Implementation

Country or region selection appears in registration forms, profile settings, catalog filters, and localized landing pages. Implementation depends on number of options and use case.

Implementation Options

<select> with full country list — simplest way. Sufficient for forms where geo-selection not critical. Downside: 200 countries in regular dropdown inconvenient to scroll.

Searchable dropdown — input field + filterable list. Libraries: react-select, downshift, headlessui Combobox. Optimal for most cases.

Flags + country code — for phone forms where user selects code (+1, +44). Library react-phone-number-input solves this completely.

Map — for regional selection within country. Implemented via SVG map or Leaflet/Mapbox with clickable polygons.

Searchable Dropdown Example (React)

import { Combobox } from '@headlessui/react';
import { useState } from 'react';
import { countries } from './countries-data'; // ISO 3166-1 list

function CountrySelector({ value, onChange }) {
  const [query, setQuery] = useState('');

  const filtered = query.length < 1
    ? countries
    : countries.filter(c =>
        c.name.toLowerCase().includes(query.toLowerCase()) ||
        c.code.toLowerCase().includes(query.toLowerCase())
      );

  return (
    <Combobox value={value} onChange={onChange}>
      <Combobox.Input
        onChange={e => setQuery(e.target.value)}
        displayValue={c => c?.name ?? ''}
        placeholder="Select country"
        className="country-input"
      />
      <Combobox.Options className="country-dropdown">
        {filtered.length === 0 && query.length > 0 ? (
          <div className="country-empty">Country not found</div>
        ) : (
          filtered.map(country => (
            <Combobox.Option key={country.code} value={country}>
              {({ active }) => (
                <div className={`country-option ${active ? 'active' : ''}`}>
                  <img
                    src={`/flags/${country.code.toLowerCase()}.svg`}
                    width={20}
                    alt=""
                    aria-hidden
                  />
                  {country.name}
                  <span className="country-code">{country.code}</span>
                </div>
              )}
            </Combobox.Option>
          ))
        )}
      </Combobox.Options>
    </Combobox>
  );
}

Data: Where to Get Country List

• Static JSON — file with ISO 3166-1 (code, name in needed languages, dial-code). Package world-countries (~180 KB) or own lightweight list
• REST Countries API — https://restcountries.com/v3.1/all — current data, but external dependency
• Server database — countries table with translations, filter by active shipping regions

Auto-Detection by IP

Pre-set country by geolocation — improves UX but requires backend:

// Laravel + Torann/GeoIP or MaxMind
public function detectCountry(Request $request): JsonResponse
{
    $geo = geoip()->getLocation($request->ip());
    return response()->json([
        'country_code' => $geo->iso_code,
        'country_name' => $geo->country,
    ]);
}

On frontend:

useEffect(() => {
  fetch('/api/geo/country')
    .then(r => r.json())
    .then(geo => {
      const detected = countries.find(c => c.code === geo.country_code);
      if (detected && !value) onChange(detected); // only if not manually selected
    });
}, []);

Timeframe

Searchable dropdown with flags, search, auto-detection by IP — 1–2 working days.