Selector de idioma en píldora

Selector de idioma animado en estilo píldora para React, con navegación por teclado y compatibilidad con RTL.

Instalación

npx shadcn@latest add @babelize/language-switcher-pill

Uso

"use client";

import { useState } from "react";
import { LanguageSwitcherPill } from "@/components/ui/language-switcher-pill";

const locales = [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "ar", label: "العربية", rtl: true }, // rtl auto-detected, override optional
];

export function LocalePill() {
  const [locale, setLocale] = useState("en");

  return (
    <LanguageSwitcherPill
      locales={locales}
      locale={locale} // omit for uncontrolled, use defaultLocale instead
      onLocaleChange={setLocale}
    />
  );
}

Props

Prop	Tipo	Obligatorio	Descripción
`locales`	`Locale[]`	Sí	Array de configuraciones regionales disponibles; solo `code` es obligatorio
`locale`	`string`	No	Código de configuración regional seleccionado: pásalo para controlar el componente
`defaultLocale`	`string`	No	Código de configuración regional inicial cuando no está controlado (predeterminado: código de la primera configuración regional)
`onLocaleChange`	`(code: string) => void`	No	Callback que se ejecuta cuando cambia la configuración regional seleccionada
`variant`	`"default" \| "outline"`	No	Riel segmentado sin borde o con borde (predeterminado: `"default"`)
`size`	`"sm" \| "default" \| "lg"`	No	Tamaño de la píldora (predeterminado: `"default"`)
`showFlags`	`boolean`	No	Muestra el emoji de bandera de cada configuración regional antes de su etiqueta (predeterminado: `false`)
`disabled`	`boolean`	No	Desactiva todas las píldoras
`aria-label`	`string`	No	Etiqueta accesible del grupo de radio (predeterminado: `"Select language"`)
`classNames`	`LanguageSwitcherPillClassNames`	No	Sustituciones de clases por parte; consulta más abajo
`className`	`string`	No	Clases CSS adicionales para el contenedor de píldoras

El resto de las props de div se reenvían al elemento raíz.

Nombres de clase

Cada parte admite sus propias clases, que se combinan después de los valores predeterminados, para que puedas cambiar el estilo de una pieza sin bifurcar el componente:

Slot	Elemento
`root`	El riel que contiene todas las píldoras
`item`	Cada píldora de configuración regional
`activeItem`	Solo la píldora seleccionada
`indicator`	El indicador con animación de resorte detrás de la píldora
`flag`	La bandera que se muestra cuando `showFlags` está definido

<LanguageSwitcherPill
  locales={locales}
  classNames={{
    indicator: "bg-primary",
    activeItem: "text-primary-foreground",
  }}
/>

El componente usa los tokens de tema de shadcn/ui (bg-muted, bg-background, text-muted-foreground, ring-ring), así que adopta tu tema automáticamente.

Objeto de configuración regional

Propiedad	Tipo	Descripción
`code`	`string`	Código ISO 639-1 / BCP 47 (p. ej. `"en"`, `"fr"`, `"ar"`) — obligatorio
`label`	`string`	Nombre visible para la píldora de idioma
`flag`	`string`	Emoji de bandera que se muestra con `showFlags` (se resuelve automáticamente si se omite)
`rtl`	`boolean`	Sustituye la dirección RTL para el formateo de texto (se detecta automáticamente si se omite)

Ejemplos

Con el SDK de Babelize

Combina el selector de idioma en píldora con el SDK de Babelize para traducciones automáticas:

"use client";

import { useRouter } from "next/navigation";
import { LanguageSwitcherPill } from "@/components/ui/language-switcher-pill";
import { useBabelize } from "@babelize/sdk/react";

const locales = [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "es", label: "Español" },
  { code: "de", label: "Deutsch" },
  { code: "ar", label: "العربية" },
];

export function LocaleSwitcher() {
  const router = useRouter();
  const { locale, setLocale } = useBabelize();

  return (
    <LanguageSwitcherPill
      locales={locales}
      locale={locale}
      onLocaleChange={(code) => {
        setLocale(code);
        router.push(`/${code}`);
      }}
    />
  );
}

Con next-intl

"use client";

import { useRouter } from "next/navigation";
import { LanguageSwitcherPill } from "@/components/ui/language-switcher-pill";

export function LocaleSwitcher() {
  const router = useRouter();

  return (
    <LanguageSwitcherPill
      locales={[
        { code: "en", label: "EN" },
        { code: "fr", label: "FR" },
        { code: "de", label: "DE" },
      ]}
      defaultLocale="en"
      onLocaleChange={(code) => router.push(`/${code}`)}
    />
  );
}

Con react-i18next

"use client";

import { useTranslation } from "react-i18next";
import { LanguageSwitcherPill } from "@/components/ui/language-switcher-pill";

export function LocaleSwitcher() {
  const { i18n } = useTranslation();

  return (
    <LanguageSwitcherPill
      locales={[
        { code: "en", label: "English" },
        { code: "fr", label: "Français" },
        { code: "es", label: "Español" },
      ]}
      locale={i18n.language}
      onLocaleChange={(code) => i18n.changeLanguage(code)}
    />
  );
}

Variantes y tamaños

<LanguageSwitcherPill locales={locales} variant="outline" size="sm" showFlags />
<LanguageSwitcherPill locales={locales} size="lg" />

Flecha derecha — Pasa al siguiente idioma (el anterior en diseños RTL).
Flecha izquierda — Pasa al idioma anterior (el siguiente en diseños RTL).
Inicio — Pasa al primer idioma.
Fin — Pasa al último idioma.
Intro / Espacio — Selecciona el idioma enfocado.

Soporte de RTL

El componente admite idiomas que se escriben de derecha a izquierda, como árabe, hebreo, persa, urdu, pastún, sindhi y yidis.

La dirección de cada configuración regional se aplica a cada píldora para un formateo de texto correcto, mientras que el diseño general y la navegación con flechas respetan el dir del documento o del contenedor.

const locales = [
  { code: "en", label: "English" },
  { code: "ar", label: "العربية", rtl: true },
  { code: "he", label: "עברית", rtl: true },
];

<LanguageSwitcherPill locales={locales} defaultLocale="en" />;