View on GitHub

Checkbox

Create consistent cross-browser and cross-device checkboxes.

On this page

Component design version:

  • Checkbox v2.4.0

You can find here the OUDS Checkbox design guidelines.

Overview

Checkboxes allow users to select one or more options from a number of choices.

They are implemented using .checkbox-item and .control-item-* classes, see below. Browser default checkboxes are replaced with the help of the selector .control-item-indicator[type="checkbox"].

<fieldset class="control-items-list">
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input class="control-item-indicator" type="checkbox" value="" id="checkboxDefault" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxDefault">Default checkbox</label>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input checked class="control-item-indicator" type="checkbox" value="" id="checkboxDefault2" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxDefault2">Checked checkbox</label>
    </div>
  </div>
</fieldset>
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 (Bootstrap compatible)
  </label>
</div>
<div class="form-check">
  <input checked class="form-check-input" type="checkbox" value="" id="checkChecked" />
  <label class="form-check-label" for="checkChecked">
  Checked checkbox (Bootstrap compatible)
  </label>
</div>
html

Approach

Control item

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

We use the parent element 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 description 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 ensures a consistent approach, whatever the DOM is. Consequently, none of the elements next to the label should be interactive.

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

Control items list

As checkboxes are almost always grouped in a list, they should be enclosed in a <fieldset> element with a .control-items-list class, this will handle automatic error text display when one of the control items input is invalid; you can add a <legend> element as a title for the list read more. It is also possible to use a <ul> list in place of the <fieldset> (and <li>s for the items) but the error text display will be up to you see an example. If the checkbox is not part of a group and you need the automatic error text display, you can enclose it inside a .checkbox-item-container read more.

Variants

Divider

To display a divider, add .control-item-divider to a .checkbox-item.

<fieldset class="control-items-list">
  <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">Default checkbox with divider</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" checked />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxDivider2">Checked checkbox with divider</label>
    </div>
  </div>
</fieldset>
html

Icon

The recommended way to use icons is to fill an SVG sprite file, and use currentColor for styling. If really necessary, for example when you have a lot of icons, you can use an icon font. Find out more about using icons.

To display an icon, add .control-item-assets-container with an icon (SVG or font-icon most likely) inside, as a child of a .checkbox-item.

<fieldset class="control-items-list">
  <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">Default checkbox with an SVG icon</label>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input class="control-item-indicator" type="checkbox" value="" id="checkboxWithIconFont" checked />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxWithIconFont">Checked checkbox with a font-icon</label>
    </div>
    <div class="control-item-assets-container">
      <span class="icon si si-settings" aria-hidden="true"></span>
    </div>
  </div>
</fieldset>
html

Description text

To display a description text, add a .control-item-description as a sibling of a .control-item-label. Make sure the description is accessible by adding an aria-describedby attribute to the input.

Description text

Description text

<fieldset class="control-items-list">
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxDescription" id="checkboxWithDescription" value="" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxWithDescription">Default checkbox</label>
      <p class="control-item-description" id="checkboxDescription">Description text</p>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxDescription2" id="checkboxWithDescription2" value="" checked />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxWithDescription2">Checked checkbox</label>
      <p class="control-item-description" id="checkboxDescription2">Description text</p>
    </div>
  </div>
</fieldset>
html

Layout

Default

It's recommended to keep checkbox label to no more than three words. When space is limited or when a long label or description text is required, the text can wrap, as this is preferable to truncation. The checkbox indicator and the icon will remain vertically centered, until the .control-item-assets-container reaches a defined maximum height.

Description text

A longer description text that can wrap to another line to show the behaviour

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

<div class="row">
  <div class="col-8 col-md-6 col-xl-5">
    <fieldset class="control-items-list">
      <div class="checkbox-item control-item-divider">
        <div class="control-item-assets-container">
          <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayout1" aria-describedby="checkboxLayout1Description" />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxLayout1">Label</label>
          <p class="control-item-description" id="checkboxLayout1Description">Description text</p>
        </div>
        <div class="control-item-assets-container">
          <svg aria-hidden="true">
            <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </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="checkboxLayout2" aria-describedby="checkboxLayout2Description" />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxLayout2">A short label</label>
          <p class="control-item-description" id="checkboxLayout2Description">A longer description text that can wrap to another line to show the behaviour</p>
        </div>
        <div class="control-item-assets-container">
          <svg aria-hidden="true">
            <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </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="checkboxLayout3" aria-describedby="checkboxLayout3Description" checked />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxLayout3">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-description" id="checkboxLayout3Description">Also a longer description 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="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </svg>
        </div>
      </div>
    </fieldset>
  </div>
