Locale / Direction Provider

Sets locale (and text direction) for dates, numbers, calendars and RTL layout in everything below it.

Import

import { LocaleProvider } from '@marbleui/ui'

Props

<LocaleProvider>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
locale *required	`string`	`—`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria I18nProvider. Follow the primitive's docs for the full keyboard map.

Usage notes

Sets the locale and text direction for dates, numbers, calendars and RTL layout in everything below it. Use it when the locale should differ from the browser’s.

<LocaleProvider locale="de-DE">
  <DatePicker label="Date" />
  <FormatNumber value={1299.5} style="currency" currency="EUR" />
</LocaleProvider>

locale is a BCP 47 tag such as de-DE or ar-EG. Right-to-left locales flip the direction automatically.
It wraps children in a div with lang and dir set, using display: contents so layout is unaffected.
useLocale() is re-exported to read the current locale and direction.
It does not translate text. Supply your own translated strings.

Example source · show

import { useState } from 'react'
import { getLocalTimeZone, today } from '@internationalized/date'
import { DatePicker } from '../date-picker'
import { NumberField } from '../number-field'
import { Segment, SegmentedControl } from '../segmented-control'
import { LocaleProvider } from './locale-provider'

function Demo() {
  const [locale, setLocale] = useState('en-US')
  return (
    <div className="flex flex-col items-center gap-5">
      <SegmentedControl aria-label="Locale" value={locale} onChange={(k) => setLocale(String(k))}>
        <Segment id="en-US">English</Segment>
        <Segment id="de-DE">Deutsch</Segment>
        <Segment id="ja-JP">日本語</Segment>
        <Segment id="ar-EG">العربية</Segment>
      </SegmentedControl>
      <LocaleProvider locale={locale}>
        <div className="flex gap-3">
          <DatePicker label="Date" className="w-52" defaultValue={today(getLocalTimeZone())} />
          <NumberField label="Price" className="w-40" defaultValue={1299.5} formatOptions={{ style: 'currency', currency: 'EUR' }} />
        </div>
      </LocaleProvider>
    </div>
  )
}

export const styles = { Default: Demo }

Source: packages/ui/src/locale-provider/locale-provider.tsx

Catalog

Category: utilities
Priority: Core
Primitive: react-aria
React Aria: I18nProvider
Base UI: Direction Provider