Checkbox

Checkboxes allow users to select one or more items from a list.

When to use

Multiple selection

Use checkboxes to allow users to select one or more items

Multiple selection

Use checkboxes to allow users to select one or more items

Scannable lists

Use radio groups to show users all the options that are available to choose from all at once

Scannable lists

Use radio groups to show users all the options that are available to choose from all at once

Present sub-lists

Checkboxes allow users to see a parent-child relationship with other checkboxes

Present sub-lists

Checkboxes allow users to see a parent-child relationship with other checkboxes

When to avoid

Single selection

If users can only select one option from a list, consider using radio buttons instead of checkboxes

Single selection

If users can only select one option from a list, consider using radio buttons instead of checkboxes

Too many options

For cases requiring a large amount of items in the list, consider using a selectable dropdown menu in a form setting

Too many options

For cases requiring a large amount of items in the list, consider using a selectable dropdown menu in a form setting

Specifications

Label placement

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

States

Selected

Selected-disabled

Indeterminate

Indeterminate-disabled

Unselected

Unselected-disabled

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Group

A checkbox group must include at least two or more items for a proper selection

Value

Checkbox

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing