React Country Select mit Flaggen, Suche und Vorwahlen

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 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 oder ein 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:

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 (opens in a new tab). 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:

"use client";

import { useState } from "react";
import { CountrySelect } from "@/components/ui/country-select";

export function ShippingCountry() {
  const [country, setCountry] = useState("US");

  return (
    <CountrySelect
      label="Land"
      description="Wohin wir deine Bestellung schicken."
      value={country}
      onValueChange={setCountry}
      priority={["US", "CA", "MX"]}
      required
      name="country"
    />
  );
}

label, description und error rendern die gemeinsame 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.

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:

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:

import { CountryFlag, getCountryName } from "@/components/ui/country-select";

export function ShipsTo({ code, locale }: { code: string; locale: string }) {
  return (
    <span className="inline-flex items-center gap-1.5">
      <CountryFlag code={code} size="sm" />
      {getCountryName(code, locale)}
    </span>
  );
}

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:

// 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 <form action={saveAddress}> um das CountrySelect name="country" die ganze Verdrahtung, die ein einfaches Formular braucht.

Wie zeigst du Vorwahlen und wählst mehrere Länder?

Für ein React Country Code Dropdown ergänzt du showDialCode. Die Vorwahl (+1, +44) erscheint am Ende jeder Zeile und hinter dem gewählten Namen. Durchsuchbar sind Vorwahlen auch ohne dieses Prop.

Für Felder wie „Liefert nach“ oder „Märkte“ ergänzt du multiple. Der Wert wird zu einem string[], jede Auswahl fügt einen Chip mit Flagge hinzu, und die Liste bleibt beim Auswählen offen:

"use client";

import { useState } from "react";
import { CountrySelect } from "@/components/ui/country-select";

export function Markets() {
  const [markets, setMarkets] = useState<string[]>(["US", "CA"]);

  return (
    <CountrySelect
      multiple
      label="Liefert nach"
      description="Bis zu 5 Länder im Starter-Plan."
      value={markets}
      onValueChange={setMarkets}
      maxSelected={5}
      showDialCode
      clearable
      name="markets"
    />
  );
}

maxSelected begrenzt die Anzahl, display wechselt zwischen chips, count („3 selected“) und text, maxVisibleChips fasst den Rest zu „+N“ zusammen, und mit wrap dürfen die Chips das Feld über mehrere Zeilen wachsen lassen. Der Modus für Mehrfachauswahl baut auf dem Multi-select auf, und der Guide zum React Multi Select behandelt Chips, „Alle auswählen“ und Limits ausführlich.

Warum zeigen Flaggen unter Windows nur Buchstaben?

Ein Flaggen-Emoji besteht aus zwei Regional-Indicator-Zeichen: Aus US wird 🇺🇸. macOS, iOS, Android und die meisten Linux-Desktops zeichnen daraus Flaggen. Windows liefert eine Emoji-Schrift ohne Landesflaggen aus, also zeichnen Chrome und Edge dort die zwei Buchstaben (Firefox bringt eine eigene Emoji-Schrift mit Flaggen mit). In jedem Windows-Browser tauscht das Country Select das Emoji nach dem Mount gegen einen kleinen Code-Chip. Der liest sich besser als zwei lose Buchstaben und sieht in jedem Browser gleich aus. Mit dem Prop fallback von CountryFlag erzwingst du die eine oder andere Variante.

Braucht dein Design auf jeder Plattform echte Flaggen, übergib dein eigenes SVG-Set über renderFlag:

<CountrySelect
  label="Land"
  renderFlag={(code) => (
    <img src={`/flags/${code.toLowerCase()}.svg`} alt="" className="h-3.5 w-5 rounded-[2px] object-cover" />
  )}
/>

Wie verhält es sich auf Smartphones und mit der Tastatur?

Unter 768px öffnet das Feld ein Bottom Sheet statt eines Popovers (responsive, standardmäßig true). Der Titel kommt aus dem Label, die Suche ist darunter angeheftet, die Zeilen sind 48px hoch, und ab virtualThreshold (100) rendert die Liste nur die sichtbaren Zeilen. So bleibt das Scrollen durch rund 245 Länder flüssig. Auf Touchgeräten wartet search="auto" auf einen Tipp in die Suchzeile, bevor sie den Fokus bekommt. Die Tastatur verdeckt also nicht die halbe Liste, sobald sich das Sheet öffnet. Mit multiple schließt ein Button „Done“ das Sheet.

Mit der Tastatur öffnet ein getippter Buchstabe auf dem geschlossenen Feld die Liste, mit diesem Buchstaben schon in der Suche. Enter, Leertaste oder Pfeil nach unten öffnen sie beim gewählten Land. In der Liste bewegen die Pfeiltasten die Auswahl, Bild auf und Bild ab springen seitenweise, Enter wählt aus, und Escape schließt die Liste und gibt den Fokus ans Feld zurück.

Wann ist ein Phone Input oder ein Timezone Select das bessere Feld?

Ein Country Select ist das richtige Feld, wenn das Land selbst die Information ist: eine Liefer- oder Rechnungsadresse, ein steuerlicher Wohnsitz, die Märkte, in denen ein Shop verkauft. Zwei Nachbarn erledigen den Job oft besser:

