Switch

Purpose

A switch represents an immediate on/off state change (like enabling a feature or toggling a setting). It differs from a checkbox in that switches take effect immediately without requiring form submission.

Usage Guidance

• Use switches for settings that take immediate effect
• Use checkboxes for form selections that require submission
• Label the switch clearly; the label should not change based on state
• State (on/off) is communicated by aria-checked, not by changing the label

Keyboard Support

Screen Reader Behavior

Screen readers announce the label and “switch, on” or “switch, off.”

ARIA Requirements

• role="switch" on the control element
• aria-checked="true|false" reflecting the current state
• tabindex="0" if using a non-button element (prefer <button role="switch">)

Common Mistakes

• Changing the label text between states (makes it hard to find the same control)
• Not updating aria-checked on state change
• Using aria-checked without role="switch" (use role="checkbox" or role="switch")
• Implementing a switch that requires form submission (use a checkbox instead)

Live Example

Code Example

<button
  role="switch"
  aria-checked="false"
  id="notifications-switch"
>
  <!-- Visual indicator via CSS/JS -->
</button>
<label for="notifications-switch">Email notifications</label>

<script>
  var sw = document.getElementById('notifications-switch');
  sw.addEventListener('click', function() {
    var checked = sw.getAttribute('aria-checked') === 'true';
    sw.setAttribute('aria-checked', String(!checked));
  });
  sw.addEventListener('keydown', function(e) {
    if (e.key === ' ') {
      e.preventDefault();
      sw.click();
    }
  });
</script>