Language Selector
ProA dropdown for selecting the application language or locale. Displays the current language with an optional flag icon and expands to show available options. Triggers a locale change on selection and persists the preference.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| With Flags | Dropdown options include country flag icons alongside language names. | Use when the audience expects flag-based language recognition. |
Usage Guidelines
Do
Display each language in its own native script — "Deutsch" not "German".
Don't
Auto-detect language without offering a manual override.
Do
Place the selector in a consistent, discoverable location (header or footer).
Don't
Use flags alone — they represent countries, not languages.
Do
Persist the language choice across sessions.
Don't
Trigger a full page reload on selection — use client-side locale switching when possible.
Code
Design Tokens
Accessibility
- Trigger button uses aria-haspopup="listbox" and aria-expanded.
- The dropdown list uses role="listbox" with role="option" children.
- Current selection is indicated with aria-selected="true".
- Each language is written in its native script for universal recognition.
- Focus moves into the listbox on open and returns to the trigger on close.