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

I Agree

Standalone

Each checkbox component includes a text label and a transparent container outlined in gray. Use this component as a 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.

States

In addition to the default state, every checkbox option has a hover state, a focus state, a checked state and an error state. In a list, the error state affects the entire list container.

I Agree

You must agree to our Terms of Use.

Option 1

Option 2

Option 3

You must choose at least two options.

Checkbox in Error State

A checkbox or checkbox list in the error state must be used with an input error component to guide the user in correcting the error.

Microcopy

Text labels for standalone checkboxes should be full sentences. 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.