Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Selector de idioma

Elección · LocalePicker · .amset-locale

Qué es y cuándo usarlo

Idioma y moneda, en el pie de una tienda o en los ajustes. Son dos Select de la biblioteca; lo que aporta es escribirlos bien: cada idioma en sí mismo («Català (Espanya)», «Euskara (Espainia)», «British English») y cada moneda con su nombre y su símbolo («Euro (€)»). Delante de cada idioma va su bandera (Flag), para encontrarlo de un vistazo; el país sale de la etiqueta (es-MX, México) o, si no lo dice, del que el idioma tiene por defecto (de, Alemania), y se cambia con flag en la opción. La bandera es ayuda, no el nombre: un idioma no es un país, así que lo que se lee y se anuncia es el nombre escrito. withFlags={false} la quita.

Cuándo usarlo

  • El pie de la tienda o la pantalla de ajustes, donde se elige en qué idioma se ve y en qué moneda se paga.
  • Sin currencies (o sin onCurrencyChange) solo se elige el idioma.
  • name en una opción manda sobre el que pone el navegador: «Català» en vez de «Català (Espanya)».
  • size y variant llegan a los dos selectores, como en cualquier campo: en el pie de una tienda suele ir sm y ghost o soft. disabled apaga los dos.

Cuándo no

  • Cualquier otra lista de opciones: Select.
  • Fijar el idioma en que se formatean las fechas y los importes: eso es LocaleProvider (o AmsetProvider), no un campo.

Teclado: el de dos Select: Tab llega a cada disparador; Intro, Espacio o las flechas abren la lista; escribir salta a la opción; Intro elige, Escape cierra y el foco vuelve al disparador.

Accesibilidad: cada selector lleva su etiqueta a la vista («Idioma» y «Moneda», o las de localeLabel y currencyLabel). Los nombres de las monedas se escriben en el idioma elegido. Las banderas son decorativas (aria-hidden): la opción se llama por su nombre, no por su bandera.

Aspecto fino: --amset-locale-slot (la separación entre los dos selectores, que crece con size) y --amset-locale-width (lo que pide cada uno antes de bajar a otra línea: 8, 10 o 12 rem). Cada selector comparte las variables de los campos, --amset-field-*.

Cómo se ve

Español de España
American English
Français (France)
Deutsch (Deutschland)

Importe: 1234,56 €

Pedido pagado

Octubre, octubre de 2026

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

const [idioma, setIdioma] = useState('es-ES')

<LocalePicker
  locales={[{ key: 'es-ES' }, { key: 'en-US' }, { key: 'fr-FR' }, { key: 'de-DE' }]}
  locale={idioma}
  onLocaleChange={setIdioma}
/>
<LocaleProvider locale={idioma}>
  <Amount quantity={1234.56} />
  <RelativeTime date="2026-10-01T10:00:00+02:00" />
  <DatePicker label="Entrega" defaultValue={{ year: 2026, month: 10, day: 24 }} />
  <Calendar label="Octubre" defaultFocusedValue={{ year: 2026, month: 10, day: 24 }} />
</LocaleProvider>

Props

Se importa con import { LocalePicker } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
localeobligatoriastringEl idioma elegido (BCP-47), controlado desde fuera con `onLocaleChange`.
localesobligatoriareadonly LocaleOption[]—
onLocaleChangeobligatoria(label: string) => void—
classNamestringSe une a las clases de la biblioteca, no las sustituye.
currenciesreadonly CurrencyOption[]Sin monedas (o sin `onCurrencyChange`), solo se elige idioma.
currencystringLa moneda elegida (ISO 4217), controlada desde fuera con `onCurrencyChange`.
currencyLabelstring—
disabledboolean—
localeLabelstring—
onCurrencyChange(code: string) => void—
size"sm" | "md" | "lg"—
variantFieldVariant—
withFlagsbooleanLa bandera de cada idioma delante de su nombre. Por defecto si; con `false` solo el nombre.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

VariablePor defecto
--amset-locale-slotvar(--amset-space-3)
--amset-locale-width10rem

Cómo se cambia

.amset-locale {
  --amset-locale-slot: ...;
  --amset-locale-width: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: