Translate and localize

For the whole app: LocaleProvider

LocaleProvider sets the language and the text of every component below it. Give only the texts you want to change; the others keep their English defaults. Texts that depend on a number or a name are functions.

import { LocaleProvider } from "oks-ui/locale";
import { ToastProvider } from "oks-ui/toast";

<LocaleProvider
  locale="de"
  labels={{
    modal: { close: "Schließen" },
    pagination: { previous: "Zurück", next: "Weiter" },
    sortable: { handle: (name) => `${name} verschieben` },
    validation: { required: "Pflichtfeld", minLength: (min) => `Mindestens ${min} Zeichen` },
  }}
>
  <ToastProvider>
    <App />
  </ToastProvider>
</LocaleProvider>

locale is a BCP 47 tag such as de, en-GB or hi-IN. It sets month and weekday names and the first day of the week in Calendar and the date picker. Providers can be nested, so one part of a page can use another language. Put LocaleProvider outside ToastProvider so toasts can read it.

For one component: the labels prop

Every component that writes text has a labels prop with the same keys the provider uses.

<Modal isOpen={open} onClose={close} labels={{ close: "Fermer" }} />
<MediaLibrary items={items} labels={{ search: "Rechercher", noResults: (q) => `Aucun résultat pour « ${q} »` }} />

Which text wins

From strongest to weakest:

1. A component’s own text prop, where it has one (closeLabel, placeholder, getValueText).
2. The component’s labels prop.
3. The nearest LocaleProvider.
4. The English defaults.

Existing props keep working as before, so nothing changes for an app that does not use this.

Validation messages

labels.validation takes the same map as the messages prop of Form. A message is a string or a function of the rule’s argument. A field’s own message wins, then the form’s messages, then the provider, then setValidationMessages, then the defaults. Validation on a server (oks-ui/validation) does not read the provider, so pass messages to it.

Dates

Calendar and DatePickerField also take locale and weekStartsOn (0 for Sunday, 1 for Monday) directly, and these win over the provider. With a locale and no weekStartsOn, the week starts on that language’s usual first day where the browser knows it.

<Calendar locale="de" />            // März 2026, week starts on Monday
<Calendar locale="en-US" />         // March 2026, week starts on Sunday