LanguageSwitcher

molecules

EN/FR bilingual toggle with instant language switch. Full i18n on all pages.

ARIA Role: group

Demo

Demo for LanguageSwitcher (molecules)

EN/FR bilingual toggle with instant language switch. Full i18n on all pages.

Props

PropTypeRequiredDefaultDescription
currentLocale'en' | 'fr'Yes—Current language
onLocaleChange(locale: 'en' | 'fr') => voidYes—Language change handler

TypeScript Interface

interface LanguageSwitcherProps {
  currentLocale: 'en' | 'fr';
  onLocaleChange: (locale: 'en' | 'fr') => void;
}

Assertions (NASA Rule 5)

  • [aria]Current language must be announced (aria-current='true')(WCAG 1.3.1)
  • [type]BCP 47 language tags required (e.g., 'en', 'fr-CA')(BCP 47)
  • [validation]Native name should accompany English name(W3C i18n)

Usage

Import

import { Languageswitcher } from '@epasslive/design-system'

Basic

<Languageswitcher />

With Variants

<Languageswitcher variant="primary" size="md" />