Checkboxes

Custom Checkboxes

To use custom checkboxes, be sure to include your input before your label. Failing to do so will break styles.

<!-- Custom Checkboxes -->
<fieldset class="column column--full">
  <label>Checkboxes</label>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox1--custom" checked/>
    <label for="dashing-checkbox1--custom">Option 1</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox2--custom"/>
    <label for="dashing-checkbox2--custom">Option 2</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox3--custom"/>
    <label for="dashing-checkbox3--custom">Option 3</label>
  </div>
</fieldset>

<fieldset class="column column--full">
  <label>Disabled Checkbox</label>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--custom-disabled" disabled checked/>
    <label for="dashing-checkbox--custom-disabled">Disabled</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--custom-disabled2" disabled/>
    <label for="dashing-checkbox--custom-disabled2">Disabled</label>
  </div>
</fieldset>

<!-- Add the class .has-error to the parent container to apply error styles -->
<fieldset class="column column--full has-error">
  <label>Checkboxes with Errors</label>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--error1" checked/>
    <label for="dashing-checkbox--error1">Option 1</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--error2" />
    <label for="dashing-checkbox--error2">Option 2</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--error3" />
    <label for="dashing-checkbox--error3">Option 3</label>
  </div>
</fieldset>

<!-- Add the class .has-warning to the parent container to apply warning styles -->
<fieldset class="column column--full has-warning">
  <label>Checkboxes with Warnings</label>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--warning1" checked/>
    <label for="dashing-checkbox--warning1">Option 1</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--warning2" />
    <label for="dashing-checkbox--warning2">Option 2</label>
  </div>
  <div class="checkbox--custom">
    <input type="checkbox" id="dashing-checkbox--warning3" />
    <label for="dashing-checkbox--warning3">Option 3</label>
  </div>
</fieldset>

<!-- Add the class .inline to the .checkbox--custom element to list your checkboxes vertially -->
<fieldset class="column column--full">
  <label>Inline Checkboxes</label>
  <div class="checkbox--custom inline">
    <input type="checkbox" id="dashing-checkbox--custom-inline1" checked/>
    <label for="dashing-checkbox--custom-inline1">Option 1</label>
  </div>
  <div class="checkbox--custom inline">
    <input type="checkbox" id="dashing-checkbox--custom-inline2"/>
    <label for="dashing-checkbox--custom-inline2">Option 2</label>
  </div>
  <div class="checkbox--custom inline">
    <input type="checkbox" id="dashing-checkbox--custom-inline3"/>
    <label for="dashing-checkbox--custom-inline3">Option 3</label>
  </div>
</fieldset>

//Include these variables in your theme file to change the color of your checkbox
$checkbox--active: $blue !default; //Color of checkbox when checked
$checkbox--icon: $white !default; //Color of check icon when checked
$checkbox--focus: $blue-300 !default; //Color of border around checkbox when focused
$checkbox--disabled: $gray-150 !default; //Color of checkbox when checked and disabled
$checkbox--icon-disabled: $gray-500 !default; //Color of check icon when checked and disabled

Default Checkbox Card

To use smaller checkbox cards apply the .checkbox-card--small class to the .checkbox-card.

Checkbox Card

Option 1

Option 2

Disabled

<!-- Checkbox Button Cards -->
<fieldset class="column column--full">
  <label>Checkbox Card</label>
  <div class="checkbox-card">
    <input type="checkbox" name="checkbox-inline" id="checkbox-inline1" checked/>
    <label for="checkbox-inline1" class="card">Option 1</label>
  </div>
  <div class="checkbox-card">
    <input type="checkbox" name="checkbox-inline" id="checkbox-inline2" />
    <label for="checkbox-inline2" class="card">Option 2</label>
  </div>
  <div class="checkbox-card">
    <input type="checkbox" name="checkbox-inline" id="checkbox-inline3" disabled />
    <label for="checkbox-inline3" class="card disabled">Disabled</label>
  </div>
</fieldset>

//Include these variables in your theme file to change the color or padding of your checkbox button cards
$card-checkbox--active: $blue !default; //Color of checkbox and card when checked
$card-checkbox--focus: $blue-300 !default; //Color of border around card-checkbox when focused
$card-checkbox--padding: 1rem !default; //Padding of checkbox

Small Checkbox Card

To use smaller checkbox cards apply the .checkbox-card--small class to the .checkbox-card.

Small Checkbox Card

Option 1

Option 2

Disabled

<!-- Small Checkbox Cards -->
<fieldset class="column column--full">
  <label>Small Checkbox Card</label>
  <div class="checkbox-card checkbox-card--small">
    <input type="checkbox" name="checkbox-small" id="checkbox-small1" checked/>
    <label for="checkbox-small1" class="card">Option 1</label>
  </div>
  <div class="checkbox-card checkbox-card--small">
    <input type="checkbox" name="checkbox-small" id="checkbox-small2" />
    <label for="checkbox-small2" class="card">Option 2</label>
  </div>
  <div class="checkbox-card checkbox-card--small">
    <input type="checkbox" name="checkbox-small" id="checkbox-small3" disabled />
    <label for="checkbox-small3" class="card disabled">Disabled</label>
  </div>
</fieldset>

Block Checkbox Card

To use block style checkbox cards apply the .is-block class to the .checkbox-card.

Block Checkbox Card

Option 1

Option 2

Disabled

<!-- Block Style Checkbox Cards -->
<fieldset class="column column--full">
  <label>Block Checkbox Card</label>
  <div class="checkbox-card is-block">
    <input type="checkbox" name="checkbox-block" id="checkbox-block1" checked/>
    <label for="checkbox-block1" class="card">Option 1</label>
  </div>
  <div class="checkbox-card is-block">
    <input type="checkbox" name="checkbox-block" id="checkbox-block2" />
    <label for="checkbox-block2" class="card">Option 2</label>
  </div>
  <div class="checkbox-card is-block">
    <input type="checkbox" name="checkbox-block" id="checkbox-block3" disabled />
    <label for="checkbox-block3" class="card disabled">Disabled</label>
  </div>
</fieldset>