ロケールピッカー

インストール

npx shadcn@latest add @babelize/locale-picker

使い方

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

選択された値は完全な BCP 47 タグです。 その 地域 サブタグは選んだ地域になり、言語 サブタグは地域を変更しても保持されます。 en-IN からドイツを選ぶと en-DE になり、fr-JP から選ぶと fr-DE になります。

導出されるデフォルト値

サマリーカードは、選択中のロケールから Intl を通じてすべての値を導出します。 通貨コードには ISO 4217 のフォールバックテーブルのみを同梱しており、それ以外のデータは同梱していません:

通貨の対応付けがない地域では、推測せずにダッシュ（—）を表示します。

キーボード操作

ポップアップは WAI-ARIA のコンボボックスパターンに従います。 フォーカスは検索欄に留まり、検索欄は role="combobox" として公開されます。 ハイライトされた選択肢は aria-activedescendant を通じて読み上げられます。

機能

• 導出されるデフォルト値 — 通貨、日付の書式、数値の書式、週の開始曜日を Intl を通じてリアルタイムに解決します
• 検索付きドロップダウン — 英語名、ローカライズされた名前、地域コードで絞り込めます。クリアボタン付き
• モーション — ポップアップは motion/react を介してフェードとスライドで表示され、prefers-reduced-motion を尊重します。閉じるときはアクセシビリティツリーから削除されます
• RTL 対応 — ルートの dir を通じて、RTL のロケール（ar、he、fa、ur）の方向を切り替えます
• キーボードでの操作に対応 — 矢印キー、Home / End、Enter、Escape で操作可能
• ARIA ラベル — aria-activedescendant を持つ role="combobox" 検索欄に加え、aria-expanded、aria-haspopup、aria-selected
• shadcn のトークンでテーマ設定 — bg-popover、border-input、bg-accent など。お使いのテーマを継承します。ダークモードはトークンから適用されます
• カスタマイズ可能 — variant / size のトリガーと、パーツごとの classNames（LocalePickerClassNames はバレルファイルからエクスポートされています）。アイコンはすべて lucide-react を使用します
• 制御または非制御 — value / defaultValue / onValueChange

使用例

制御

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

ネイティブの地域名

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

de-DE を選択すると、トリガーには「Deutschland」と表示され、選択肢には「Vereinigte Staaten」「Vereinigtes Königreich」などと表示されます。

翻訳された UI テキスト

検索欄のプレースホルダー、空の状態、アクセシブルなラベル、サマリー行のラベルは、デフォルトで英語です。 翻訳するには labels を渡します。 省略したキーは英語のデフォルトのままになります。 searchPlaceholder と emptyMessage の props も引き続き使用でき、両方が設定されている場合は labels より優先されます。

"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",
      }}
    />
  );
}

依存関係

このコンポーネントは次を使用しています:

• clsx と tailwind-merge（dependencies としてバンドル）
• lucide-react（アイコン）
• motion（ポップアップのアニメーション）

peerDependencies:

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

クレジット

作成者: ujwalbajaj。