UX Patterns Guide
UI + UX Personalization And Preference established

Language selector

Provide a visible language selector with native labels, current-language state, equivalent-content rules, explicit override persistence, programmatic language metadata, fallback handling, and task-context preservation.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The product or site offers current content, task flows, or interface text in more than one language.
  • Users may enter through links or devices where automatic language detection is wrong.
  • Equivalent translated content can preserve current task context or clearly explain gaps.

Avoid when

  • Only a few unrelated documents are translated and the current page has no equivalent alternative.
  • The user is choosing country, currency, market, timezone, or legal jurisdiction rather than reading language.
  • The only language choice affects future emails or consent records, which belongs in a preference center.
  • Machine translation quality is unreviewed and cannot be labelled or limited honestly.
  • The product cannot preserve critical forms or transactions through language switching.

Problem it prevents

Multilingual products need to let people read and act in a language they understand, but automatic language detection, hidden settings, flag-only controls, incomplete translations, and context-losing redirects can leave users trapped in the wrong language or unsure what will change.

Pattern anatomy

What a strong implementation has to make clear

User need

Users may arrive through search, shared links, bookmarks, redirects, browser language negotiation, account preferences, device locale, or location hints.

Pattern promise

Provide a visible language selector with native labels, current-language state, equivalent-content rules, explicit override persistence, programmatic language metadata, fallback handling, and task-context preservation.

Required state

Default detected-language state with visible current language and manual override.

Recovery path

Language selector is hidden behind account settings that users cannot read in the current language.

Access contract

Identify the default page language with the document lang attribute after selection.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A public benefits page shows English as the current language and lets users switch to Español on the same page, with the Spanish label written in Spanish and the page lang updated after selection.
  • A product with six languages opens a language menu listing Deutsch, English, Español, Français, 日本語, and Português, marks English current, and labels a partial translation as limited before selection.
  • A user opens a payment-help article in English, chooses Français, stays on the equivalent article, keeps their signed-in session, and sees the choice persist on the next internal page.
  • A user whose browser suggests Spanish chooses English once and the site keeps English until they change it again instead of re-detecting on every page.
Weak implementation

Vague, hidden, hard to recover from

  • A header shows only flag icons for language choices, so users cannot distinguish Spanish, Mexican Spanish, or region-specific content.
  • A language menu lists every supported product locale even when the current article exists only in English and selecting another option silently redirects home.
  • A traveler using a borrowed device sees the wrong auto-detected language and cannot find a manual language control.
  • A form user switches language midway through an application and loses every entered field because the selector navigated to a different route.
UI guidance
  • Render language choice as a visible in-context control near global or utility navigation with the current language, native-language labels, script or region disambiguation where needed, and an unavailable or partial-translation state.
  • Use a simple two-language switch for exactly two equivalent languages and a menu, list, or searchable selector for larger sets, while keeping labels readable without relying on flags, icons, or the current page language alone.
UX guidance
  • Use language selector when users may land in the wrong language or prefer another language for the same content, and need to switch without losing page, object, task, draft, session, or route context.
  • Respect explicit language choice over browser, device, IP, or account inference, persist it across internal navigation, and explain fallback, missing translation, partial translation, or machine translation before users commit.
Implementation contract

What the implementation must handle

States

  • Default detected-language state with visible current language and manual override.
  • Two-language switch state for exactly two equivalent translations.
  • Three-or-more-language menu or list state with native labels and current selection.
  • Selected-language state that updates page language, content language, and selector label.

Interaction

  • The selector names the current language and available alternatives in language labels users can recognize.
  • Selecting a language changes language only, not country, currency, timezone, legal market, notification preference, theme, density, or saved view unless stated separately.
  • Explicit user selection overrides browser, device, IP, or account inference until the user changes it or clears the saved choice.
  • Equivalent translated pages preserve the current route, selected object, draft, session, scroll anchor, and return path wherever technically possible.

Accessibility

  • Identify the default page language with the document lang attribute after selection.
  • Mark language names or alternate-language labels with their own lang attributes when they differ from the page language.
  • Use semantic lists or menu structures for grouped language links and keep the current language announced.
  • Do not rely on flag icons, color, typography, or script shape alone to distinguish choices.

Review

  • Can users who do not understand the current page language still recognize and use the selector?
  • Which languages are equivalent for this exact page or task, and which are partial, missing, fallback, or machine-translated?
  • Does selecting a language preserve route, object, form draft, session, focus, and scroll?
  • Does explicit choice override Accept-Language, IP, device locale, and account inference consistently?
Interactive lab

Inspect the states before you copy the pattern

Switch page language without losing context

Switch between two-language and multi-language selector states, choose native labels, handle partial, unavailable, browser-hint, sticky explicit choice, preserved draft, and reset states, and compare flag-only, context-loss, auto-override, missing-translation, preference-confusion, no-lang, and hidden-control failures.

Language selector
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default detected-language state with visible current language and manual override.

Keyboard / Access

Tab reaches the language selector from global or utility navigation without requiring users to open hidden settings.

Avoid Generating

Using country flags as the only language labels.
Evidence trail

Source-backed claims behind this guidance

USWDS Language selector

U.S. Web Design System - checked

Supports language-selector variants, equivalent content expectations, visible labels, lang attributes, contrast, and list semantics.

MDN Accept-Language header

MDN Web Docs - checked

Supports treating browser language as a hint rather than overriding explicit user choice.

Full agent/debug reference

