Checkbox

A checkbox is a type of input that can be used in one of two ways. As a standalone option it allows the user to visually record a yes/no response. In a form list, it allows the user to select multiple options for a single prompt. To restrict the user to selecting only one option, use the Radio component.

Variants

Option 1

Standard

The standard checkbox component includes the checkbox in put and a text label. In addition to the default state, every checkbox option has a hover state, a focus state, and a checked state. The error state takes the form of an Input Error component.

Option 1

Contained

In addition to the input and label, the contained checkbox variant has a stroke border. It has all the same states as the standard variant. The error state takes the form of an Input Error component.

Design Environment

I have read the above Terms and Conditions

Standalone

Use a single checkbox standalone when it will function as a yes/no response. Other components can be nested to appear within the container in the checked state. There should be a margin of 16px between the container and the previous component.

Option 1

Option 2

Option 3

List

Use this component in a list when the user can choose more than one of multiple options. Options should be listed vertically with one checkbox per row. There should be a margin of 16px between all checkbox components.

Microcopy

Text labels for standalone checkboxes should be full sentences in the first person. Listed checkboxes can be full sentences or fragments. In a list, all options should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation, unless the text is a question.