View on GitHub

Checkbox

Create consistent cross-browser and cross-device checkboxes.

On this page

You can find here the OUDS Checkbox design guidelines.

Basic example 

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDefault" checked>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDefault">Label</label>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDefault2">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDefault2">Label</label>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDefault">
  <label class="form-check-label" for="checkDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
  <label class="form-check-label" for="checkChecked">
    Checked checkbox
  </label>
</div>
html

Approach

Browser default checkboxes are replaced with the help of .control-item-indicator[type="checkbox"]. Checkboxes are for selecting one or several options in a list.

Checkboxes are implemented using .control-item-* classes, see below.

Control item

Control item is an abstraction for several non-text input components that have similar behavior and layout. It contains an <input> indicator, a text container for the label and an optional icon.

We use the future friendly child check selector (:has) for all our <input> states, like :invalid or :disabled. When combined with the .control-item-label class, we can easily style the text for each item based on the <input>’s state.

.control-item-assets-container controls the position of the .control-item-indicator and the optional icon.

.control-item-text-container contains the label and optional helper text and controls their positioning.

.control-item-label extend their clickable area until a .checkbox-standalone, .radio-button-standalone, .switch-standalone or a position: relative; is found in the page hierarchy. This ensure a consistent approach, whatever the DOM is. Consequently, none of the elements next to the label should be interactive.

.control-item-indicator uses customized Solaris icons to indicate checked states.

Variants

Divider

You can display a divider by adding .control-item-divider to a .checkbox-item.

<div class="checkbox-item control-item-divider">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDivider">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDivider">Label</label>
  </div>
</div>
<div class="checkbox-item control-item-divider">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDivider2">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDivider2">Label</label>
  </div>
</div>
html

Icon

You can display an icon by adding .control-item-assets-container with an icon (SVG or font-icon most likely) inside as a child of a .checkbox-item.

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxWithSVG">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxWithSVG">Label</label>
  </div>
  <div class="control-item-assets-container">
    <svg aria-hidden="true">
      <use xlink:href="/docs/0.4/assets/img/ouds-web-sprite.svg#heart-recommend"/>
    </svg>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxWithIconFont">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxWithIconFont">Label</label>
  </div>
  <div class="control-item-assets-container">
    <span class="icon si si-settings" aria-hidden="true"></span>
  </div>
</div>
html

Helper text

You can display an helper text by adding a .control-item-helper as a sibling of a .control-item-label, don’t forget to make it accessible by adding an aria-describedby attribute on the input.

Helper Text

Helper Text

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxHelperTextDescription" id="checkboxHelperText" value="" checked>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxHelperText">Label</label>
    <p class="control-item-helper" id="checkboxHelperTextDescription">Helper Text</p>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxHelperTextDescription2" id="checkboxHelperText2" value="">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxHelperText2">Label</label>
    <p class="control-item-helper" id="checkboxHelperTextDescription2">Helper Text</p>
  </div>
</div>
html

Reverse

You can reverse the component by adding .control-item-reverse to a .checkbox-item.

<div class="checkbox-item control-item-reverse">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxReverse" checked>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxReverse">Label</label>
  </div>
</div>
<div class="checkbox-item control-item-reverse">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxReverse2">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxReverse2">Label</label>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class. 
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>
html

States

Indeterminate

Often used when the checkbox represents a partial selection. For example, in a nested (hierarchical) list, a parent checkbox can be indeterminate if some but not all sub-options are checked. This is not a state the user can directly selects, it must be calculated by the system.

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate state can be combined with disabled and invalid states.

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxIndeterminate">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxIndeterminate">Label</label>
  </div>
</div>
html

Here is the associated JavaScript to set the indeterminate state.

const checkbox = document.getElementById('checkbox')

checkbox.indeterminate = true
Bootstrap $enable-bootstrap-compatibility: true 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
  <label class="form-check-label" for="checkIndeterminate">
    Indeterminate checkbox
  </label>
</div>
html

Disabled

Add the disabled attribute and the associated <label> are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxIndeterminateDisabled" disabled>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxIndeterminateDisabled">Label</label>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxDisabled" disabled>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxDisabled">Label</label>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator" type="checkbox" value="" id="checkboxCheckedDisabled" checked disabled>
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxCheckedDisabled">Label</label>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
  <label class="form-check-label" for="checkIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
  <label class="form-check-label" for="checkDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
  <label class="form-check-label" for="checkCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>
html

Invalid

You can display an invalid checkbox by adding .is-invalid to a .control-item-indicator. Please take a look at our Validation page to know more about this.

<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalid">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxInvalid">Label</label>
  </div>
</div>
<div class="checkbox-item">
  <div class="control-item-assets-container">
    <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalid2">
  </div>
  <div class="control-item-text-container">
    <label class="control-item-label" for="checkboxInvalid2">Label</label>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true 
<div class="form-check">
  <input class="form-check-input is-invalid" type="checkbox" value="" id="checkInvalid">
  <label class="form-check-label" for="checkInvalid">
    Invalid checkbox
  </label>
</div>
html

Group

When checkboxes belong to a group (e.g., in a form), you must provide clear context by using a <legend> element inside a <fieldset> for the group title, this way screen readers will read the legend before navigating through the checkboxes.

Checkboxes group example

Helper text

Also a longer helper text, it will also wrap at some point depending on the component width

<div class="row">
  <fieldset class="col-md-6">
    <legend>Checkboxes group example</legend>
    <div class="checkbox-item control-item-divider">
      <div class="control-item-assets-container">
        <input class="control-item-indicator" type="checkbox" value="" id="checkboxGroup1" aria-describedby="checkboxGroup1Description">
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxGroup1">Label</label>
        <p class="control-item-helper" id="checkboxGroup1Description">Helper text</p>
      </div>
      <div class="control-item-assets-container">
        <svg aria-hidden="true">
          <use xlink:href="/docs/0.4/assets/img/ouds-web-sprite.svg#heart-recommend"/>
        </svg>
      </div>
    </div>
    <div class="checkbox-item control-item-divider">
      <div class="control-item-assets-container">
        <input class="control-item-indicator" type="checkbox" value="" id="checkboxGroup2" checked aria-describedby="checkboxGroup2Description">
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxGroup2">A longer label for showing behavior in this case, checkbox indicator and icon will stick to the top area of the component</label>
        <p class="control-item-helper" id="checkboxGroup2Description">Also a longer helper text, it will also wrap at some point depending on the component width</p>
      </div>
      <div class="control-item-assets-container">
        <svg aria-hidden="true">
          <use xlink:href="/docs/0.4/assets/img/ouds-web-sprite.svg#heart-recommend"/>
        </svg>
      </div>
    </div>
  </fieldset>
</div>
html

Standalone

This is commonly used to build custom component and shouldn’t be used alone. Remember to provide some sort of accessible name for assistive technologies (for instance, using aria-labelledby, a .visually-hidden, aria-label or a second label). See the forms overview accessibility section for details.

For the standalone Checkbox, we provide a completely different architecture to ease the integration inside your projects.

<label class="checkbox-standalone">
  <input class="control-item-indicator" type="checkbox" value="">
  <span class="visually-hidden">Label</span>
</label>
html
Bootstrap $enable-bootstrap-compatibility: true

Be careful using this, you must implement the background on hover, focus and active states.

<div style="position: relative">
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
html