Language Switcher

Beta

Get Ritla UI

Switches the interface language: a menu, a two-option toggle, or one button to the other language.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add language-switcher
Also works with shadcn: npx shadcn@latest add @ritla/language-switcher
Dependencies it brings
@phosphor-icons/react@base-ui/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

language-switcher.tsx

import { LanguageSwitcher } from "@/components/ui/language-switcher";<LanguageSwitcher label="Language" value={lang} onValueChange={setLang} languages={[{ code: "ar", label: "العربية", short: "ع" }, { code: "en", label: "English", short: "EN" }]} />

API reference

LanguageSwitcher

Prop	Type	Default	Description
`languages`	`LanguageOption[]`	None	Each language: `code`, `label` in its own language, and `short`.
`value / onValueChange`	`string / (code) => void`	None	The current language.
`variant`	`"menu" \| "toggle" \| "pill"`	`"menu"`	Figma's Style.
`label`	`string`	None	The control's name in the page's language.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`EnterSpace`	Opens the menu or chooses.
`ArrowDownArrowUp`	Moves between languages in the menu.
`ArrowRightArrowLeft`	In the toggle: chooses the next or previous language, next to the left in Arabic. The toggle is one Tab stop.

ARIA

Each language is written in itself and carries lang, so screen readers pronounce it right.
The menu holds radio items, and the toggle is a radiogroup.

Arabic and RTL notes

Mirrors

The trigger and menu mirror, and the menu opens from the right.

Does not mirror

The globe and the check don't mirror.

Numerals: It holds no numbers.
Arabic typography: Arabic sets in IBM Plex Sans Arabic even on an English page, thanks to lang.