Toggle Switch

On or Off?

• Switch component
• Switch with On and Off
• Switch with descriptor label
• Switch with description

How we design them

• Toggle switches are a version of a checkbox input, with a span inside to style the internal ‘check’
• They toggle from grey on the left (off), to green on the right (on)
• If you have more than one switch on your page, please ensure to update the id and for, otherwise only the first switch will toggle

Designed for inclusion

• The input needs a role="switch" to allow screen readers to read them as a switch
• They must be a minimum of 48px high and wide; a nice big tap target
• They should have at least an 8px gap between them
• Switch components should be presented with text describing what the switch is for beside them
• Switch components with no text linked to them should include aria-labels to give more description for visually impaired users
• To use a switch, add .gg-c-switch__slider class to your <span> element, followed by the class shown below for your preferred content
• You must include a span element inside the label with the class .gg-u-screen-reader-only, containing a description of the switch’s use for screen reader users.

How they look

Switch component

These switch components have no text labels built in to show states. This switch MUST be used with text to describe its use, as shown below. To use this switch, add a .gg-c-switch__slider--blank class to the second <span> element.

    
<label for="switch" class="gg-c-switch">
  <span class="gg-u-screen-reader-only">Description of switch use</span>
  <input type="checkbox" role="switch" name="switch" id="switch">
  <span class="gg-c-switch__slider gg-c-switch__slider--blank"></span>
</label>

  

Switch with On and Off

These switch components have text labels built in to show On and Off states. To use this switch, add a .gg-c-switch__slider--on-off class to the second <span> element.

    
<label for="switch" class="gg-c-switch">
  <span class="gg-u-screen-reader-only">Description of switch use</span>
  <input type="checkbox" role="switch" name="switch" id="switch">
  <span class="gg-c-switch__slider gg-c-switch__slider--on-off"></span>
</label>

  

Switch with Yes and No

These switch components have text labels built in to show Yes and No states. To use this switch, add a .gg-c-switch__slider--yes-no class to the second <span> element.

    
<label for="switch" class="gg-c-switch">
  <span class="gg-u-screen-reader-only">Description of switch use</span>
  <input type="checkbox" role="switch" name="switch" id="switch">
  <span class="gg-c-switch__slider gg-c-switch__slider--yes-no"></span>
</label>

  

Switch with description

Need to add some text? We have a container and classes which will position the text beside the switch. It will automatically span the width of its parent element, so choose its parent wisely.

    
<div class="gg-c-switch__container">
  <p class="gg-c-switch__container__text">Text Notifications</p>
  <label for="switch" class="gg-c-switch">
    <span class="gg-u-screen-reader-only">Description of switch use</span>
    <input type="checkbox" role="switch" name="switch" id="switch">
    <span class="gg-c-switch__slider gg-c-switch__slider--on-off"></span>
  </label>
</div>

<div class="gg-c-switch__container">
  <p class="gg-c-switch__container__text">Email Notifications</p>
  <label for="switch-2" class="gg-c-switch">
    <span class="gg-u-screen-reader-only">Description of switch use</span>
    <input type="checkbox" role="switch" name="switch" id="switch-2">
    <span class="gg-c-switch__slider gg-c-switch__slider--on-off"></span>
  </label>
</div>