Checkbox

<div class="Checkbox">
  <input class="Checkbox-input" type="checkbox" id="checkbox-1" name="checkbox-1" checked>
  <label class="Checkbox-label" for="checkbox-1">Checkbox</label>
</div>
<div class="Checkbox">
  <input class="Checkbox-input" type="checkbox" id="checkbox-2" name="checkbox-2">
  <label class="Checkbox-label" for="checkbox-2">Checkbox</label>
</div>
<div class="Checkbox">
  <input class="Checkbox-input" type="checkbox" id="checkbox-3" name="checkbox-3" disabled>
  <label class="Checkbox-label" for="checkbox-3">Disabled</label>
</div>
<div class="Checkbox">
  <input class="Checkbox-input" type="checkbox" id="checkbox-4" name="checkbox-4" disabled checked>
  <label class="Checkbox-label" for="checkbox-4">Disabled and Checked</label>
</div>

<div class="Checkbox Checkbox--radio">
  <input class="Checkbox-input" type="radio" id="radio-1" name="radio-demo" checked>
  <label class="Checkbox-label" for="radio-1">Radio Option</label>
</div>
<div class="Checkbox Checkbox--radio" title="disabled text">
  <input class="Checkbox-input" type="radio" id="radio-3" name="radio-demo">
  <label class="Checkbox-label" for="radio-3">Radio Option</label>
</div>
<div class="Checkbox Checkbox--radio">
  <input class="Checkbox-input" type="radio" id="radio-2" name="radio-demo" disabled>
  <label class="Checkbox-label" for="radio-2">Radio Disabled</label>
</div>
<div class="Checkbox Checkbox--radio">
  <input class="Checkbox-input" type="radio" id="radio-4" name="radio-demo-disabled-checked" disabled checked>
  <label class="Checkbox-label" for="radio-4">Radio Disabled and Checked</label>
</div>

<div class="Checkbox Checkbox--inline Checkbox--large">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-large-1" name="checkbox-inline-large-1" checked>
  <label class="Checkbox-label" for="checkbox-inline-large-1">Checkbox</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large" title="disabled text">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-large-3" name="checkbox-inline-large-3">
  <label class="Checkbox-label" for="checkbox-inline-large-3">Checkbox</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-large-2" name="checkbox-inline-large-2" disabled>
  <label class="Checkbox-label" for="checkbox-inline-large-2">Disabled</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-large-4" name="checkbox-inline-large-2" disabled checked>
  <label class="Checkbox-label" for="checkbox-inline-large-4">Disabled and Checked</label>
</div>

<div class="u-spaceTopXl">
  <div class="Checkbox Checkbox--radio Checkbox--large">
    <input class="Checkbox-input" type="radio" id="radio-large-1" name="radio-large" checked>
    <label class="Checkbox-label" for="radio-large-1">Radio Option</label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large">
    <input class="Checkbox-input" type="radio" id="radio-large-2" name="radio-large">
    <label class="Checkbox-label" for="radio-large-2">Radio Option</label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large" title="disabled text">
    <input class="Checkbox-input" type="radio" id="radio-large-3" name="radio-large" disabled>
    <label class="Checkbox-label" for="radio-large-3">Disabled<label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large" title="disabled text">
    <input class="Checkbox-input" type="radio" id="radio-large-4" name="radio-large-disabled-checked-1" disabled checked>
    <label class="Checkbox-label" for="radio-large-4">Disabled and Checked<label>
  </div>
</div>

<div class="Checkbox Checkbox--radio Checkbox--pill">
  <input class="Checkbox-input" type="radio" id="radio-pill-2" name="radio-pill">
  <label class="Checkbox-label" for="radio-pill-2">Pill Radio Default</label>
</div>
<div class="Checkbox Checkbox--pill">
  <input class="Checkbox-input" type="checkbox" id="radio-pill-3" name="radio-pill">
  <label class="Checkbox-label" for="radio-pill-3">Pill Checkbox Default</label>
