PatternLab (1.1.11)

Checkbox ​

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.

Accessibility Guidelines
  • 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).

Default Checkbox ​

Add the attribute checked to set the checkbox to checked.

Show Code
html
<div class="h-flex h-flex-row">
  <div class="h-width-50">
    <div class="c-checkbox">
      <input id="checkbox-01" type="checkbox" checked>
      <label class="c-label" for="checkbox-01">I'm checked</label>
    </div>
    <div class="c-checkbox">
      <input id="checkbox-02" type="checkbox">
      <label class="c-label" for="checkbox-02">I'm unchecked</label>
    </div>
  </div>
  <div class="h-width-50">
    <div class="c-checkbox">
      <input id="checkbox-03" type="checkbox" checked>
      <label class="c-label" for="checkbox-03">
        I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
      </label>
    </div>
  </div>
</div>

With surrounding label ​

The checkbox can also be wrapped in a label element.

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

Show Code
html
<div class="h-flex h-flex-row">
  <div class="h-width-50">
    <div class="c-checkbox">
      <label class="c-label" for="checkbox-label_01">
        <input type="checkbox" id="checkbox-label_01">
        <span>I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. </span>
      </label>
    </div>
  </div>
  <div class="h-width-50">
    <div class="c-checkbox">
      <label class="c-label" for="checkbox-label_03">
        <input type="checkbox" disabled checked id="checkbox-label_03">
        <span>Disabled checked Checkbox</span>
      </label>
    </div>
    <div class="c-checkbox -small">
      <label class="c-label" for="checkbox-label_04">
        <input type="checkbox" id="checkbox-label_04">
        <span>Small Checkbox</span>
      </label>
    </div>
  </div>
</div>

Disabled Checkbox ​

Add the attribute disabled="disabled"

Show Code
html
<div class="c-checkbox h-block">
  <input id="disabled-01" type="checkbox" disabled="disabled" checked>
  <label class="c-label" for="disabled-01">I'm disabled but checked</label>
</div>
<div class="c-checkbox h-block">
  <input id="disabled-02" type="checkbox" disabled="disabled">
  <label class="c-label" for="disabled-02">I'm disabled</label>
</div>
<div class="c-checkbox">
  <label class="c-label" for="disabled-checkbox-03">
    <input type="checkbox" disabled="disabled" id="disabled-checkbox-03">
    <span>I'm disabled (surrounding label example)</span>
  </label>
</div>

Small Checkbox ​

.c-checkbox.-small

Show Code
html
<div class="h-flex h-flex-column h-gap-xs">
    <div class="c-checkbox -small">
      <input id="checkbox-small-01" type="checkbox" checked>
      <label class="c-label" for="checkbox-small-01">I'm checked</label>
    </div>
    <div class="c-checkbox -small">
      <input id="checkbox-small-02" type="checkbox">
      <label class="c-label" for="checkbox-small-02">I'm unchecked</label>
    </div>
    <div class="c-checkbox -small">
      <label class="c-label" for="checkbox-small-03">
        <input type="checkbox" id="checkbox-small-03">
        <span>I'm a multiline example label. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. </span>
      </label>
    </div>
</div>

Layout Examples ​

Inline Checkboxes ​

.c-checkbox.h-inline

Show Code
html
<div class="c-checkbox h-inline">
  <input id="checkbox-inline-01" type="checkbox" checked>
  <label class="c-label" for="checkbox-inline-01">I'm in line</label>
</div>
<div class="c-checkbox h-inline">
  <input id="checkbox-inline-02" type="checkbox">
  <label class="c-label" for="checkbox-inline-02">I'm in line</label>
</div>

Checkbox Group with Label ​

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

Show Code
html
<div class="c-float-container -has-checkbox">
  <label class="c-label">Label</label>
  <div class="c-checkbox h-inline">
    <input id="checkbox-group01" type="checkbox">
    <label class="c-label" for="checkbox-group01">I'm in line</label>
  </div>
  <div class="c-checkbox h-inline">
    <input id="checkbox-group02" type="checkbox" checked>
    <label class="c-label" for="checkbox-group02">I'm in line</label>
  </div>
  <div class="c-checkbox h-inline">
    <input id="checkbox-group03" type="checkbox">
    <label class="c-label" for="checkbox-group03">I'm in line</label>
  </div>
</div>

2026 - Pharma4u