Checkbox Component

<div class="spr-stack-container-xs">
  <div class="spr-checkbox-group-label">Checkboxes</div>
  <div class="spr-stack-container-sm">
    <input class="spr-checkbox" type="checkbox" value="checkbox" id="checkbox" checked>
    <label for="checkbox" class="spr-checkbox-md">
       <span class="checkbox-icon"></span>
       Checkbox
    </label>
  </div>
  <div class="spr-stack-container-sm">
    <input class="spr-checkbox" type="checkbox" value="checkbox" id="checkbox" checked>
    <label for="checkbox" class="spr-checkbox-xs">
       <span class="checkbox-icon"></span>
       Extra small checkbox
    </label>
  </div>
  <div class="spr-stack-container-sm">
    <input class="spr-checkbox" type="checkbox" value="checkbox" id="checkbox-disabled" disabled>
    <label for="checkbox-disabled" class="spr-checkbox-md">
       <span class="checkbox-icon"></span>
       Disabled checkbox
    </label>
  </div>
  <div class="spr-stack-container-sm">
    <input class="spr-checkbox spr-checkbox-error" type="checkbox" value="checkbox" id="checkbox-error">
    <label for="checkbox-error" class="spr-checkbox-md">
       <span class="checkbox-icon"></span>
       Checkbox with error
    </label>
  </div>
  <div class="spr-stack-container-sm">
    <input class="spr-checkbox spr-checkbox-error" type="checkbox" value="checkbox" id="checkbox-error-disabled" disabled>
    <label for="checkbox-error-disabled" class="spr-checkbox-md">
       <span class="checkbox-icon"></span>
       Disabled checkbox with error
    </label>
  </div>
</div>

@import 'components/checkbox';