Language switch

The one language control of the family: a globe and the current code (FR) that opens a short list of the languages, each named in its own language (Français · English), as links with hreflang to the same page.

Web · ✓Mobile · n/aDesktop · ✓BetaNavigation

import { LanguageSwitch, languagesFor } from "@krizaka/ui/language-switch";

Web only — React, from @krizaka/ui/language-switch. Beta: its API may still change in a minor version.

Mobile · n/a. An app on a phone follows the system language, with a choice in its settings. → Settings layout

Why it is here. Used by Orazaka, Yomizaka, Akinaza, krizaka.com.

When to use

In the bar of every Krizaka site and in the header of an app, between the theme and the account: NavBar.Language places it.
As a row (variant="inline") in the mobile panel's preferences or in a settings page.

When not to use

To switch a view of the same language (a tab, a unit): it is not a language.Use instead: Tabs
A pill that names the other language (“English” on a French page): it says what you are not in.Use instead: Language switch

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { LanguageSwitch, languagesFor } from "@krizaka/ui/language-switch";

Examples

A globe and FR; the menu lists Français and English, each in its own language.

In a panel

The same languages as a row, for the mobile panel's preferences.

English Français

Props

The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code (FR) — that opens a menu of the languages named in their own language (Français · English), each a link with hreflang to the same page. It shows the language you are in, never the “other” one. variant="inline" lays the languages in a row for a phone's panel or a settings page.

Prop	Type	Default	Description
`current`required	`string`	—	The code of the page's language (`fr`).
`label`required	`string`	—	The control's accessible name (“Language”, “Langue”) — passed translated.
`languages`required	`readonly Language[]`	—	The languages offered, each with its name in its own language and the address of the same page (`languagesFor`).
`className`	`string`	—	Classes of the control.
`defaultOpen`	`boolean`	`false`	Opens the menu at first render (a story, a screenshot).
`linkAs`	`ElementType<any, keyof IntrinsicElements>`	—	Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise.
`variant`	`"menu" \| "inline"`	`menu`	`menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).

Accessibility

A disclosure, not a menu: the trigger says aria-expanded and aria-controls, and is named “Language: Français” (the label and the current language), not by its code alone.
Each item is a link with hreflang and lang; the current one says aria-current="true" and a check.
variant="inline" is a group named by label of plain links, current one marked by aria-current.

Keyboard

Keys	Action
`Enter / Space`	Opens or closes the list of languages.
`↓`	Opens the list and moves to the current language.
`↑ / ↓ · Home / End`	Walks the languages.
`Enter`	Follows the link to the page in that language.
`Esc`	Closes the list and returns the focus to the trigger; Tab out and a press outside close it too.

Best practices

Name every language in its own language (Français, English), never “French” on a French page: languagesFor(path) does it.
Show the language you are in (FR), not the one you could go to.
Link to the same page in the other language: languageHref(path, to) swaps the locale segment and keeps the query and the hash.
Pass your router's <Link> as linkAs so the navigation stays client-side; the hreflang and lang attributes are set for you.
Pass label translated (“Langue”).

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub