Build a country dropdown
A free, always-current list of every country — with flags, ISO codes and dial codes — plus copy-paste code. No hardcoded array to maintain.
Why
Stop hardcoding the country list
Always current
Countries change, split and rename. Fetch the list instead of shipping a hardcoded array that goes stale.
Flags & codes included
Every option comes with a flag, ISO 3166 codes and dial codes — everything a picker needs.
One fetch, no library
No npm package and no API key. GET the list, map it to <option>s, done.
Copy-paste
Drop it into your form
Fetch the list, map it to options — that's the whole dropdown.
The data
curl "https://countries.dev/countries?fields=name,alpha2Code,flag,callingCodes&sort=name"React
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>
);Vanilla JS
const res = await fetch(
'https://countries.dev/countries?fields=name,alpha2Code,flag&sort=name',
);
const countries = await res.json();
select.innerHTML = countries
.map((c) => `<option value="${c.alpha2Code}">${c.flag} ${c.name}</option>`)
.join('');With dial codes (phone input)
curl "https://countries.dev/countries?fields=name,alpha2Code,flag,callingCodes&sort=name"Use it for
Wherever you ask for a country
Sign-up & profile forms
A clean country picker for registration, billing and account settings.
Phone number inputs
Pair the flag and dial code to build an international phone field.
Checkout & shipping
Select a destination, then drive currency, tax and shipping rules from the same record.
Country dropdown — FAQ
Where do I get a list of countries for a dropdown?
GET https://countries.dev/countries?fields=name,alpha2Code,flag&sort=name returns every country as JSON, sorted by name and ready to map to <option> elements. No API key.
Does the country list include flags?
Yes. Add flag to the fields (emoji) — or request flags for SVG/PNG image URLs. ISO codes and dial codes are available the same way.
How do I build a country select in React?
Fetch the list once, store it in state, and map each country to an <option> with its ISO code as the value and flag + name as the label. The React example above is copy-paste ready.
Is the list kept up to date?
Yes — it tracks the dataset, so you avoid maintaining (and forgetting to update) a hardcoded array of 250 countries.
Can I get dial codes for a phone input too?
Yes. Add callingCodes to the fields and you get the +code for each country alongside the flag — exactly what an international phone input needs.
Do I need an API key?
No. GET the endpoint and parse the JSON; CORS is permissive, so it works from the browser.
One endpoint, every country
GET countries.dev/countries?fields=name,alpha2Code,flag — the only country list your form needs.