# React Country Select mit Flaggen, Suche und Vorwahlen
> Bau ein React Country Select mit Flaggen, vom Browser übersetzten Namen, Suche nach Name, Code oder +Vorwahl, Vorschlägen, Mehrfachauswahl und ISO-Werten.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-country-select
- Englische Fassung: https://wingo-ui.com/blog/react-country-select
## Kurz gesagt
Ein gutes React Country Select speichert den Code nach ISO 3166-1 alpha-2 (US, DE), zeigt jedes Land mit Flagge und mit seinem Namen in der Sprache der Leser über Intl.DisplayNames und findet Länder über den Namen, den englischen Namen, den Code, die Vorwahl und gängige Kurzformen wie UK oder USA. Stell das wahrscheinliche Land nach oben, schick den Code über ein verstecktes natives select ab, damit Autofill funktioniert, nimm auf Smartphones ein Bottom Sheet und unter Windows, wo Flaggen-Emojis fehlen, einen kleinen Code-Chip. Das Country Select von Wingo UI kann all das, mit Einfach- oder Mehrfachauswahl.
Ein React Country Select wirkt wie das einfachste Feld im Checkout. Dann kommen echte Nutzer: Jemand in München tippt „deutschland“, jemand in London „UK“, ein Windows-Laptop zeigt „US“, wo die Flagge stehen sollte, und in deiner Datenbank stehen „United States“, „USA“ und „United States of America“ für denselben Kunden. Dieser Guide zeigt, was das Feld können muss, welche npm-Pakete es gibt und wie du das [Country Select](https://wingo-ui.com/components/country-select) von Wingo UI als durchsuchbares Länder-Dropdown mit Flaggen, übersetzten Namen, Vorwahlen und Mehrfachauswahl einsetzt. Außerdem geht es darum, wann ein [Phone Input](https://wingo-ui.com/components/phone-input) oder ein [Timezone Select](https://wingo-ui.com/components/timezone-select) das Feld ist, das du eigentlich brauchst.
## Was muss ein React Country Select können?
Sieben Punkte trennen eine Länderauswahl, die eine Sekunde dauert, von einer, durch die sich Leute scrollen:
1. **Den ISO-Code speichern.** Der Wert ist `"US"` oder `"DE"`. Der Name ist nur Darstellung.
2. **Namen in der Sprache der Leser.** Wer aus Deutschland kommt, sieht Deutschland, Frankreich und Vereinigte Staaten, nach deutschen Regeln sortiert.
3. **Eine nachsichtige Suche.** Sie findet den übersetzten Namen, den englischen Namen, den ISO-Code, die Vorwahl (`+44`) und die Kurzformen, die Leute tippen (`USA`, `UK`, `Holland`), und ignoriert Akzente, sodass `cote` Côte d'Ivoire findet.
4. **Das wahrscheinliche Land zuerst.** Eine Gruppe „Suggested“ mit dem eigenen Land oder deinen wichtigsten Märkten, damit die meisten gar nicht erst suchen.
5. **Flaggen, die überall funktionieren.** Flaggen-Emojis kosten nichts, nur Windows zeigt stattdessen Buchstaben.
6. **Ein echter Formularwert.** Ein verstecktes natives `select` mit `autocomplete="country"`, damit `FormData` den Code bekommt und Autofill ihn aus einer gespeicherten Adresse einträgt.
7. **Ein Layout für Smartphones.** Rund 245 Zeilen in einem Popover, das an einem 44px hohen Feld hängt, lassen sich mit dem Daumen schlecht scrollen. Ein Bottom Sheet mit fest angehefteter Suche oben funktioniert besser.
## Welche Pakete für ein React Country Select gibt es?
Wer auf npm nach einem React Country Dropdown mit Flaggen sucht, findet vier Pakete, und jedes deckt einen anderen Teil der Aufgabe ab. Stand 6. November 2026, laut npm-Registry und der jeweiligen README:
| Option | Letztes Release | Was du bekommst | Namen |
|---|---|---|---|
| [react-flags-select](https://www.npmjs.com/package/react-flags-select) | 2.5.0, Juni 2025 | ein Select mit SVG-Flaggen, Suche optional (`searchable`) | eigene mitgelieferte Liste, umbenennen mit `customLabels` |
| [react-select-country-list](https://www.npmjs.com/package/react-select-country-list) | 2.2.3, Jan. 2021 | Label- und Value-Daten für react-select | Englisch |
| [react-country-region-selector](https://www.npmjs.com/package/react-country-region-selector) | 4.0.6, Feb. 2026 | verknüpfte Dropdowns für Land und Region | aus country-region-data |
| [i18n-iso-countries](https://www.npmjs.com/package/i18n-iso-countries) | 7.14.0, Feb. 2025 | Namen in vielen Sprachen, keine UI | registriertes JSON pro Sprache |
| Wingo UI Country Select | kopierter Quellcode | durchsuchbares Select, Flaggen, Vorwahlen, Mehrfachauswahl, Sheet auf Smartphones | Intl.DisplayNames |
Alle vier npm-Pakete stehen unter MIT-Lizenz. Die Komponente von Wingo UI gehört zum kostenpflichtigen Pro-Plan. Brauchst du nur Flaggen in einem einfachen Dropdown und willst ein kostenloses Paket, ist react-flags-select die naheliegende Wahl. Brauchst du unter dem Land noch Regionen oder Bundesstaaten, kann react-country-region-selector das, die Komponente von Wingo UI nicht.
Ein shadcn Country Select gibt es nicht in der offiziellen [shadcn/ui-Registry](https://ui.shadcn.com/r/index.json). Sie listet Stand 6. November 2026 65 UI-Komponenten (darunter `select`, `native-select` und `combobox`). Community-Versionen gibt es; prüf vor dem Kopieren, woher sie Namen und Flaggen nehmen.
## Wie baust du ein React Country Select mit Flaggen?
Installier es mit `npx wingo-ui@latest add country-select` und render es dann mit Label, Wert und ein paar bevorzugten Ländern:
```tsx
"use client";
import { useState } from "react";
import { CountrySelect } from "@/components/ui/country-select";
export function ShippingCountry() {
const [country, setCountry] = useState("US");
return (
);
}
```
`label`, `description` und `error` rendern die gemeinsame [Field](https://wingo-ui.com/components/field)-Anatomie um den Trigger: Das Label gehört zum Trigger, der Hinweis ist über `aria-describedby` verknüpft. Ohne `priority` enthält die Vorschlagsgruppe das Land aus dem Locale, `en-US` schlägt also die Vereinigten Staaten vor und `en-GB` das Vereinigte Königreich. Mit `priority={[]}` fällt die Gruppe weg.
> Live-Demo (Country Select): Öffne die Liste und tippe „germany“, „uk“, „+44“ oder „cote“: Jede Eingabe findet ihr Land, die passenden Buchstaben sind fett. Probier sie unter [Country Select](https://wingo-ui.com/components/country-select) aus und installier sie mit `npx wingo-ui@latest add country-select`.
Um die Liste auf die Länder zu beschränken, in die du lieferst, übergib `countries={["US", "CA", "MX", "DE", "FR"]}`. Um einzelne Länder zu entfernen, übergib `exclude`. Bei acht Ländern oder weniger blendet sich die Suchzeile von selbst aus (`search="auto"`); mit `search="always"` oder `"never"` legst du es selbst fest.
## Wie werden Ländernamen übersetzt?
Ältere Länderpakete liefern eine JSON-Datei mit englischen Namen aus, plus eine weitere Datei für jede Sprache, die du registrierst. Browser kennen über `Intl.DisplayNames` aber schon jeden Ländernamen in jeder großen Sprache:
```ts
new Intl.DisplayNames(["de-DE"], { type: "region" }).of("DE"); // "Deutschland"
new Intl.DisplayNames(["fr-FR"], { type: "region" }).of("JP"); // "Japon"
```
Das Country Select erledigt das für dich. Sein Prop `locale` legt die Sprache der Namen und die Sortierung fest. Fehlt es, liest die Komponente das Locale aus dem `UIProvider` und danach aus dem Browser. Eine deutsche Liste sortiert mit einem deutschen Collator, und die englischen Namen bleiben durchsuchbar: Wer in einer deutschen Liste „germany“ tippt, findet trotzdem Deutschland.
Dieselben Helfer sind auch für deine eigene UI exportiert, etwa für eine Bestellübersicht:
```tsx
import { CountryFlag, getCountryName } from "@/components/ui/country-select";
export function ShipsTo({ code, locale }: { code: string; locale: string }) {
return (
{getCountryName(code, locale)}
);
}
```
Ein Detail, das in Next.js zuschlägt: Node und Chrome können unterschiedliche ICU-Daten mitbringen, deshalb weichen ein paar Namen zwischen Server und Browser ab (Hongkong und Macao sind Beispiele), und eine serverseitig gerenderte Liste mit rund 245 sortierten Namen kann bei der Hydration scheitern. Das Country Select rendert auf dem Server nur das gewählte Land und baut die volle Liste erst nach der Hydration auf, so stimmt das Markup überein.
## Ländername oder ISO-Code speichern?
Speichere den Code. Namen hängen von der Sprache ab und ändern sich mit der Zeit (auf Englisch heißt Turkey jetzt Türkiye), `"TR"` bleibt dagegen `"TR"`. Das Adressfeld `country` von Stripe und die meisten APIs von Versanddienstleistern erwarten den Code nach ISO 3166-1 alpha-2.
Mit `name` rendert die Komponente ein verstecktes natives `select` (mit `multiple` einen versteckten Input pro Land), das den Code abschickt. Sein `autoComplete` steht standardmäßig auf `"country"`: Füllt der Browser eine gespeicherte Adresse aus, aktualisiert sich auch die Auswahl. Prüf den Code auf dem Server noch einmal. `libphonenumber-js` ist ohnehin eine Abhängigkeit der Komponente und exportiert `isSupportedCountry`:
```ts
// app/checkout/actions.ts
"use server";
import { isSupportedCountry } from "libphonenumber-js";
export async function saveAddress(formData: FormData) {
const country = String(formData.get("country") ?? "").toUpperCase();
if (!isSupportedCountry(country)) throw new Error("Unbekanntes Land");
// "US" speichern, den Namen beim Rendern in der Sprache der Leser zeigen
}
```
Danach ist `