One Teva Design System

UI Elements

Language Selector

A language selector allows users to choose their preferred language for navigating and interacting with a website or application.

Default

Consider these factors when constructing language selector links:

  • The HTML lang attribute specifies the language of the element's content.
  • The HTML hreflang attribute indicates the language of a linked document's content.
  • Use the HTML aria-label attribute to provide an accessible label for elements.
  • The HTML aria-current attribute indicates the current item within a set, like a page in navigation.

Use the aria-current attribute to indicate the currently active page language.

<LanguageSelector>
  <LanguageSelector.Item lang="en" hreflang="en" aria-label="Visit our site in English" aria-current="true" href="#en">EN</LanguageSelector.Item>
  <LanguageSelector.Item lang="fr" hreflang="fr" aria-label="Visitez notre site en français." href="#fr">FR</LanguageSelector.Item>
  <LanguageSelector.Item lang="de" hreflang="de" aria-label="Besuchen Sie unsere Seite auf Deutsch" href="#de">DE</LanguageSelector.Item>
  <LanguageSelector.Item lang="es" hreflang="es" aria-label="Visite nuestro sitio en español" href="#es">ES</LanguageSelector.Item>
</LanguageSelector>

Variants

Language selector comes in variants `menu` and `masthead`. Based on the context it is used in.

<LanguageSelector>
  <LanguageSelector.Item variant="menu" lang="en" hreflang="en" aria-label="Visit our site in English" aria-current="true" href="#en">EN</LanguageSelector.Item>
  <LanguageSelector.Item variant="menu" lang="fr" hreflang="fr" aria-label="Visitez notre site en français." href="#fr">FR</LanguageSelector.Item>
  <LanguageSelector.Item variant="menu" lang="de" hreflang="de" aria-label="Besuchen Sie unsere Seite auf Deutsch" href="#de">DE</LanguageSelector.Item>
  <LanguageSelector.Item variant="menu" lang="es" hreflang="es" aria-label="Visite nuestro sitio en español" href="#es">ES</LanguageSelector.Item>
</LanguageSelector>