Select a Language

The select a language pattern provides a dedicated page or prominent interface for users to select their preferred language, typically used as a landing page or primary language selection experience.

Overview

The select a language pattern creates a full-page language selection experience where users can choose their preferred language from all available options. Unlike the language selector component (which appears in headers or footers), this pattern is designed for prominent, primary language selection scenarios.

This pattern is particularly useful when:

Users first arrive at a multilingual site and need to choose their language
A site offers many language options that would be difficult to display in a compact selector
Language selection is a critical first step in the user journey

Key Elements

Language selection page

A full page dedicated to language selection, presenting all available languages in a clear, organized layout. This page typically serves as an entry point to the site or as a dedicated settings page.

Large, clear language options

Each language option is displayed prominently, with the language name shown in its native script. For example, Spanish appears as "Español" and Chinese as "中文". This ensures users can identify their language regardless of their current language settings.

Visual hierarchy

Languages are organized in a logical manner, whether alphabetically, by region, or by usage frequency. Clear visual grouping helps users quickly locate their preferred language.

Language Selection Page

Component Preview

Select your language

Choose your preferred language to continue

English

Español

中文

Tiếng Việt

한국어

Tagalog

Русский

العربية

Français

Component Code


<div class="border-1px border-base-lighter padding-4 radius-md bg-base-lightest">
  <h2 class="margin-top-0 text-center">Select your language</h2>
  <p class="text-center text-base">Choose your preferred language to continue</p>

  <div class="grid-row grid-gap-lg margin-top-4">
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="en">English</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="es">Español</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="zh">中文</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="vi">Tiếng Việt</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="ko">한국어</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="tl">Tagalog</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="ru">Русский</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="ar" dir="rtl">العربية</a>
    </div>
    <div class="grid-col-12 tablet:grid-col-6 desktop:grid-col-4 margin-bottom-2">
      <a href="#" class="usa-button usa-button--outline width-full text-center" lang="fr">Français</a>
    </div>
  </div>
</div>

Card-based Language Selection

Component Preview

Choose a language

Component Code


<div class="padding-4">
  <h2 class="margin-top-0">Choose a language</h2>

  <ul class="usa-card-group">
    <li class="usa-card grid-col-12 tablet:grid-col-6 desktop:grid-col-4">
      <div class="usa-card__container">
        <div class="usa-card__body">
          <a href="#" class="usa-link text-no-underline" lang="en">
            <span class="text-bold font-heading-lg">English</span>
            <span class="display-block text-base-dark margin-top-1">United States</span>
          </a>
        </div>
      </div>
    </li>
    <li class="usa-card grid-col-12 tablet:grid-col-6 desktop:grid-col-4">
      <div class="usa-card__container">
        <div class="usa-card__body">
          <a href="#" class="usa-link text-no-underline" lang="es">
            <span class="text-bold font-heading-lg">Español</span>
            <span class="display-block text-base-dark margin-top-1">Spanish</span>
          </a>
        </div>
      </div>
    </li>
    <li class="usa-card grid-col-12 tablet:grid-col-6 desktop:grid-col-4">
      <div class="usa-card__container">
        <div class="usa-card__body">
          <a href="#" class="usa-link text-no-underline" lang="zh">
            <span class="text-bold font-heading-lg">中文</span>
            <span class="display-block text-base-dark margin-top-1">Chinese</span>
          </a>
        </div>
      </div>
    </li>
  </ul>
</div>

Guidance

When to use the select a language pattern

Entry points to multilingual sites.: Use this pattern when language selection is the first action users should take upon arriving at your site, such as a splash page or landing page.
When many languages are available.: If your site supports numerous languages that would be difficult to display in a compact dropdown or menu, a dedicated selection page provides better usability.
Settings or preferences pages.: Use this pattern on a dedicated language settings page where users can view and change their language preference.

When to consider something else

If you only support a few languages.: For sites with two to four language options, consider using the language selector component in the header or footer instead of a dedicated page.
If language detection is reliable.: If you can accurately detect the user's preferred language from browser settings, you may not need a prominent selection page. Provide a language selector in the header for users who wish to change.

Best practices

Display language names in their native script.: Always show language names in their own language (e.g., "Español" not "Spanish", "中文" not "Chinese"). Users should be able to identify their language without understanding the site's current language.
Consider alphabetical or regional grouping.: Organize languages in a logical order. Alphabetical ordering (by native name) works well for diverse audiences. Regional grouping may be appropriate if your user base is geographically concentrated.
Provide clear visual feedback.: Indicate the currently selected language if applicable. Use hover and focus states to make interactive elements clearly identifiable.
Use the lang attribute on each option.: Apply the appropriate lang attribute to each language option element (e.g., lang="es" for Spanish). This ensures screen readers pronounce language names correctly.

Accessibility considerations

Use proper lang attributes on each option.: The lang attribute tells assistive technologies which language the text is in, allowing screen readers to switch pronunciation. Apply it to each language link or button element.
Support right-to-left languages.: For languages like Arabic and Hebrew, include the dir="rtl" attribute to ensure proper text direction within the option element.
Ensure keyboard navigation.: All language options must be accessible via keyboard navigation. Users should be able to tab through options and activate them with Enter or Space.
Provide sufficient color contrast.: Ensure text and interactive elements meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text).
Use descriptive link text.: Each language option should be a clear, descriptive link. The language name itself serves as the link text, making it understandable out of context.

USWDS Documentation

For more guidance, view the USWDS Select a Language Pattern Documentation.