LocaleSwitcher

stable

Locale selection dropdown with flag, native name, BCP 47 code, and RTL indicator. Two variants: compact (icon+code) and full (flag+name).

NavigationInteractive/Storybook ↗

import { LocaleSwitcher } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`value`req	`string`	—	Current locale code (BCP 47)
`onChange`req	`(locale: string) => void`	—	Called when the user selects a new locale
`variant`	`"compact" \| "full"`	"full"	compact: flag + code; full: flag + native name
`locales`	`LocaleOption[]`	—	Available locales. Defaults to DS_LOCALES (7 locales: en-US, ar-SA, he-IL, zh-CN, ja-JP, de-DE, fr-FR)
`disabled`	`boolean`	false	Disable the switcher
`label`	`string`	"Switch locale"	aria-label for the trigger button

valuerequired

Type stringDefault —

Current locale code (BCP 47)

onChangerequired

Type (locale: string) => voidDefault —

Called when the user selects a new locale

variant

Type "compact" | "full"Default "full"

compact: flag + code; full: flag + native name

locales

Type LocaleOption[]Default —

Available locales. Defaults to DS_LOCALES (7 locales: en-US, ar-SA, he-IL, zh-CN, ja-JP, de-DE, fr-FR)

disabled

Type booleanDefault false

Disable the switcher

label

Type stringDefault "Switch locale"

aria-label for the trigger button

Design Rationale

This component was designed to express:

Colored label for status, trust level, or category

Button group for switching between related views

Was this helpful?