Checkbox - Astridd

Overview

Checkboxes are for selecting one or several options from a list of many and are predominantly used within forms. They are stacked vertically by default.

Examples

Static variation

Choose your options

Option 1

Option 2

Option 3

<div class="checkbox" data-required-min="1" required>
  <fieldset>
    <legend>Choose your options</legend>
    <div class="checkbox__group">
      <label for="formCheckbox-1" class="checkbox__label">
        Option 1
        <input type="checkbox" name="formCheckbox" id="formCheckbox-1" class="checkbox__field" data-validator="checbox_required">
        <span class="checkbox__indicator"></span>
      </label>
    </div>
    <div class="checkbox__group">
      <label for="formCheckbox-2" class="checkbox__label">
        Option 2
        <input type="checkbox" name="formCheckbox" id="formCheckbox-2" class="checkbox__field" data-validator="min_required">
        <span class="checkbox__indicator"></span>
      </label>
    </div>
    <div class="checkbox__group">
      <label for="formCheckbox-3" class="checkbox__label">
        Option 3
        <input type="checkbox" name="formCheckbox" id="formCheckbox-3" class="checkbox__field" data-validator="min_required">
        <span class="checkbox__indicator"></span>
      </label>
    </div>
  </fieldset>
</div>

Usage guidelines

Dos	Donts
Do use to present several options, of which a user can select one or many options.	Don't use to present several options, of which you want the user to be able to select only one. Use 'Radio Buttons' or 'Dropdown select' form fields instead.
Do create labels that clearly explain the option being selected.
Do use in the instance of an 'opt-in' check box.

Implementation guidelines

Name	Attribute	Description
Required	`required`	Requires a value to be selected - cannot be left empty. Minimum of one inputs must be checked. Apply to the `.checkbox` element.
Minimum required	`data-required-min`	Specify how many Checkboxes in the group must be checked in order to pass validation.