</div>
html

Reverse

To reverse the component, simply add .control-item-reverse to a .checkbox-item.

Description text

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

<div class="row">
  <div class="col-8 col-md-6 col-xl-5">
    <fieldset class="control-items-list">
      <div class="checkbox-item control-item-divider control-item-reverse">
        <div class="control-item-assets-container">
          <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayoutRev1" aria-describedby="checkboxLayoutRev1Description" />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxLayoutRev1">Label with reverse layout</label>
          <p class="control-item-description" id="checkboxLayoutRev1Description">Description text</p>
        </div>
        <div class="control-item-assets-container">
          <svg aria-hidden="true">
            <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </svg>
        </div>
      </div>
      <div class="checkbox-item control-item-divider control-item-reverse">
        <div class="control-item-assets-container">
          <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayoutRev2" aria-describedby="checkboxLayoutRev2Description" checked />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxLayoutRev2">A longer label with reverse layout for showing behavior in this case, checkbox indicator and icon will stick to the top area of the component</label>
          <p class="control-item-description" id="checkboxLayoutRev2Description">Also a longer description 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="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </svg>
        </div>
      </div>
    </fieldset>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true

Put your checkboxes 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="reverseCheck" checked />
  <label class="form-check-label" for="reverseCheck">
    Checked reverse checkbox (Bootstrap compatible)
  </label>
</div>
html

Horizontal

You can align horizontally up to three checkboxes if their labels are short, add sufficient space (for example by using .gap-small) between the controls to ensure a clear association of each labels with their corresponding indicator.

<fieldset class="control-items-list">
  <div class="d-lg-flex flex-row gap-small">
    <div class="checkbox-item flex-fill">
      <div class="control-item-assets-container">
        <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayoutRow1" />
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxLayoutRow1">Option 1</label>
      </div>
    </div>
    <div class="checkbox-item flex-fill">
      <div class="control-item-assets-container">
        <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayoutRow2" checked />
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxLayoutRow2">Option 2</label>
      </div>
    </div>
    <div class="checkbox-item flex-fill">
      <div class="control-item-assets-container">
        <input class="control-item-indicator" type="checkbox" value="" id="checkboxLayoutRow3" checked />
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxLayoutRow3">Option 3</label>
      </div>
    </div>
  </div>
</fieldset>
html

Indeterminate

This is often used to indicate a partial selection within a group of choices. For instance, in a nested (hierarchical) list, a parent checkbox can be indeterminate if some, but not all, sub-options are selected. Learn more about nesting in the design guidelines.

Users cannot set a checkbox as indeterminate directly. This must be calculated by the system and set via JavaScript (there is no available HTML attribute available for specifying it). Then, checkboxes use the :indeterminate pseudo class for styling.

Indeterminate state can be used in conjunction with all the other states below.

<fieldset class="control-items-list">
  <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">Indeterminate checkbox</label>
    </div>
  </div>
</fieldset>
html

Here is the associated JavaScript to set a checkbox as indeterminate.

const checkbox = document.getElementById('checkboxIndeterminate')

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 (Bootstrap compatible)
  </label>
</div>
html

States

Disabled

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

<fieldset class="control-items-list">
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input disabled class="control-item-indicator" type="checkbox" value="" id="checkboxDisabled" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxDisabled">Default disabled checkbox</label>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input disabled class="control-item-indicator" type="checkbox" value="" id="checkboxCheckedDisabled" checked />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxCheckedDisabled">Checked disabled checkbox</label>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input disabled class="control-item-indicator" type="checkbox" value="" id="checkboxIndeterminateDisabled" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxIndeterminateDisabled">Indeterminate disabled checkbox</label>
    </div>
  </div>
</fieldset>
html
Bootstrap $enable-bootstrap-compatibility: true 

