Aileron

Checkbox

Storybook

Checkbox

Checkboxes allow users to make a binary selection between 2 mutually exclusive options

Usage Guidelines

Checkboxes are aligned with other form fields and they have an enabled (selected) and disabled (de-selected) state. The default state can be either enabled or disabled.

Text label

Describe the user’s selection that will be submitted with the form.

Accessibility

Additional hidden text can be added to the label if context requires so.

<!-- Default -->
<div class="input-control-container">
    <input type="checkbox" name="cb1" id="cb1">
    <label for="cb1">
    <span class="input-control"></span>Checkbox label
  </label>
</div>


<!-- Error -->
<div class="input-control-container error">
    <input type="checkbox" name="cb2-error" id="cb2-error">
    <label for="cb2-error">
    <span class="input-control"></span>Checkbox label - error
      <span class="show-for-sr"></span>
  </label>
    <span class="error-message" aria-hidden="true"></span>
</div>


<!-- Disabled -->
<div class="input-control-container">
    <input type="checkbox" name="cb3-disabled" id="cb3-disabled" disabled>
    <label for="cb3-disabled">
    <span class="input-control"></span>Checkbox label - disabled
  </label>
</div>