A checkbox is a form control that allows multiple selections from a group of choices.

The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.

The checkbox is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

Default Checkbox

Use the checkbox base class to create a checkbox.

NOTE: Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state.

Mixed Checkbox

For a mixed checkbox, that is partially checked, or indeterminate, apply the aria-checked="mixed" state and use icon-checkbox-mixed-18 .

NOTE : JavaScript is required to toggle the aria-checked state.

Large Checkbox

For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-24 , #icon-checkbox-checked-24 and #icon-checkbox-unchecked-24 icons.

Disabled Checkbox

Use the disabled attribute to disable any checkbox input.

Grouped Checkboxes

A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of checkbox fields and labels.

TIP : For large checkboxes, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.