User Interface / Components / Selections controls

Selection controls such as radio buttons, checkboxes or switches allow the user to control certain options, settings or states. The size of the controls depends on the basic type size used, which can adapt to the viewport width. Selection controls are available in both dark and light.

Checkbox

Checkboxes allow the choice of one option, no option or several options. There is no interdependence between checkboxes in a group. Each checkbox is given a label.

Text

HTML

<label class="aui-checkbox aui-js-checkbox">
  <input class="aui-checkbox__input" type="checkbox">
  <span class="aui-checkbox__label">Text</span>
</label>
<label class="aui-checkbox aui-js-checkbox">
  <input class="aui-checkbox__input" type="checkbox">
  <span class="aui-checkbox__label">Text</span>
</label>

Radio Button

Radio buttons enable the selection of one out of at least two options. Activation of a radio button therefore rules out the activation of other radio buttons of the same group. Each radio button has a label.

Text

HTML

<label class="aui-radio aui-js-radio">
  <input class="aui-radio__input" type="radio" name="sample-radio">
  <span class="aui-radio__label">Text</span>
</label>
<label class="aui-radio aui-js-radio">
  <input class="aui-radio__input" type="radio" name="sample-radio">
  <span class="aui-radio__label">Text</span>
</label>

Switch

Switch controls are used for simple settings and allow the user to switch between two different states. The states available are communicated by means of a label. The label is positioned on the left or right or on both sides.

Label

HTML

<div>
  <label class="aui-switch aui-switch--text-left">
    <input type="checkbox" class="aui-switch__input">
    <span class="aui-switch__text">Label</span>
    <span class="aui-switch__track" aria-hidden="true">
      <span class="aui-switch__thumb"></span>
    </span>
  </label>
</div>
<div>
  <label class="aui-switch aui-switch--text-left">
    <input type="checkbox" class="aui-switch__input" checked>
    <span class="aui-switch__text">Label</span>
    <span class="aui-switch__track" aria-hidden="true">
      <span class="aui-switch__thumb"></span>
    </span>
  </label>
</div>