Locale Field

Forms · LocaleField, LocaleSwitcher, WorkspaceSwitcher

Content in several languages and switching context: LocaleField, LocaleSwitcher, WorkspaceSwitcher.

LocaleField: label, locales ({code, label, flag}), value / defaultValue ({[code]: text}) + onChange, source (language others copy from; default the first), active, multiline, rows, onTranslate(text, to) (return or resolve the translation), hint, error. Missing languages carry a warn diamond; empty fields show the source text as placeholder.
LocaleSwitcher: languages ({code, label, short, flag}), language / onLanguage, currencies, currency / onCurrency, variant ("frame" for the dark top bar).
WorkspaceSwitcher: items ({id, name, sub, tint, logo}), value / onChange, label, footer, variant ("frame").

PreviewCode

Product name

2 of 4

Short description

1 of 2

Props

LocaleField

Prop	Type	Notes
`label?`	`ReactNode`
`locales`	`{ code: string; label?: string; flag?: string }[]`	Required
`value?`	`Record<string, string>`
`defaultValue?`	`Record<string, string>`
`onChange?`	`(v: Record<string, string>) => void`
`source?`	`string`
`active?`	`string`
`multiline?`	`boolean`
`rows?`	`number`
`placeholder?`	`string`
`onTranslate?`	`(text: string, to: string) => string \| Promise<string>`
`hint?`	`ReactNode`
`error?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

LocaleSwitcher

Prop	Type	Notes
`languages?`	`{ code: string; label: string; short?: string; flag?: string }[]`
`language?`	`string`
`onLanguage?`	`(code: string) => void`
`currencies?`	`string[]`
`currency?`	`string`
`onCurrency?`	`(c: string) => void`
`variant?`	`"frame"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

WorkspaceSwitcher

Prop	Type	Notes
`items`	`{ id: string; name: string; sub?: string; tint?: Tint; logo?: ReactNode }[]`	Required
`value?`	`string`
`onChange?`	`(id: string) => void`
`label?`	`string`
`footer?`	`ReactNode`
`variant?`	`"frame"`
`width?`	`number`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.