Language Selector

Language switching dropdown. Three variants: Outline, Filled, and Button with globe icon.

WCAG 2.2 AA Reviewed April 2026

View HTML

<div class="txds-lang-selector-preview">
  <div class="txds-lang-selector-preview__top-row">
    <div class="txds-lang-selector-preview__variant-col">
      <button type="button" class="txds-lang-selector txds-lang-selector--filled" aria-haspopup="listbox" aria-expanded="false">
        <span class="txds-lang-selector__label">English</span>
        <span class="txds-lang-selector__caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span>
      </button>
      <div class="txds-lang-selector txds-lang-selector--filled txds-lang-selector--open">
        <div class="txds-lang-selector__header">
          <span class="txds-lang-selector__label">English</span>
          <span class="txds-lang-selector__caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg></span>
        </div>
        <div class="txds-lang-selector__dropdown">
          <button type="button" class="txds-lang-selector__dropdown-item">English</button>
          <button type="button" class="txds-lang-selector__dropdown-item">Español</button>
          <button type="button" class="txds-lang-selector__dropdown-item">Vietnamese</button>
        </div>
      </div>
    </div>
    <div class="txds-lang-selector-preview__variant-col">
      <button type="button" class="txds-lang-selector txds-lang-selector--outline" aria-haspopup="listbox" aria-expanded="false">
        <span class="txds-lang-selector__label">English</span>
        <span class="txds-lang-selector__caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span>
      </button>
      <div class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--open">
        <div class="txds-lang-selector__header">
          <span class="txds-lang-selector__label">English</span>
          <span class="txds-lang-selector__caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg></span>
        </div>
        <div class="txds-lang-selector__dropdown">
          <button type="button" class="txds-lang-selector__dropdown-item">English</button>
          <button type="button" class="txds-lang-selector__dropdown-item">Español</button>
          <button type="button" class="txds-lang-selector__dropdown-item">Vietnamese</button>
        </div>
      </div>
    </div>
  </div>
  <div class="txds-lang-selector-preview__button-col">
    <div class="txds-lang-selector-preview__button-row">
      <button type="button" class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--button" aria-label="Switch language">
        <span class="txds-lang-selector__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></span>
        <span class="txds-lang-selector__label">English</span>
      </button>
      <button type="button" class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--button" aria-label="Cambiar idioma">
        <span class="txds-lang-selector__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></span>
        <span class="txds-lang-selector__label">Español</span>
      </button>
    </div>
    <div class="txds-lang-selector-preview__button-row">
      <button type="button" class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--button txds-lang-selector--button-hover" aria-label="Switch language">
        <span class="txds-lang-selector__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></span>
        <span class="txds-lang-selector__label">English</span>
      </button>
      <button type="button" class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--button txds-lang-selector--button-hover" aria-label="Cambiar idioma">
        <span class="txds-lang-selector__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></span>
        <span class="txds-lang-selector__label">Español</span>
      </button>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-lang-selector`	Base button element for all variants.
`txds-lang-selector--outline`	Outline variant — border with primary-50 text and icon.
`txds-lang-selector--filled`	Filled variant — primary-60 background with white text.
`txds-lang-selector--open`	Modifier for the dropdown-open state (stacked layout).
`txds-lang-selector--button`	Button variant with globe icon and wider right padding (12px).
`txds-lang-selector__icon`	Globe icon wrapper (24 × 24). Used in the Button variant.
`txds-lang-selector__label`	Language label text (16px bold).
`txds-lang-selector__caret`	Down/up caret icon (24 × 24).
`txds-lang-selector__header`	Flex row for label + caret inside the open state.
`txds-lang-selector__dropdown`	Dropdown container for language options.
`txds-lang-selector__dropdown-item`	Individual language option in the dropdown.