LanguageSwitch

A short row of language codes for a top bar. With onChange it switches in place; with href on each language it links to the same page in that language.

LanguageSwitch

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, LanguageSwitch

Dark theme, LanguageSwitch

High contrast theme, LanguageSwitch

UsageLink to the section Usage

tsx

import { LanguageSwitch } from '@skribly/ui/navigation'

tsx

<LanguageSwitch label="Language" value={lang} onChange={setLang}
  languages={[{ code: 'pl', name: 'Polski' }, { code: 'en', name: 'English' }]} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Buttons mode is a radio group; links mode is a nav with aria-current on the active language and hreflang on each link.
Every option is read as its code and its own name, such as "PL Polski", tagged with its lang so the voice switches.
The active code is underlined, not only coloured.

This demo runs through axe in all three themes on every test run. See what the tests check.