Locale

A locale decides how Chameleon's components write numbers and which language their built-in text is in. Set it to German and a number field shows 1.234,5 where an American user sees 1,234.5, and a screen reader announces a dialog's close button as Schließen.

What locale changes⁠

Component What changes
Number field The digit grouping and decimal separator it shows when the user isn't editing it: 1.234,5 in de-DE, 1,234.5 in en-US, 12,34,567 in en-IN
Dialog The name of its close button, which screen readers announce
Toast The name of its close button, which screen readers announce
Popover The name of the close button it offers screen readers, which isn't drawn on screen
Data table How its number, price, percentage, and date cells are written: 1.234,5 and 28.12.2025 in de-DE, 1,234.5 and 12/28/2025 in en-US. A price column's currency comes from the column's currency, never from the locale
Data grid The same as a data table

Every other component looks and sounds the same in every locale. Upcoming date fields will use locale for language and start day of the week.

Choosing the locale⁠

Each component uses the first of these that's set:

  1. The component's own locale. The number field, the data table, and the data grid have one.
  2. App configuration's locale, for every component in your app.
  3. The user's browser language.

Leave both settings empty and each user gets their own browser language. Set one when everybody must see the same format, such as a trading screen that always shows Swiss numbers.

For your app⁠

Set locale in app configuration. It applies at once, to components already on screen too.

import { setAppConfiguration } from "@materia-technologies-inc/chameleon-components-web";

setAppConfiguration({ locale: "de-CH" });
content_copy

React takes the same call, from @materia-technologies-inc/chameleon-components-react. In Blazor, set Locale on the AppConfiguration you assign in the options of AddChameleonServices().

For one component⁠

Give a number field its own locale.

<cw-number-field label="Amount" locale="de-CH"></cw-number-field>
content_copy

In React that's <CrNumberField locale="de-CH" />, and in Blazor <CbNumberField Locale="de-CH" />.

Tags in other forms⁠

A locale is a BCP 47 tag, written with a hyphen: en-US, not en_US. A tag in another form never breaks a component:

  • Chameleon reads en_US and fr_FR.UTF-8, the forms some operating systems use, as en-US and fr-FR.
  • A tag that names no language, such as C, falls back to English.

What locale doesn't do⁠

  • Right-to-left layout comes from the dir attribute on your page or an ancestor. locale="ar" alone leaves a component left-to-right, so set dir="rtl" too.
  • Chameleon doesn't read your page's lang attribute. If your page sets one, set the same tag as locale in app configuration.
  • Your own text stays as you wrote it: labels, placeholders, supporting text, and anything you put in a slot.
  • While the user edits a number field, it shows the plain number the way the browser's number input does: a period for the decimal point and no thousands separators. Its value takes the same form, so your code reads 1234.5 in every locale.
  • A data table's prices stay in the currency their column names: switching en-US to de-DE writes $1,234.50 as 1.234,50 $, not in euros.
  • Dates, prices, and other values elsewhere on your page aren't Chameleon's to format. Use the browser's Intl formatters for them.

Translations⁠

Chameleon's built-in text comes in 184 locales across 149 languages. It's machine-translated and lightly reviewed by our team.

A locale without its own translation uses its language's: fr-BE gets the French text. A language Chameleon doesn't translate gets English. Number formats come from the browser instead, so a number field formats every locale the browser knows.

If a translation reads wrong, open an issue in the Chameleon issue tracker naming the locale, the component, what the text says, and what it should say.