<div class="form-check">
  <input disabled class="form-check-input" type="checkbox" value="" id="checkDisabled" />
  <label class="form-check-label" for="checkDisabled">
    Default disabled checkbox (Bootstrap compatible)
  </label>
</div>
<div class="form-check">
  <input disabled class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked />
  <label class="form-check-label" for="checkCheckedDisabled">
    Checked disabled checkbox (Bootstrap compatible)
  </label>
</div>
<div class="form-check">
  <input disabled class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" />
  <label class="form-check-label" for="checkIndeterminateDisabled">
    Indeterminate disabled checkbox (Bootstrap compatible)
  </label>
</div>
html

Read only

To create a read only checkbox, the input should be replaced by a span element with role="checkbox", aria-readonly="true" and aria-disabled="true" attributes. The checkbox will be accessible to keyboard navigation and assistive technologies, thanks to aria-labelledby and tabindex, but other interactions will be prevented.

Default readonly checkbox

Checked readonly checkbox

Indeterminate readonly checkbox

<fieldset class="control-items-list">
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <span class="control-item-indicator" role="checkbox" aria-readonly="true" aria-disabled="true" tabindex="0" aria-checked="false" aria-labelledby="checkboxReadonlyLabel"></span>
    </div>
    <div class="control-item-text-container">
      <p class="control-item-label" id="checkboxReadonlyLabel">Default readonly checkbox</p>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <span class="control-item-indicator" role="checkbox" aria-readonly="true" aria-disabled="true" tabindex="0" aria-checked="true" aria-labelledby="checkboxReadonlyCheckedLabel"></span>
    </div>
    <div class="control-item-text-container">
      <p class="control-item-label" id="checkboxReadonlyCheckedLabel">Checked readonly checkbox</p>
    </div>
  </div>
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <span class="control-item-indicator" role="checkbox" aria-readonly="true" aria-disabled="true" tabindex="0" aria-checked="mixed" aria-labelledby="checkboxReadonlyIndeterminate"></span>
    </div>
    <div class="control-item-text-container">
      <p class="control-item-label" id="checkboxReadonlyIndeterminate">Indeterminate readonly checkbox</p>
    </div>
  </div>
</fieldset>
html

Invalid

The invalid state is the equivalent of the ‘Error’ state that you can find in the design specification.

To display an invalid checkbox, add .is-invalid to a .control-item-indicator. An error icon will be automatically shown, if there is a decorative icon specified it will be hidden. Please take a look at our Validation page to learn more.

Description text

Description text

Description text

Incompatible choices.

<fieldset class="control-items-list">
  <div class="checkbox-item control-item-divider">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalid" aria-describedby="checkboxInvalidDescription checkboxInvalidErrorText" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxInvalid">Default invalid checkbox</label>
      <p class="control-item-description" id="checkboxInvalidDescription">Description text</p>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </div>
  <div class="checkbox-item control-item-divider">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalid2" aria-describedby="checkboxInvalid2Description checkboxInvalidErrorText" checked />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxInvalid2">Checked invalid checkbox</label>
      <p class="control-item-description" id="checkboxInvalid2Description">Description text</p>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </div>
  <div class="checkbox-item control-item-divider">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalidIndeterminate" aria-describedby="checkboxInvalidIndeterminateDescription checkboxInvalidErrorText" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxInvalidIndeterminate">Indeterminate invalid checkbox</label>
      <p class="control-item-description" id="checkboxInvalidIndeterminateDescription">Description text</p>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </div>
  <p class="control-item-error-message" id="checkboxInvalidErrorText">Incompatible choices.</p>
</fieldset>
html
Bootstrap $enable-bootstrap-compatibility: true

To display an invalid checkbox, add .is-invalid to a .form-check-input.

<div class="form-check">
  <input class="form-check-input is-invalid" type="checkbox" value="" id="checkInvalid" />
  <label class="form-check-label" for="checkInvalid">
    Default invalid checkbox (Bootstrap compatible)
  </label>
</div>
html

Horizontal

If the layout is horizontal, the <fieldset> must enclose the flex containers so the error message is displayed under the first item.

Please choose at least one.

