Skip to content

Components · Reference

Editing Locale Switcher

A compact localized select for choosing which locale is being edited in multilingual forms.

Last updated September 28, 2026

Overview

editing-locale-switcher provides a small form control for switching the active editing locale in multilingual forms. It is useful for forms that store localized fields in metadata or translation maps.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/editing-locale-switcher

Features

  • Arbitrary editing locale strings with English and French defaults
  • Controlled value and onValueChange props
  • Mobile-friendly icon label with desktop text
  • In-file English and French labels with optional message overrides

Usage

tsx
import { EditingLocaleSwitcher, type EditingLocale } from "@/components/ui/editing-locale-switcher";
import { useState } from "react";

const [locale, setLocale] = useState<EditingLocale>("en");

<EditingLocaleSwitcher locale={uiLocale} value={locale} onValueChange={setLocale} />
<EditingLocaleSwitcher
  locale={uiLocale}
  locales={["en", "fr", "es"]}
  value={locale}
  onValueChange={setLocale}
  messages={{ en: { label: "Language", es: "Spanish" } }}
/>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies