numora.

Overview
Features
Integrations
XGitHub

Locale

The locale prop auto-detects thousand and decimal separators via Intl.NumberFormat. Grouping style is still controlled separately by thousandStyle.

Browser locale (auto-detect)

Pass locale: true to detect both separators from the browser's current locale. Explicit thousandSeparator or decimalSeparator values always take priority over locale-detected ones.

typescript
import { NumoraInput, ThousandStyle } from 'numora'

// Both separators auto-detected from browser locale
// de-DE → thousandSeparator: '.', decimalSeparator: ','
// en-US → thousandSeparator: ',', decimalSeparator: '.'
// fr-FR → thousandSeparator: '\u202f', decimalSeparator: ','
const input = new NumoraInput(container, {
  locale: true,
  thousandStyle: ThousandStyle.Thousand,
})

// Override decimal separator while keeping locale thousand separator
const input2 = new NumoraInput(container, {
  locale: true,
  thousandStyle: ThousandStyle.Thousand,
  decimalSeparator: '.',
})

Specific locale tag

Pass a BCP 47 locale tag to pin separators to a specific locale - useful for SSR or server-driven locale handling.

typescript
import { NumoraInput, ThousandStyle } from 'numora'

// Pinned to German locale: thousandSeparator '.', decimalSeparator ','
const input = new NumoraInput(container, {
  locale: 'de-DE',
  thousandStyle: ThousandStyle.Thousand,
})

getSeparatorsFromLocale

For pre-computing separators and passing them explicitly:

typescript
import { NumoraInput, getSeparatorsFromLocale } from 'numora'

const { thousandSeparator, decimalSeparator } = getSeparatorsFromLocale('de-DE')
// → { thousandSeparator: '.', decimalSeparator: ',' }

getSeparatorsFromLocale('en-US')
// → { thousandSeparator: ',', decimalSeparator: '.' }

getSeparatorsFromLocale('fr-FR')
// → { thousandSeparator: '\u202f', decimalSeparator: ',' }

const input = new NumoraInput(container, { thousandSeparator, decimalSeparator })

For decimal separator configuration without locale detection, see Decimals.