Skip to content

Checkbox13.10.5

Checkboxes allow the selection of multiple options from a set


$ npm i @if-design-system/checkbox@13.10.5

To find out more about when to use selection controls, read this section in the style guide about selection control patterns.
A paved road or a path?
Edit this section

Overview

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. A stand-alone checkbox, or a toggle can be used for a single option that the user can turn on or off.
Edit this section

Usage

Labels

Always use clear and concise labels for checkboxes. Be explicit about the action that will follow if the Checkbox is selected. Labels appear to the right of checkboxes.

Click target

Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.

Default selection

The default view of a set of checkboxes is having no option selected.

Checkboxes are preferred when an explicit action is required to apply settings.

Sizing

With given attributes (data-size), you can vary the size of the checkbox.

Largest
Larger
Large
Medium
Small
Smallest
Edit this section

Behaviours

States

Static
A helpful text
Static with help text
Checked
Disabled
Focused
Invalid
A validation error
Invalid with error message
Invalid + Focus
Checked + Focus
Checked + Invalid
Checked + Disabled

Modifiers

Standalone

If you want to use a checkbox as a standalone component, i.e. just a checkbox without label, use the .standalone-class.

<form autocomplete="off" style="width: 100%">
  <div class="if input-wrapper">
    <div class="if checkboxes">
      <input
        checked
        type="checkbox"
        id="checkbox-standalone-checkbox2"
        class="if checkbox standalone"
        name="checkbox-standalone-checkbox2"
      />
      <label for="checkbox-standalone-checkbox2"></label>
    </div>
  </div>
</form>
Edit this section

Anatomy

A paved road or a path?
  1. Legend (optional)
  2. Vertical checkboxes
  3. Clear and short label
A paved road or a path?
  1. Legend (optional)
  2. Horizontal checkboxes
  3. Clear and short label
Edit this section

Implementation

[...]
  <div class="if input-wrapper">
    <fieldset class="if">
      <legend class="if">A paved road or a path?</legend>
      <div class="if checkboxes [horizontal]">
        <input id="checkboxes-implementation-checkbox-1" type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-1">A path! A path!</label>
        <input id="checkboxes-implementation-checkbox-2" type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-2">A path! A path!</label>
        <input id="checkboxes-implementation-checkbox-3" checked type="checkbox" class="if checkbox" />
        <label for="checkboxes-implementation-checkbox-3">A path! A path!</label>
        <span class="if input-error" aria-live="polite">A validation error</span>
        <span class="if input-help">A helpful text</span>
      </div>
    </fieldset>
  </div>
</form>
[...]
Edit this section

Contact us