Checkbox

.c-checkbox

TIP

Checkboxes are used to allow the user to select one or more options from a set. If the user can select only one option anyway, use Radio Buttons instead.

• Always use the for attribute to link the label to the checkbox with the same id. This way the checkbox can be toggled by clicking the label.
• Add tabindex="0" to make a non-interactive HTML element focusable (divs or spans are not focusable by default).

Open TODOs

Make the checkbox focusable with keyboard, show focus-visible state.

Checked and Unchecked

Add the attribute checked:

I'm checked

I'm unchecked

I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Show Code

<div class="c-checkbox" tabindex="0">
    <input id="REPLACE_ID_01" type="checkbox" checked>
    <label class="c-label" for="REPLACE_ID_01">I'm checked</label>
</div>
<div class="c-checkbox" tabindex="0">
    <input id="REPLACE_ID_02" type="checkbox">
    <label class="c-label" for="REPLACE_ID_02">I'm unchecked</label>
</div>
<div class="c-checkbox" tabindex="0">
    <input id="REPLACE_ID_03" type="checkbox" checked>
    <label class="c-label" for="REPLACE_ID_03">
      I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </label>
</div>

With surrounding label

TIP

The checkbox can also be wrapped in a label element.

.c-checkbox > .c-label > input + span

I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Large Checkbox

Disabled checked Checkbox

Small Checkbox

Show Code

<div class="c-checkbox" tabindex="0">
  <label class="c-label" for="REPLACE_ID_001">
    <input type="checkbox" id="REPLACE_ID_001">
    <span>I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. </span>
  </label>
</div>

Disabled Checkbox

Add the attribute disabled="disabled"

I'm a bit disabled but checked

I'm only disabled

Show Code

<div class="c-checkbox h-block" tabindex="0">
  <input id="REPLACE_ID_0001" type="checkbox" disabled="disabled" checked>
  <label class="c-label" for="REPLACE_ID_0001">I'm a bit disabled but checked</label>
</div>
<div class="c-checkbox h-block" tabindex="0">
  <input id="REPLACE_ID_0002" type="checkbox" disabled="disabled">
  <label class="c-label" for="REPLACE_ID_0002">I'm only disabled</label>
</div>

Small Checkbox

WARNING

The small checkbox should only be used in old plausi protocols.

.c-checkbox.-small

I'm a small checkbox

Show Code

<div class="c-checkbox -small">
  <input id="REPLACE_ID_S01" type="checkbox" checked>
  <label class="c-label" for="REPLACE_ID_S01">I'm a small checkbox</label>
</div>

Large Checkbox

TIP

The large checkbox can be used in input-checkbox combinations, see Input-Groups.

.c-checkbox.-large

I'm a large checkbox

Show Code

<div class="c-checkbox -large" tabindex="0">
  <input id="REPLACE_ID_LG01" type="checkbox" checked>
  <label class="c-label" for="REPLACE_ID_LG01">I'm a large checkbox</label>
</div>

Horizontal Layout

.c-checkbox.h-inline

I'm in line

I'm in line

Show Code

<div class="c-checkbox h-inline" tabindex="0">
  <input id="REPLACE_ID_H01" type="checkbox" name="fc3" checked>
  <label class="c-label" for="REPLACE_ID_H01">I'm in line</label>
</div>
<div class="c-checkbox h-inline" tabindex="0">
  <input id="REPLACE_ID_H02" type="checkbox" name="fc4" checked>
  <label class="c-label" for="REPLACE_ID_H02">I'm in line</label>
</div>

To center an inline checkbox use the helper-class .h-inline

I'm totally centered

Show Code

<div class="h-type-align-center h-block">
  <div class="c-checkbox h-inline">
    <input id="REPLACE_ID_HC01" type="checkbox">
    <label class="c-label" for="REPLACE_ID_HC01">I'm totally centered</label>
  </div>
</div>

Checkbox Group with Label

.c-float-container.-has-checkbox > .c-label + .c-checkbox.h-inline

Label

I'm in line

I'm in line

I'm in line

Show Code

<div class="c-float-container -has-checkbox">
  <label class="c-label">Label</label>
  <div class="c-checkbox h-inline">
    <input id="REPLACE_ID_L01" type="checkbox" name="fc10">
    <label class="c-label" for="REPLACE_ID_L01">I'm in line</label>
  </div>
  <div class="c-checkbox h-inline">
    <input id="REPLACE_ID_L02" type="checkbox" name="fc3" checked>
    <label class="c-label" for="REPLACE_ID_L02">I'm in line</label>
  </div>
  <div class="c-checkbox h-inline">
    <input id="REPLACE_ID_L03" type="checkbox" name="fc8">
    <label class="c-label" for="REPLACE_ID_L03">I'm in line</label>
  </div>
</div>