Skip to content
EspañolEnglish
All components (204)

Language picker

Choice · LocalePicker · .amset-locale

What it is and when to use it

Language and currency, in the footer of a store or in the settings. They are two Select of the library; what it adds is writing them properly: each language in itself ("Català (Espanya)", "Euskara (Espainia)", "British English") and each currency with its name and its symbol ("Euro (€)"). In front of each language goes its flag (Flag), to find it at a glance; the country comes from the tag (es-MX, Mexico) or, if it does not say, from the one the language has by default (de, Germany), and it is changed with flag on the option. The flag is an aid, not the name: a language is not a country, so what is read and announced is the written name. withFlags={false} removes it.

When to use it

  • The store footer or the settings screen, where you choose which language it is shown in and which currency you pay in.
  • Without currencies (or without onCurrencyChange) only the language is chosen.
  • name on an option takes precedence over the one the browser provides: "Català" instead of "Català (Espanya)".
  • size and variant reach both selects, as in any field: in a store footer sm and ghost or soft are usual. disabled turns off both.

When not to

  • Any other list of options: Select.
  • Setting the language in which dates and amounts are formatted: that is LocaleProvider (or AmsetProvider), not a field.

Keyboard: that of two Select: Tab reaches each trigger; Enter, Space or the arrow keys open the list; typing jumps to the option; Enter chooses, Escape closes and focus returns to the trigger.

Accessibility: each select carries its label in view ("Language" and "Currency", or those of localeLabel and currencyLabel). Currency names are written in the chosen language. The flags are decorative (aria-hidden): the option is named by its name, not by its flag.

Fine-tuning: --amset-locale-slot (the separation between the two selects, which grows with size) and --amset-locale-width (what each one asks for before wrapping to another line: 8, 10 or 12 rem). Each select shares the field variables, --amset-field-*.

What it looks like

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

Amount: 1234,56 €

Order paid

October, 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="Delivery" defaultValue={{ year: 2026, month: 10, day: 24 }} />
  <Calendar label="October" defaultFocusedValue={{ year: 2026, month: 10, day: 24 }} />
</LocaleProvider>

Props

Import it with import { LocalePicker } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
localerequiredstringThe chosen language (BCP-47), controlled from outside with `onLocaleChange`.
localesrequiredreadonly LocaleOption[]—
onLocaleChangerequired(label: string) => void—
classNamestringMerged with the library classes; it does not replace them.
currenciesreadonly CurrencyOption[]Without currencies (or without `onCurrencyChange`), only the language is chosen.
currencystringThe chosen currency (ISO 4217), controlled from outside with `onCurrencyChange`.
currencyLabelstring—
disabledboolean—
localeLabelstring—
onCurrencyChange(code: string) => void—
size"sm" | "md" | "lg"—
variantFieldVariant—
withFlagsbooleanThe flag of each language in front of its name. By default yes; with `false` only the name.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-locale-slotvar(--amset-space-3)
--amset-locale-width10rem

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: