Segmented pill locale picker with a spring-animated indicator. Accessible radio group with RTL-aware arrow keys, optional flags, two variants, three sizes.
"use client";
import * as React from "react";
import { LanguageSwitcherPill, type Locale } from "@/components/ui/language-switcher-pill";
const locales: Locale[] = [
{ code: "en", label: "EN" },
{ code: "fr", label: "FR" },
{ code: "de", label: "DE" },
{ code: "ja", label: "日本" },
{ code: "ar", label: "عربي" },
];
const greetings: Record<string, string> = {
en: "Welcome back, Sarah",
fr: "Bon retour, Sarah",
de: "Willkommen zurück, Sarah",
ja: "おかえりなさい、Sarahさん",
ar: "مرحبًا بعودتك يا سارة",
};
export default function LanguageSwitcherPillDemo() {
const [locale, setLocale] = React.useState("en");
return (
<div className="flex min-h-[320px] w-full flex-col items-center justify-center gap-10 bg-background p-6">
<div className="flex flex-col items-center gap-4">
<LanguageSwitcherPill locales={locales} locale={locale} onLocaleChange={setLocale} />
<p
lang={locale}
dir={locale === "ar" ? "rtl" : "ltr"}
className="text-lg font-medium text-foreground"
>
{greetings[locale]}
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-4">
<LanguageSwitcherPill
aria-label="Select language (outline, with flags)"
locales={locales}
defaultLocale="fr"
variant="outline"
size="sm"
showFlags
/>
<LanguageSwitcherPill
aria-label="Select language (large)"
locales={locales.slice(0, 3)}
defaultLocale="de"
size="lg"
/>
</div>
</div>
);
}
Part of Babelize Elements — browse the full library on 21st.dev.