BDS

Checkbox

Checkboxes allow users to make binary selections, opt in to preferences, and choose multiple independent options. Use clear labels so users understand the consequence of each selection.

Checkbox

Notification preferences

Receive product updates, tips, and announcements via email.

Get notified instantly when someone interacts with your content.

Receive alerts via text message for critical account activity.

Features

  • Optional labels and supporting descriptions for each checkbox.
  • Grouped usage through CheckboxGroup with a semantic fieldset and legend.
  • Visible checked, focus, and disabled states using semantic design tokens.
  • Supports standard native checkbox behavior and attributes.

When to use

Use checkboxes for independent choices, optional preferences, acknowledgements, filters, and settings where more than one item may be selected. When users must choose exactly one option from a set, use radios instead.

Accessibility

Ensure each checkbox has a clear label. Group related checkboxes with a legend when they answer a single question or belong to the same category. Keep descriptions associated with the checkbox via aria-describedby. Maintain visible keyboard focus, adequate touch targets, and sufficient contrast.

Best Practices

Do

Use Descriptive Labels

Write labels that describe the exact choice or commitment being made, such as 'Send me weekly product updates'.

Use Descriptions for Clarity

Add a description when the label alone is not enough to help users understand the option.

Group Related Options

Use CheckboxGroup with a meaningful legend when checkboxes answer a shared question or belong to the same category.

Use for Independent Choices

Use checkboxes only when options are independent and multiple selections are valid.

Don't

Use Vague Labels

Avoid labels like 'Option 1' without context because they force users to guess what each choice means.

Use for Mutually Exclusive Choices

Do not present mutually exclusive options as checkboxes. Use radios when only one selection is allowed.

Rely on Surrounding Layout Alone

Do not rely on surrounding content or layout to explain what a checkbox controls without a clear label.

Hide Consequences from the Label

Do not hide important consequences or requirements away from the checkbox label or description.

Disable Without Context

Do not disable options without giving users enough context when the reason affects completion.

Props API

NameTypeDescription
labelReact.ReactNodeOptional visible label associated with the checkbox input.
descriptionReact.ReactNodeOptional supporting text rendered below the label and connected with aria-describedby.
idstringOptional explicit ID for label and description association; otherwise generated internally.
legendReact.ReactNodeRequired CheckboxGroup legend for grouped checkbox sets.
...propsReact.InputHTMLAttributes<HTMLInputElement>Native checkbox attributes such as checked, defaultChecked, disabled, required, name, value, and onChange.
...props (group)React.FieldsetHTMLAttributes<HTMLFieldSetElement>Native fieldset attributes for grouped checkbox layouts.