Problem Context

  • Users may arrive through search, shared links, bookmarks, redirects, browser language negotiation, account preferences, device locale, or location hints.
  • The current page may have complete equivalent translations, partial translated sections, machine-translated content, unavailable translations, or language-specific legal and regional variants.
  • Language selection affects comprehension, accessibility, search, support, authentication, forms, legal notices, communication preference, and trust.
  • Users may not understand the current page language well enough to discover hidden settings or interpret language names translated into that current language.
  • Language, country, region, script, locale, currency, timezone, and communication preference are related but distinct choices.

Selection Rules

  • Choose language selector when users need to switch the current page, task, or product interface to another available language.
  • Use settings management when language is one durable configuration value inside a broader account or app settings area.
  • Use preference center when language controls future communications, consent records, profile data, or marketing topics rather than current content.
  • Use adaptive defaults when browser, device, account, or previous behavior only suggests the starting language.
  • Use region, country, currency, or timezone controls separately when the user is changing market, legal jurisdiction, money, or scheduling context rather than text language.
  • Show a direct two-language switch only when there are exactly two equivalent choices and the alternate label is understandable.
  • Use a menu, list, or searchable selector for three or more languages, script variants, regional variants, or long language names.
  • Do not list a language as fully available unless the current page or task has an equivalent translation.
  • Persist explicit language choice across same-site navigation and do not override it with Accept-Language or IP detection.
  • Preserve current page, route, selected item, form draft, authentication state, and return path when switching to an equivalent language.

Required States

  • Default detected-language state with visible current language and manual override.
  • Two-language switch state for exactly two equivalent translations.
  • Three-or-more-language menu or list state with native labels and current selection.
  • Selected-language state that updates page language, content language, and selector label.
  • Persisted explicit-choice state that survives internal navigation.
  • Equivalent translation available, partial translation, unavailable translation, machine translation, and fallback language states.
  • Script or region disambiguation state such as Portuguese from Brazil or Chinese simplified versus traditional.
  • Task-preservation state for route, object, form draft, authentication, focus, and scroll.

Interaction Contract

  • The selector names the current language and available alternatives in language labels users can recognize.
  • Selecting a language changes language only, not country, currency, timezone, legal market, notification preference, theme, density, or saved view unless stated separately.
  • Explicit user selection overrides browser, device, IP, or account inference until the user changes it or clears the saved choice.
  • Equivalent translated pages preserve the current route, selected object, draft, session, scroll anchor, and return path wherever technically possible.
  • Unavailable or partial translations are labelled before selection, not discovered after redirect.
  • The page language and any language names written in another language are programmatically marked for assistive technology.
  • Focus moves predictably from the selector to the changed content or remains on the selector with a status message.

Implementation Checklist

  • Define language inventory by page or route, including complete, partial, unavailable, machine-translated, fallback, and regional/script variants.
  • Store explicit language choice separately from inferred Accept-Language, IP location, country, currency, timezone, and communication preference.
  • Use language tags, html lang, Content-Language where appropriate, and lang attributes on language names written in their own language.
  • Map equivalent routes before showing a language as available, and provide fallback explanations when no equivalent route exists.
  • Preserve form drafts, selected records, authentication, focus, scroll, and query state through language changes.
  • Test screen readers, keyboard use, high zoom, long labels, right-to-left scripts, script variants, borrowed devices, private browsing, and no-cookie sessions.

Common Generated-UI Mistakes

  • Using country flags as the only language labels.
  • Relying only on automatic language negotiation with no visible manual override.
  • Redirecting language switches to a homepage and losing current context.
  • Listing languages that do not have equivalent content for the current page.
  • Mixing language selection with country, currency, timezone, notification, or consent preferences.
  • Writing all language names in the current language so users in the wrong language cannot find their own.
  • Failing to update lang metadata after changing page or component language.

Critique Questions

  • Can users who do not understand the current page language still recognize and use the selector?
  • Which languages are equivalent for this exact page or task, and which are partial, missing, fallback, or machine-translated?
  • Does selecting a language preserve route, object, form draft, session, focus, and scroll?
  • Does explicit choice override Accept-Language, IP, device locale, and account inference consistently?
  • Are language, locale, region, script, currency, timezone, and communication preference kept distinct?
  • Are page language and language-name changes exposed through correct lang attributes?
Accessibility
  • Identify the default page language with the document lang attribute after selection.
  • Mark language names or alternate-language labels with their own lang attributes when they differ from the page language.
  • Use semantic lists or menu structures for grouped language links and keep the current language announced.
  • Do not rely on flag icons, color, typography, or script shape alone to distinguish choices.
  • Keep contrast, focus indicators, keyboard access, and visible labels strong at desktop and mobile sizes.
  • Announce successful language changes and unavailable translation states in text.
  • Support right-to-left, long language names, script variants, and high zoom without clipping labels.
Keyboard Behavior
  • Tab reaches the language selector from global or utility navigation without requiring users to open hidden settings.
  • Enter or Space opens the selector menu or activates a direct two-language switch.
  • Arrow keys move through menu options when using menu or listbox semantics.
  • Escape closes the menu and restores focus to the language trigger.
  • After selection, focus remains predictable on the selector, an equivalent heading, or a language-change status message.
  • Keyboard users can discover unavailable, partial, fallback, and current-language states before activating a choice.
Variants
  • Two-language switch
  • Language menu
  • Language list
  • Searchable language picker
  • Header language selector
  • Footer language selector
  • First-run language choice
  • Account language setting
  • Region and language split selector
  • Partial translation notice

Verification

Last verified: