Internationalization

LoomiUI ships with built-in translations for 10 locales, covering common interface text such as placeholders, validation messages, ARIA labels, pagination text, and month and weekday names used by the date picker.

Any text you provide directly on a component always overrides the active locale. For component-specific customization, continue using attributes such as label, placeholder, and ok-button-label.

This guide explains how to configure locales and apply them throughout your application.

Translating or modifying LoomiUI’s built-in interface strings is a contributor task. See the full i18n guide on GitHub for instructions.

Set a locale for the whole page

Use setLoomiLocale() during app startup (before components mount) to set the default language for the entire page. All LoomiUI components that support translations will use this locale automatically:

import { setLoomiLocale } from "@loomidev/core";
import "@loomidev/datepicker";
import "@loomidev/filepicker";

setLoomiLocale("fr");

Set a locale on one component

Need a different language for just one component? Set its locale attribute. This overrides the page default only for that specific instance:

<loomi-datepicker locale="de"></loomi-datepicker>
<loomi-filepicker locale="pt_BR"></loomi-filepicker>

Built-in locales

LoomiUI includes the following built-in locales out of the box. If a locale or translation key is missing, LoomiUI automatically falls back to English so your UI still renders complete text.

Locale code	Language
en	English
ar	Arabic
de	German
es	Spanish
fr	French
it	Italian
ml	Malayalam
pt_BR	Portuguese (Brazil)
tr	Turkish
zh_CN	Chinese (Simplified, China)

Add or override copy at runtime

Need to customize existing translations or add a new language without forking LoomiUI? Use defineLoomiTranslations() at runtime.

Provide only the translation keys you want to override. LoomiUI automatically falls back to the default locale for any keys you don’t specify.

import { defineLoomiTranslations, setLoomiLocale } from "@loomidev/core";

defineLoomiTranslations("hi", {
  datepicker: {
    placeholder: "तारीख़ चुनें",
    monthsShort: ["जन", "फ़र", "मार्च", "अप्रै", "मई", "जून", "जुला", "अग", "सित", "अक्तू", "नव", "दिस"],
    weekdaysShort: ["रवि", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"],
  },
  filepicker: {
    placeholderLine1: "फ़ाइल चुनें या यहाँ खींचें",
    placeholderLine2: "%s से %s तक",
  },
});

setLoomiLocale("hi");

Datepicker locales can also supply monthsShort, monthsLong, and weekdaysShort arrays for fully custom month and weekday names.

Locale and text direction

The locale setting controls language-specific content, including UI strings and date formatting. It does not change the layout direction.

For example, locale="ar" displays Arabic translations, but components remain left-to-right unless RTL is enabled separately.

To use a right-to-left layout, configure RTL independently. See RTL Support for details.