Checkboxes

A form element that indicates selection with a check mark.

Design System Guidelines

Standard Checkboxes

Use when the values have longer text that requires a line for each value. To disable a checkbox, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Standard Checkboxes with Error State

Use when the values have longer text that requires a line for each value. Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding interactions. To disable a checkbox, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Show Error State

Inline Checkboxes

Use when the values are short enough to fit on one line, such as numbers.  To disable a checkbox, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Inline Checkboxes with Error State

Use when the values are short enough to fit on one line, such as numbers. Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding interactions. To disable a checkbox, provide a unique ID to its dds__form-check-input and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.

Show Error State

Checkboxes Styled as Cards

Option A

Marketing text

Supporting text

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.