<

Voyager
Voyager

Checkboxes

Checkboxes are inputs that allow users to select multiple options in a list of options, or provides a binary choice when used alone.

Field Label

Indeterminate state checkboxes are set via JavaScript, and cannot be set by a user's' action.

HTML Copy 

<div class="qw-checkbox">
    <input type="checkbox" name="checkbox-example-1" id="checkbox-example-1" value="1" />
    <label for="checkbox-example-1">Checkbox 1</label>
</div>
<div class="qw-checkbox">
    <input type="checkbox" name="checkbox-example-2" id="checkbox-example-2" value="1" checked />
    <label for="checkbox-example-2">Checkbox 1</label>
</div>

Best Practices

Checkboxes should:

  • Always have an associated label
  • Each checkbox indicates a separate decision
  • Use checkboxes for On/Off or Yes/No choices
  • Be listed in an order that makes logical sense
  • Organize groups of similar choices into fieldsets

When displaying groups of checkboxes, use a Fieldset and Legend. This helps users of assistive technologies understand the relationship of the choices. The fieldset wraps the collection of checkboxes and the legend provides a label for the group.

Variants

Styles

Alternate styles, .qw-checkbox-primary, .qw-checkbox-success, and .qw-checkbox-danger, may be used in rare occasions. Due to the amount of attention drawn by these alternate styles, they must only be used alone, not in a group. If an alternate style is used, it should follow the general style rules for using danger, primary, and success styles.

Alternate style checkboxes

No visible label

A checkbox can be displayed with its label visually hidden. This should only be done when their purpose is visually obvious, such as when used as a row selector in a table. For accessibility purposes, it must still have a label.