Checkboxes

Rules

• Include matching for and id values unique to each label and checkbox pair to associate the two
• Use checkboxes to present a set of options, where none, one, or multiple options can be selected at a time
• Alternately use a checkbox in a single instance to select/unselect the option
• For sets with three or less short options the horizontal layout may be more appropriate
• For sets with longer labels or more than 3 options use the vertically stacked layout

Constraints

• When possible, keep the label short to more easily compare options when used within a set
• Only use a fieldset with legend to group associated inputs (e.g. multiple address inputs or credit card month/year inputs) or a set of radios or checkboxes. Some assistive tools will read the contents of the legend before each nested input to maintain context for a user. The above examples use a legend within the fieldset. The legend is styled like a label.

Principles

• Checkboxes allow a user to select one or more option to indicate their choice, preference or agreement

Accessibility

• Use for="IDReference" to associate the label with the corresponding input id="IDReference"

form-group Required	Use on the parent <div> or <fieldset> that surrounds the <label> and <input>
c-input Required	Use on the <label> that surrounds the <input>
c-checkbox Required	Used with .c-input (not required if .c-checkbox-sm is used instead)
form-group-spacer Modifier	Use with .form-group to increase the space below the input
c-checkbox-sm Modifier	Used with .c-input (required if used in place of .c-checkbox)
c-inputs-stacked Modifier	Custom checkboxes are inline-block by default, if you need them to stack use this on the parent <form> element or another wrapper around the checkbox set

---

• Last updated April 2, 2018
• Authorable - Yes
• Core - Checkboxes