Locale Settings

The Language & region section of settings: a language listed by its own name, a region that drives every Automatic format, a time zone, then date format, 12 or 24-hour time, first day of the week, number separators and currency. A live preview with a week strip and a sample under each row are formatted with Intl from the draft, Detect from browser fills it all, and a save bar holds changes.

Tags: language region locale timezone date-format settings i18n
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)
Installs with: @assembli/timezone-select @assembli/unsaved-changes-bar

Props

Other props pass through to the root element.

defaultValue*
LocaleValue
onSave
(value: LocaleValue) => Promise<unknown> | void
Persist the settings. Reject to keep the changes and show the error in the save bar.
languages
LocaleLanguage[]
Default LOCALE_LANGUAGES
regions
LocaleRegion[]
Default LOCALE_REGIONS
currencies
string[]
Default LOCALE_CURRENCIES
sample
string | number | Date
The moment the previews show. Defaults to the reader's clock.
sampleAmount
number
Default 1234.56
Amount shown in the number and currency previews.
barStrategy
"fixed" | "absolute"
Default "fixed"
fixed floats the save bar over the viewport; absolute pins it to the nearest positioned ancestor.
title
React.ReactNode
Default "Language & region"
description
React.ReactNode
Default "Choose the language Northwind speaks and how dates, times …

Props
			Description
defaultValue*	LocaleValue	–
onSave	(value: LocaleValue) => Promise<unknown> \| void	–	Persist the settings. Reject to keep the changes and show the error in the save bar.
languages	LocaleLanguage[]	LOCALE_LANGUAGES
regions	LocaleRegion[]	LOCALE_REGIONS
currencies	string[]	LOCALE_CURRENCIES
sample	string \| number \| Date	–	The moment the previews show. Defaults to the reader's clock.
sampleAmount	number	1234.56	Amount shown in the number and currency previews.
barStrategy	"fixed" \| "absolute"	"fixed"	`fixed` floats the save bar over the viewport; `absolute` pins it to the nearest positioned ancestor.
title	React.ReactNode	"Language & region"
description	React.ReactNode	"Choose the language Northwind speaks and how dates, times …