LanguagePicker

Finds a language in a long list by its own name, English name or code, with an optional field for any other code. Pick it for settings; use LanguageSwitch for two or three languages.

LanguagePicker

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, LanguagePicker

Interface language

Dark theme, LanguagePicker

Interface language

High contrast theme, LanguagePicker

Interface language

UsageLink to the section Usage

tsx

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

tsx

<LanguagePicker label="Interface language" languages={languages} value={lang} onChange={setLang}
  emptyLabel="No language matches."
  custom={{ label: 'Other code', buttonLabel: 'Use code', errorLabel: 'Enter a code such as ga or pt-BR.' }} />

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

The search field filters the list as you type; Up and Down move through matches and Enter picks one while focus stays in the field.
Names carry their own lang.
A wrong custom code marks the field invalid, links the message with aria-describedby and moves focus back to it.
The list scrolls inside its own box.

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