​ ​ ​ Forms - Checkboxes | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. ATOMS
  3. FORMS

UI Components / Forms

Checkboxes

Select none, one or multiple options. No option is preselected by default. Once an option is touched, a user can return to the unselected state of the component.

The button groups featured in this section have checkbox button behaviour associated with them. This is achieved by using Bootstrap and adding data-toggle="buttons" the .btn-group parent container. Adding a type="checkbox" to each input button creates the checkbox button effect.

Checkbox

Being the least mobile-friendly pattern of the category, use with solid rationale.

Consider when labels exceed 44 characters or helper text is necessary for each option.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Label</label>
  <div class="controls-stacked flush-ends">
    <label class="control checkbox">
      <input checked="checked" type="checkbox">
      <span class="control-indicator" tabindex="0"></span>
      Option one is selected
    </label>
    <label class="control checkbox">
      <input type="checkbox">
      <span class="control-indicator" tabindex="0"></span>
      Option two can also be selected
    </label>
    <label class="control checkbox disabled">
      <input disabled="disabled" type="checkbox">
      <span class="control-indicator" tabindex="0"></span>
      Option three is disabled
    </label>
  </div>
  <p class="help-block hard-top">Helper text if needed</p>
</div>

Checkbox bar

Best for limited options, utilizing a single horizontal row.

Helper text if needed

<div class="form-group">
  <label class="control-label block">What times are you available?</label>
  <div aria-label="..." class="btn-group btn-group-bar" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="checkbox" autocomplete="off" checked="checked">Morning (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">Afternoon
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">Evening
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Checkbox bar (flexbox)

Best for limited options, utilizing a single horizontal row that spans the full width of a column.

Helper text if needed

<div class="form-group">
  <label class="control-label block">What times are you available?</label>
  <div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="checkbox" autocomplete="off" checked="checked">Morning (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">Afternoon
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">Evening
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Checkbox pills

Use with many options when horizontal space allows.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Age range</label>
  <div aria-label="..." class="btn-group" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="checkbox" autocomplete="off" checked="checked">Middle school (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">High school
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">College
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">20s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">30s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">40s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">50s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">60s+
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>

Checkbox pills (block)

Use when vertical space allows.

Helper text if needed

<div class="form-group">
  <label class="control-label block">Age range</label>
  <div aria-label="..." class="btn-group btn-group-block" role="group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="checkbox" autocomplete="off" checked="checked">Middle school (Pre-selected)
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">High school
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">College
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">20s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">30s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">40s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">50s
    </label>
    <label class="btn btn-default">
      <input type="checkbox" autocomplete="off">60s+
    </label>
  </div>
  <p class="help-block">Helper text if needed</p>
</div>