Checkbox

It's my tick in a box, tick in a box

Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

While using input type="number" users could accidentally increase or decrease the number using the scroll wheel on the mouse or the scroll gesture on their trackpad. This feature can be useful when collecting countable data but bad if entering data such as passport numbers. We have switched to input type="text" inputmode="numeric" pattern="[0-9]*" because it allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

How we craft them

Checkbox components need to be a child of a form
Checkbox components also need a name attribute, in order to receive data from your form
Feel free to use the value attribute to make your form data more concise

Designed for inclusion

We always associate the checkbox with its label by wrapping it inside its label. This means that …
- users of screen readers receive context around the checkbox.
- the label becomes clickable, increasing the tap-target of the checkbox
- more concise code can be used, since the ID and for attributes are not needed with this method
When focussed on, the checkbox will give us our nice, clear blue focus style
If a user has selected the reduce motion option in their browser settings, the animation will not run

How they look

A single checkbox

View demo

320 x 568

View code

    
<form>
  <label class="gg-c-checkbox">
    <input type="checkbox" class="gg-c-checkbox__checkbox" name="my-checkbox" />
    <span class="gg-c-checkbox__pseudo-checkbox"></span>
    <span class="gg-c-checkbox__text">Checkbox information text. This is clickable too</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
      <g fill-rule="evenodd">
        <rect width="8" height="2" x="48" y="24" rx="2" />
        <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
        <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
        <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
        <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
        <rect width="8" height="2" y="24" rx="2" />
      </g>
    </svg>
  </label>
</form>

A group of checkboxes

Use when you want users to select more than one option.

Use a fieldset to group the checkboxes
Use a legend to desribe the grouping

View demo

320 x 568

View code

    
<form>
  <fieldset>
    <legend class="gg-u-pb-small gg-u-text-speak-up">What are your favourite things about giffgaff?</legend>
    <label class="gg-c-checkbox">
      <input type="checkbox" class="gg-c-checkbox__checkbox" name="favourite-thing" value="flexibility" />
      <span class="gg-c-checkbox__pseudo-checkbox"></span>
      <span class="gg-c-checkbox__text">The flexibility allows me to choose my goodybag month on month</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
        <g fill-rule="evenodd">
          <rect width="8" height="2" x="48" y="24" rx="2" />
          <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
          <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
          <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
          <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
          <rect width="8" height="2" y="24" rx="2" />
        </g>
      </svg>
    </label>
    <label class="gg-c-checkbox">
      <input type="checkbox" class="gg-c-checkbox__checkbox" name="favourite-thing" value="company-cares" />
      <span class="gg-c-checkbox__pseudo-checkbox"></span>
      <span class="gg-c-checkbox__text">The company cares about me as a person</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
        <g fill-rule="evenodd">
          <rect width="8" height="2" x="48" y="24" rx="2" />
          <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
          <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
          <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
          <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
          <rect width="8" height="2" y="24" rx="2" />
        </g>
      </svg>
    </label>
    <label class="gg-c-checkbox">
      <input type="checkbox" class="gg-c-checkbox__checkbox" name="favourite-thing" value="refurbished-phones" />
      <span class="gg-c-checkbox__pseudo-checkbox"></span>
      <span class="gg-c-checkbox__text">They sell refurbished phones, which is great for the planet!</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
        <g fill-rule="evenodd">
          <rect width="8" height="2" x="48" y="24" rx="2" />
          <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
          <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
          <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
          <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
          <rect width="8" height="2" y="24" rx="2" />
        </g>
      </svg>
    </label>
    <label class="gg-c-checkbox">
      <input type="checkbox" class="gg-c-checkbox__checkbox" name="favourite-thing" value="great-checkboxes" />
      <span class="gg-c-checkbox__pseudo-checkbox"></span>
      <span class="gg-c-checkbox__text">They make great checkboxes!</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
        <g fill-rule="evenodd">
          <rect width="8" height="2" x="48" y="24" rx="2" />
          <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
          <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
          <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
          <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
          <rect width="8" height="2" y="24" rx="2" />
        </g>
      </svg>
    </label>
  </fieldset>
</form>

Checkboxes with error state

If the field is required and has not been selected by the user.

View demo

320 x 568

View code

    
<form class="gg-c-form__element--invalid">
    <label class="gg-c-checkbox">
      <input type="checkbox" class="gg-c-checkbox__checkbox" name="my-checkbox" required />
      <span class="gg-c-checkbox__pseudo-checkbox"></span>
      <span class="gg-c-checkbox__text">Checkbox information text. This is clickable too</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
        <g fill-rule="evenodd">
          <rect width="8" height="2" x="48" y="24" rx="2" />
          <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
          <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
          <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
          <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
          <rect width="8" height="2" y="24" rx="2" />
        </g>
      </svg>
    </label>
    <p class="gg-c-form__element-message gg-c-form__element-message--invalid">Please tick this box</p>
</form>