All components (204)

Locale provider

More · LocaleProvider

What it is and when to use it

Sets the language of the components that format data: dates, times, numbers and amounts, and which way they are written (a right-to-left language flips sliders and calendars). locale is a BCP-47 tag; by default, es-ES: day, month and year, week starting on Monday and decimal comma. Without a provider, the components also use es-ES, not the browser's language: that way a date does not come out backwards (10/15/2026) on an English-language machine.

When to use it

Once, at the top of the tree, when the application is not in es-ES. If AmsetProvider is already there, it is not needed: it carries one inside (with its locale prop).
Inside another one, for a part of the page in another language: the closest one rules.

When not to

For the person to choose a language: that is LocalePicker, and what they choose is what is then passed here.
To translate the application's texts: this formats, it does not translate.

Keyboard: it has none, it is a provider.

Accessibility: date segments and numbers are read in the language set here. What the library writes with its own words (for example, "Open calendar" in the date picker) stays in Spanish.

Fine-tuning: it draws nothing.

What it looks like

Spanish (Spain)

1234,56 €

Delivery (es-ES)

24102026

English (United States)

€1,234.56

Delivery (en-US)

10242026

German (Germany)

1.234,56 €

Delivery (de-DE)

24102026

<LocaleProvider locale="en-US">
  <Amount quantity={1234.56} />
  <DatePicker label="Delivery" defaultValue={{ year: 2026, month: 10, day: 24 }} />
</LocaleProvider>

Props

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

Prop	Type	What it does
`children`required	`ReactNode`	—
`catalogs`	`Readonly<Record<string, CatalogSource>>`	Whole languages written by the application, by BCP-47 tag. Each one is the JSON (`{ fr, 'pt-BR': ptBR }`) or a function that loads it only when used (`{ fr: () => import('./fr.json') }`), so a language nobody asks for weighs nothing. The one for the active `locale` is used, and any text it lacks falls back to English key by key; while a lazy one is arriving, the library's texts are shown. The key template is in `@amset/ui/locales/es.json`.
`locale`	`string`	BCP-47 tag. `es-ES` by default.
`messages`	`MessageOverrides`	Your own texts, which take precedence over the library's (for example `{ 'Alert.closeLabel': 'Dismiss' }`). Languages the library does not ship fall back to English; use this to change whatever is needed. They take precedence over those in `catalogs`.
`onCatalogError`	`CatalogErrorHandler`	Called if a lazy catalog could not be loaded (network, broken path). In the meantime the library's own texts are shown.

In the test bench

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