Checkbox

Examples

<input type="checkbox" class="checkbox" id="cb1"/>
<label for="cb1" class="checkbox__label">
  <span class="checkbox__caption">Test</span>
</label>

    

<input type="checkbox" checked class="checkbox" id="cb2"/>
<label for="cb2" class="checkbox__label">
  <span class="checkbox__caption">Test</span>
</label>

    

<input type="checkbox" disabled class="checkbox" id="cb3"/>
<label for="cb3" class="checkbox__label">
  <span class="checkbox__caption">Test</span>
</label>

    

<input type="checkbox" checked disabled class="checkbox" id="cb4"/>
<label for="cb4" class="checkbox__label">
  <span class="checkbox__caption">Test</span>
</label>

    

<input type="checkbox" checked class="checkbox" id="cb5"/>
<label for="cb5" class="checkbox__label theme--dark">
  <span class="checkbox__caption">Test</span>
</label>

    

<input type="checkbox" disabled class="checkbox" id="cb6"/>
<label for="cb6" class="checkbox__label theme--dark">
  <span class="checkbox__caption">Test</span>
</label>

    

<div class="theme--dark">
  <input type="checkbox" checked class="checkbox" id="cb7"/>
  <label for="cb7" class="checkbox__label">
    <span class="checkbox__caption">Test</span>
  </label>
</div>

    

Introduction

The Groundhog checkbox component visually enhances the standard html <input type="checkbox"> element. A checkbox consists of a small box and a checkmark which indicates a boolean 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="checkbox" type="checkbox">
   <label class="checkbox__label">
    <span class="checkbox__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 change the value of the checkbox by clicking on the label. This enhances usability especially in mobile, where click areas are a key.

   <input class="checkbox" type="checkbox" id="checkbox-id-01">
   <label class="checkbox__label" for="checkbox-id-01">
    <span class="checkbox__caption">Label text</span>
   </label>
   

Additional attributes for the checkbox