Locale Picker

Installation

npx shadcn@latest add @babelize/locale-picker

Usage

import { LocalePicker } from "@/components/ui/locale-picker";

<LocalePicker
  regions={["IN", "US", "GB", "DE", "JP"]} // your ISO 3166-1 alpha-2 regions
  defaultValue="en-IN"
  onValueChange={(locale) => console.log("Selected locale:", locale)}
  label="english" // native, english
  variant="outline" // outline, ghost, secondary
  size="default" // sm, default, lg
/>

Props

The selected value is a full BCP 47 tag: its region subtag is the picked region, and its language subtag survives region changes. Picking Germany from en-IN yields en-DE; picking it from fr-JP yields fr-DE.

Derived defaults

The summary card derives everything from the selected locale through Intl — no data bundled beyond an ISO 4217 fallback table for the currency code:

Regions without a currency mapping show an em dash rather than a guess.

Keyboard support

The popup follows the WAI-ARIA combobox pattern: focus stays in the search field, which is exposed as a role="combobox", and the highlighted option is announced through aria-activedescendant.

Features

• Derived defaults — currency, date format, number format, and first day of week, resolved live through Intl
• Dropdown with search — filter regions by English name, localized name, or region code, with a clear button
• Motion — the popup fades and slides via motion/react, honouring prefers-reduced-motion, and leaves the accessibility tree as it closes
• RTL-aware — flips direction for RTL locales (ar, he, fa, ur) via dir on the root
• Keyboard accessible — arrow keys, Home / End, Enter, and Escape navigation
• ARIA labels — role="combobox" search field with aria-activedescendant, plus aria-expanded, aria-haspopup, and aria-selected
• Themed with shadcn tokens — bg-popover, border-input, bg-accent and friends, so it inherits your theme; dark mode comes from the tokens
• Customisable — variant / size triggers plus per-part classNames (LocalePickerClassNames is exported from the barrel), with lucide-react icons throughout
• Controlled or uncontrolled — value / defaultValue / onValueChange

Examples

Controlled

<LocalePicker regions={["IN", "US", "GB", "DE", "JP"]} value={locale} onValueChange={setLocale} />

Native region names

<LocalePicker regions={["IN", "US", "GB", "DE", "JP"]} defaultValue="de-DE" label="native" />

With de-DE selected, the trigger reads "Deutschland" and the options read "Vereinigte Staaten", "Vereinigtes Königreich", and so on.

Translated UI text

The search placeholder, empty state, accessible labels and summary row labels default to English. Pass labels to translate them — any key you leave out keeps its English default. The searchPlaceholder and emptyMessage props still work, and win over labels when both are set.

"use client";

import { LocalePicker } from "@/components/ui/locale-picker";

export default function App() {
  return (
    <LocalePicker
      regions={["IN", "US", "GB", "DE", "JP"]}
      defaultValue="en-IN"
      labels={{
        searchPlaceholder: "Rechercher une région…",
        searchLabel: "Rechercher une région",
        clearSearch: "Effacer la recherche",
        emptyMessage: "Aucune région trouvée.",
        listbox: "Choisir la région",
        current: (name) => `Région actuelle : ${name}`,
        currency: "Devise",
        dateFormat: "Format de date",
        numberFormat: "Format de nombre",
        weekStart: "La semaine commence le",
      }}
    />
  );
}

Dependencies

This component uses:

• clsx and tailwind-merge (bundled as dependencies)
• lucide-react (icons)
• motion (popup animation)

Peer dependencies:

• react >= 18
• react-dom >= 18
• tailwindcss >= 3

Credits

Created by ujwalbajaj.