• Du willst eine Telefonnummer. Stell kein Country Select mit Vorwahlen neben ein Textfeld. Der Phone Input hat den Länder-Button eingebaut, formatiert die Ziffern beim Tippen für das jeweilige Land, wechselt das Land, wenn jemand +44 7400 123456 einfügt, und liefert einen einzigen E.164-String. Der Guide zum React Phone Input behandelt die Validierung.
• Du willst eine Zeitzone. Ein Land verrät dir die Zeitzone nicht (die Vereinigten Staaten haben mehrere). Das Timezone Select sucht nach Stadt, Abkürzung oder Offset, zeigt UTC-Offsets und bietet „Use my time zone“ an.

In einem Checkout- oder Registrierungsformular nutzt du oft zwei davon zusammen: ein Country Select in der Adresse und darunter einen Phone Input, beide auf derselben Field-Anatomie, sodass Labels, Fehler und Größen zueinander passen. Der Guide zu React-Formularkomponenten erklärt diese Anatomie und die übrigen Felder, und in der Kategorie Komponenten-Guides findest du die anderen ausführlichen Guides.

Welche Fallstricke tauchen in Produktion auf?

• Den Anzeigenamen speichern. Am Ende mappst du in einer Migration „Deutschland“ zurück auf DE. Speichere vom ersten Tag an den Code.
• en-US fest eintragen. Besucher aus anderen Ländern suchen in ihrer eigenen Sprache. Lass locale leer, damit die Komponente dem Browser folgt, oder setz es einmal am UIProvider.
• Eine Vorschlagsgruppe, um die niemand gebeten hat. Passt die Vermutung aus dem Locale nicht zu deinem Publikum (ein englischer Browser in Deutschland schlägt die USA vor), übergib deine echten wichtigsten Märkte an priority.
• Ein selbst gebauter versteckter Input. Ohne natives select mit autocomplete füllt Autofill die Straße aus und überspringt das Land. Übergib name und lass die Komponente es rendern.
• Eine volle Liste für drei Optionen. Lieferst du in drei Länder, schlägt countries mit drei Codes (oder eine Radio Group) eine durchsuchbare Liste mit 245 Einträgen.

Wie installierst du es?

Führ npx wingo-ui@latest add country-select aus. Der Befehl kopiert die Komponente mit den Teilen Select, Multi-select und Field, die sie nutzt, und installiert libphonenumber-js sowie die Pakete, die diese Teile brauchen. Das Country Select gehört zu Wingo UI Pro ($8 im Monat, $80 im Jahr oder einmalig $150), also meld dich vorher mit npx wingo-ui@latest login an. Field und das einfache Select bekommst du schon mit einem kostenlosen Konto, falls du mit einer kurzen, festen Länderliste starten und später upgraden willst.

Häufige Fragen

Wie baue ich ein React Country Select mit Flaggen?

Bau die Liste aus Codes nach ISO 3166-1 alpha-2, mach aus jedem Code ein Flaggen-Emoji aus zwei Regional-Indicator-Buchstaben (oder render eine SVG-Flagge) und hol den Namen über Intl.DisplayNames in der Sprache der Leser. Ergänze eine Suchzeile, stell das wahrscheinliche Land an den Anfang und speichere den Code als Wert.

Warum zeigen Flaggen-Emojis unter Windows nur zwei Buchstaben?

Windows liefert eine Emoji-Schrift ohne Landesflaggen aus. Chrome und Edge zeichnen dort deshalb die zwei Regional-Indicator-Buchstaben statt der Flagge (Firefox bringt eine eigene Emoji-Schrift mit Flaggen mit). Erkenne Windows und zeig einen kleinen Code-Chip, render SVG-Flaggen oder lade eine Polyfill-Schrift für Flaggen-Emojis.

Soll ich den Ländernamen oder den Ländercode speichern?

Speichere den Code nach ISO 3166-1 alpha-2, etwa US oder DE. Namen unterscheiden sich je nach Sprache und ändern sich mit der Zeit (aus Turkey wurde Türkiye), der Code bleibt stabil, und genau ihn erwarten Zahlungs- und Versand-APIs wie Stripe.

Hat shadcn/ui ein Country Select?

Nein. Stand 6. November 2026 listet die offizielle shadcn/ui-Registry 65 UI-Komponenten, und keine davon ist ein Country Select. shadcn-Projekte greifen deshalb zu einer Community-Komponente oder bauen eins auf Select oder Combobox auf.

Wie übersetze ich Ländernamen in React ohne Übersetzungsdatei?

Nutze Intl.DisplayNames mit dem Typ region: new Intl.DisplayNames(["de-DE"], { type: "region" }).of("DE") liefert Deutschland. Das steckt in aktuellen Browsern und in Node, du lieferst also keine JSON-Datei mit Namen pro Sprache aus.

Ist das Country Select von Wingo UI kostenlos?

Country Select, Phone Input und Timezone Select gehören zu Wingo UI Pro. Field und Select, auf denen sie aufbauen, sind kostenlos.