Checkbox

The Checkbox component is a UI element that allows users to select one or more options from a set. It consists of a small square box and a label. When selected, a checkmark appears inside the box.
Checkboxes are commonly used in forms, settings, and surveys to enable users to make binary choices.

Usage

Checkbox

Basic Usage


                                                
                                                <label for="checkbox-default" class="Checkbox">
                                                  <input type="checkbox" id="checkbox-default" class="Checkbox__input" name="default" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                  </span>
                                                </label>

Required Input


                                                
                                                <label for="checkbox-required" class="Checkbox">
                                                  <input type="checkbox" id="checkbox-required" class="Checkbox__input" name="required" required />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
                                                  </span>
                                                </label>

Validation State with Validation Text

See Validation state dictionary.

To render validation text as a list, use <ul> element inside of .Checkbox__validationText.
To render validation text with an icon, add <svg> icon inside of .Checkbox__validationText.


                                                
                                                <label for="checkbox-warning" class="Checkbox Checkbox--warning">
                                                  <input type="checkbox" id="checkbox-warning" class="Checkbox__input" name="warning" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                    <span class="Checkbox__validationText">Warning validation text</span>
                                                  </span>
                                                </label>
                                                
                                                <label for="checkbox-danger" class="Checkbox Checkbox--danger">
                                                  <input type="checkbox" id="checkbox-danger" class="Checkbox__input" name="danger" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                    <div class="Checkbox__validationText">
                                                      <ul>
                                                        <li>First validation text</li>
                                                        <li>Second validation text</li>
                                                      </ul>
                                                    </div>
                                                  </span>
                                                </label>
                                                
                                                <label for="checkbox-warning" class="Checkbox Checkbox--warning">
                                                  <input type="checkbox" id="checkbox-warning" class="Checkbox__input" name="warning" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                    <span class="Checkbox__validationText">
                                                      <svg width="20" height="20" aria-hidden="true">
                                                        <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
                                                      </svg>
                                                      <span>Warning validation text with icon</span>
                                                    </span>
                                                  </span>
                                                </label>

Hidden Label


                                                
                                                <label for="checkbox-hidden-label" class="Checkbox">
                                                  <input type="checkbox" id="checkbox-hidden-label" class="Checkbox__input" name="hiddenLabel" required />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label Checkbox__label--hidden">Checkbox Label</span>
                                                  </span>
                                                </label>

Helper Text


                                                
                                                <label for="checkbox-helper-text" class="Checkbox">
                                                  <input type="checkbox" id="checkbox-helper-text" class="Checkbox__input" name="helperText" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                    <span class="Checkbox__helperText">Helper text</span>
                                                  </span>
                                                </label>

Disabled State


                                                
                                                <label for="checkbox-disabled" class="Checkbox Checkbox--disabled">
                                                  <input type="checkbox" id="checkbox-disabled" class="Checkbox__input" name="disabled" disabled />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                  </span>
                                                </label>

As an Item


                                                
                                                <label for="checkbox-item-default" class="Checkbox Checkbox--item">
                                                  <input type="checkbox" id="checkbox-item-default" class="Checkbox__input" name="item" />
                                                  <span class="Checkbox__text">
                                                    <span class="Checkbox__label">Checkbox Label</span>
                                                  </span>
                                                </label>