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/aBureau · ✓BêtaNavigation

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

Web uniquement — React, depuis @krizaka/ui/language-switch. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. Used by Orazaka, Yomizaka, Akinaza, krizaka.com.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`current`requis	`string`	—	The code of the page's language (`fr`).
`label`requis	`string`	—	The control's accessible name (“Language”, “Langue”) — passed translated.
`languages`requis	`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).

Accessibilité

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.

Clavier

Touches	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.

Bonnes pratiques

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”).

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub