How to build a country dropdown with flags

Every signup form, shipping page, and profile editor eventually needs a country picker. Here's one with flags — no library, no API key.

Fetch the list

You need three fields, so ask for three:

const res = await fetch(
  "https://countries.dev/countries?fields=name,alpha2Code,flag&sort=name"
);
const countries = await res.json();

sort=name returns them alphabetically, so there's nothing to sort on the client.

Build the select

const select = document.querySelector("#country");

select.innerHTML = countries
  .map((c) => `<option value="${c.alpha2Code}">${c.flag} ${c.name}</option>`)
  .join("");

That's the whole thing. The flags are real Unicode emoji, so there are no image requests and they pick up the user's system font.

React version

const [countries, setCountries] = useState([]);

useEffect(() => {
  fetch("https://countries.dev/countries?fields=name,alpha2Code,flag&sort=name")
    .then((r) => r.json())
    .then(setCountries);
}, []);

return (
  <select>
    {countries.map((c) => (
      <option key={c.alpha2Code} value={c.alpha2Code}>
        {c.flag} {c.name}
      </option>
    ))}
  </select>
);

Want to pre-select the visitor's country? Pair it with IP geolocation.

API docs →