Web Toggle switch

Video examples

Code examples

Use as much semantic HTML as possible

• This semantic HTML contains all accessibility features by default, and only requires the addition of role="switch".
• It uses CSS pseudo attributes to create the toggle switch indicator, no Javascript

<fieldset>
  <legend>Privacy settings:</legend>
  <input type="checkbox" role="switch" id="locationSwitch" checked>
  <label for="locationSwitch">Share image location</label>

  <input type="checkbox" role="switch" id="tagSwitch">
  <label for="tagSwitch">Manually approve tags</label>

  <input type="checkbox"
         role="switch"
         id="photosSwitch"
         aria-describedby="photosSwitchDescription"
         checked>
  <label for="photosSwitch">Share photos</label>
  <div id="photosSwitchDescription" class="description">
    When you share photos, they will be visible to all your friends and followers
  </div>

</fieldset>

Disabled

Using the disabled attribute will prevent the input from switching on/off and will also prevent it from being focusable.

Screen readers will still be able to discover the switch by browsing with the arrow keys.

<fieldset>
  <legend>Notification settings</legend>

  <input type="checkbox" role="switch" id="marketingSwitch">
  <label for="marketingSwitch">Marketing messages</label>

  <input type="checkbox" role="switch" id="serviceSwitch" disabled>
  <label for="serviceSwitch">Blocked user services</label>


  <input type="checkbox" 
         role="switch" 
         id="legalSwitch"
         aria-describedby="legalSwitchDescription"
         checked 
         disabled>
  <label for="legalSwitch">Legal updates</label>
  <div id="legalSwitchDescription" class="description">
    Messages about your user agreement and transactions are required by law.
  </div>
</fieldset>

Disabled and focusable

There are limited scenarios when it’s helpful for screenreaders to more easily perceive a disabled toggle, use aria-disabled="true" and prevent click events with scripting.

<fieldset>
  <legend>Choose your cookies</legend>

  <input type="checkbox"
        role="switch" 
        id="mandatoryCookies" 
        aria-disabled="true" 
        checked>
  <label for="mandatoryCookies">Cookies required for the site to function</label>
  
  <input type="checkbox" role="switch" id="raisinCookies"  aria-disabled="true" >
  <label for="raisinCookies">Raisin cookies</label>

  <input type="checkbox" role="switch" id="optionalCookies" checked>
  <label for="optionalCookies">Optional marketing cookies</label>

</fieldset>

Using a <button> as a switch

This <button> toggle has focus and keyboard criteria built in. It requires the addition of role="switch" and scripting to toggle aria-checked="true/false".

<button role="switch" aria-checked="true">
  Alpha
</button>

When you can’t use semantic HTML

This custom switch requires extra attributes and keyboard event listeners.

<div role="switch" tabindex="0" aria-checked="true">
  Alpha
</div>

Related toggle switch entries

• Accessibility training: Toggle switch
• Android criteria: Switch
• Design criteria: Toggle switch
• iOS criteria: Toggle switch
• Web demo: Toggle switch