</div>
<div class="Checkbox Checkbox--radio Checkbox--large Checkbox--pill">
  <input class="Checkbox-input" type="radio" id="radio-pill-1" name="radio-pill">
  <label class="Checkbox-label u-fontSizeLg" for="radio-pill-1">Pill Radio Large</label>
</div>
<div class="Checkbox Checkbox--pill Checkbox--large">
  <input class="Checkbox-input" type="checkbox" id="radio-pill-4" name="radio-pill">
  <label class="Checkbox-label" for="radio-pill-4">Pill Checkbox Large</label>
</div>

<div class="Checkbox Checkbox--inline Checkbox--large Checkbox--colorPrimary">
  <input class="Checkbox-input" type="checkbox" id="checkbox-primary-1" name="checkbox-primary-1">
  <label class="Checkbox-label" for="checkbox-primary-1">Option</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large Checkbox--colorPrimary" title="disabled text">
  <input class="Checkbox-input" type="checkbox" id="checkbox-primary-3" name="checkbox-primary-3">
  <label class="Checkbox-label" for="checkbox-primary-3">Option</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large Checkbox--colorPrimary">
  <input class="Checkbox-input" type="checkbox" id="checkbox-primary-2" name="checkbox-primary-2" disabled>
  <label class="Checkbox-label" for="checkbox-primary-2">Disabled</label>
</div>
<div class="Checkbox Checkbox--inline Checkbox--large Checkbox--colorPrimary">
  <input class="Checkbox-input" type="checkbox" id="checkbox-primary-4" name="checkbox-primary-2" disabled checked>
  <label class="Checkbox-label" for="checkbox-primary-4">Disabled and Checked</label>
</div>

<div class="Checkbox Checkbox--radio Checkbox--large Checkbox--pill Checkbox--colorPrimary u-spaceTopLg">
  <input class="Checkbox-input" type="radio" id="radio-pill-primary-1" name="radio-pill-primary">
  <label class="Checkbox-label u-fontSizeLg" for="radio-pill-primary-1">Pill Large</label>
</div>
<div class="Checkbox Checkbox--radio Checkbox--pill Checkbox--colorPrimary">
  <input class="Checkbox-input" type="radio" id="radio-pill-primary-2" name="radio-pill-primary">
  <label class="Checkbox-label" for="radio-pill-primary-2">Pill Small</label>
</div>

<div class="">
  <div class="Checkbox Checkbox--radio Checkbox--large Checkbox--colorPrimary">
    <input class="Checkbox-input" type="radio" id="radio-primary-1" name="radio-primary">
    <label class="Checkbox-label" for="radio-primary-1">Radio Option</label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large Checkbox--colorPrimary">
    <input class="Checkbox-input" type="radio" id="radio-primary-2" name="radio-primary">
    <label class="Checkbox-label" for="radio-primary-2">Radio Option</label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large Checkbox--colorPrimary" title="disabled text">
    <input class="Checkbox-input" type="radio" id="radio-primary-3" name="radio-primary" disabled>
    <label class="Checkbox-label" for="radio-primary-3">Disabled<label>
  </div>
  <div class="Checkbox Checkbox--radio Checkbox--large Checkbox--colorPrimary" title="disabled text">
    <input class="Checkbox-input" type="radio" id="radio-primary-4" name="radio-primary-disabled-checked" disabled checked>
    <label class="Checkbox-label" for="radio-primary-4">Disabled and Checked<label>
  </div>
</div>

<div class="Checkbox Checkbox--inline">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-1" name="checkbox-inline-1">
  <label class="Checkbox-label" for="checkbox-inline-1">Option</label>
</div>
<div class="Checkbox Checkbox--inline">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-2" name="checkbox-inline-2">
  <label class="Checkbox-label" for="checkbox-inline-2">Option</label>
</div>
<div class="Checkbox Checkbox--inline" title="disabled text">
  <input class="Checkbox-input" type="checkbox" id="checkbox-inline-3" name="checkbox-inline-3">
  <label class="Checkbox-label" for="checkbox-inline-3">Option</label>
</div>