<fieldset class="control-items-list">
  <div class="d-flex flex-row gap-small w-50">
    <div class="checkbox-item flex-fill">
      <div class="control-item-assets-container">
        <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxLayoutRowInvalid1" aria-describedby="checkboxLayoutRowInvalidErrorText" />
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxLayoutRowInvalid1">Option 1</label>
      </div>
    </div>
    <div class="checkbox-item flex-fill">
      <div class="control-item-assets-container">
        <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxLayoutRowInvalid2" aria-describedby="checkboxLayoutRowInvalidErrorText" />
      </div>
      <div class="control-item-text-container">
        <label class="control-item-label" for="checkboxLayoutRowInvalid2">Option 2</label>
      </div>
    </div>
  </div>
  <p class="control-item-error-message" id="checkboxLayoutRowInvalidErrorText">Please choose at least one.</p>
</fieldset>
html

With <ul>

It is possible to use a <ul> instead of <fieldset> but you will need to handle the error message display as it will not be hidden by default. The error message must be outside of the list as it is not a list item.

  • Description text

  • Description text

You must choose one.

<ul class="control-items-list">
  <li class="checkbox-item control-item-divider">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalidUl" aria-describedby="checkboxInvalidUlDescription checkboxInvalidUlErrorText" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxInvalidUl">Invalid checkbox</label>
      <p class="control-item-description" id="checkboxInvalidUlDescription">Description text</p>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </li>
  <li class="checkbox-item control-item-divider">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxInvalidUl2" aria-describedby="checkboxInvalidUl2Description checkboxInvalidUlErrorText" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxInvalidUl2">Invalid checkbox</label>
      <p class="control-item-description" id="checkboxInvalidUl2Description">Description text</p>
    </div>
    <div class="control-item-assets-container">
      <svg aria-hidden="true">
        <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
      </svg>
    </div>
  </li>
</ul>
<p class="control-item-error-message" id="checkboxInvalidUlErrorText">You must choose one.</p>
html

Unique

If you have a checkbox that is not part of a group but needs validation control, you can surround it with a .checkbox-item-container to hide and display the error text automatically.

You must accept the terms and condition to proceed.

<div class="checkbox-item-container">
  <div class="checkbox-item">
    <div class="control-item-assets-container">
      <input class="control-item-indicator is-invalid" type="checkbox" value="" id="checkboxUniqueInvalid" aria-describedby="checkboxUniqueInvalidErrorText" />
    </div>
    <div class="control-item-text-container">
      <label class="control-item-label" for="checkboxUniqueInvalid">Accept terms and conditions</label>
    </div>
  </div>
  <p class="control-item-error-message" id="checkboxUniqueInvalidErrorText">You must accept the terms and condition to proceed.</p>
</div>
html

Fieldset <legend>

For accessibility reasons, it is required to provide understandable checkbox labels without relying on visual context. It is also good practice to add a checkbox group title inside a <legend> element as the first child of the <fieldset> element. Screen readers will read the legend before navigating through the checkboxes; this way, keyboard navigation users have more information on what is expected with the multiple checkboxes element.

Checkboxes group example

Description text

Description text

<div class="row">
  <div class="col-md-6">
    <fieldset class="control-items-list">
      <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">Group checkbox 1</label>
          <p class="control-item-description" id="checkboxGroup1Description">Description text</p>
        </div>
        <div class="control-item-assets-container">
          <svg aria-hidden="true">
            <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </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" aria-describedby="checkboxGroup2Description" checked />
        </div>
        <div class="control-item-text-container">
          <label class="control-item-label" for="checkboxGroup2">Group checkbox 2</label>
          <p class="control-item-description" id="checkboxGroup2Description">Description text</p>
        </div>
        <div class="control-item-assets-container">
          <svg aria-hidden="true">
            <use xlink:href="/orange/docs/0.6/assets/img/ouds-web-sprite.svg#heart-empty" />
          </svg>
        </div>
      </div>
    </fieldset>
  </div>
</div>
html

Standalone

This standalone version is commonly used for building custom components and should not be used on its own. 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">Standalone checkbox</span>
</label>
html
Bootstrap $enable-bootstrap-compatibility: true

Be careful when using this, as 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="Standalone checkbox (Bootstrap compatible)" />
</div>
html