Switch

Examples

<input type="checkbox" class="switch" id="cb1"/>
<label for="cb1" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" checked class="switch" id="cb2"/>
<label for="cb2" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" disabled class="switch" id="cb3"/>
<label for="cb3" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" checked disabled class="switch" id="cb4"/>
<label for="cb4" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" class="switch to-right" id="cb5"/>
<label for="cb5" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" class="switch to-right" id="cb6"/>
<label for="cb6" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" disabled class="switch to-right" id="cb7"/>
<label for="cb7" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

<input type="checkbox" disabled checked class="switch to-right" id="cb8"/>
<label for="cb8" class="switch__label">
  <span class="switch__caption">Test</span>
</label>

    

Introduction

The Groundhog switch component visually enhances the standard html <input type="checkbox"> element. A switch consists of a small circle which indicates a boolean on/off state of the element. It is typically accompanied by a descriptive text (also known as label) next to it.

Including the checkbox component

1. To include a checkbox component into your project, first create the <input type="checkbox"> and <label> elements:

   <input type="checkbox" />
   <label>
   <span>Label text</span>
   </label>
   

2. To add the visual enhancements of Groundhog, add the necessary classes to the elements class attributes:

   <input class="switch" type="checkbox" />
   <label class="switch__label">
   <span class="switch__caption">Label text</span>
   </label>
   

3. To link the label with the checkbox, connect them via the id and the for attributes. This will add the ability to toggle the value of the switch by clicking on the label. This enhances usability especially in mobile, where click areas are a key.

   <input class="switch" type="checkbox" id="switch-id-01" />
   <label class="switch__label" for="switch-id-01">
   <span class="switch__caption">Label text</span>
   </label>
   

Additional attributes for the checkbox

A note to Groundhog switches

The switch needs input and label elements to work properly. Classes and styling is not applicable to other elements.