build69
build69  /  Components  /  Navigation  /  LanguageSwitcher

LanguageSwitcher

v1.0.14Updated 19 Oct 2026

Locale selector in menu or select form. Controlled, or drop-in via LocaleController which owns the locale state and renders LocaleProvider. Switching reformats every build69 date/number/currency via Intl.

View source← Back to catalog

Preview

Live · 6 stories
DefaultOpen ↗
▸Why this is recommendedlanguagelocalei18nswitcher+3

The default, out-of-the-box LanguageSwitcher.

Recommended for+14
  • ✓App bars / site headers
  • ✓Settings > language
  • ✓Multi-locale apps
Tags+6
languagelocalei18nswitchertranslationnavigationdefault
Features+4
  • menu (Globe) or select variant
  • Controlled or LocaleController-driven
  • Optional flag glyphs
  • Drives LocaleProvider (Intl date/number/currency, Buddhist calendar)
  • i18n: labels prop overrides the trigger aria-label; option text is each locale label; merged over DEFAULT_LANGUAGE_SWITCHER_LABELS
Not recommended for−2
  • ✕Single-locale apps
  • ✕Region/currency-only selection

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "LanguageSwitcher" })

Usage

import { LanguageSwitcher } from '@/components/navigation/language-switcher';
import { LocaleController } from '@/lib/locale-controller';

<LocaleController locales={LOCALES}>
  <LanguageSwitcher />
</LocaleController>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
locales

Selectable languages (falls back to a surrounding LocaleController)

LocaleOption[]—
value

Controlled active locale code

string—
onValueChange

Called with (code, option)

function—
variant

Interaction form (default "menu")

'menu' | 'select'—
showFlags

Show each option flag glyph (default true)

boolean—
labels

Override built-in UI strings (i18n): trigger aria-label. Merged over DEFAULT_LANGUAGE_SWITCHER_LABELS

Partial<LanguageSwitcherLabels>—
surface

What surface this control is sitting on. "auto" (default) reads the surrounding container: AppBar declares "sidebar" for its actions row, so a control dropped there colours itself for the dark bar instead of needing text-sidebar-foreground classes passed in. "default" opts out; "sidebar" asks for the dark treatment anywhere, for a host’s own dark bar or hero. The resolved value is on the element as data-surface. MCP feedback fb_4bdd6c1e.

"auto" | "default" | "sidebar"—

Related

Platform docsAll componentsSource files