Input - Checkbox

An input control to check or uncheck a selection

Healthy

Show details

Overview

Checkboxes allow marketers to check on or off specific selections. It allows for multiple selections from a list of options, providing a versatile input method for various use cases.

Design

Checkbox

The individual control that allows the marketer to make a selection.

Variants

Default: A basic checkbox input that includes the checkbox control as well as a label.

Bordered: A checkbox that has a larger click target and container—can be useful when more visual emphasis is needed, or additional information is included inside of the container with the selection.

Default, not selected

Default, selected

Bordered, not selected

Bordered, selected

States

Default

State=Not Checked, :hover=False, :focus=False, :disabled=False

State=Checked, :hover=False, :focus=False, :disabled=False

State=Indeterminate, :hover=False, :focus=False, :disabled=False

State=Not Checked, :hover=True, :focus=False, :disabled=False

State=Checked, :hover=True, :focus=False, :disabled=False

State=Indeterminate, :hover=True, :focus=False, :disabled=False

State=Not Checked, :hover=False, :focus=True, :disabled=False

State=Checked, :hover=False, :focus=True, :disabled=False

State=Indeterminate, :hover=False, :focus=True, :disabled=False

State=Not Checked, :hover=False, :focus=False, :disabled=True

State=Checked, :hover=False, :focus=False, :disabled=True

State=Indeterminate, :hover=False, :focus=False, :disabled=True

Bordered

:checked=False, :disabled=False, :hover=False, :focus=False, :error=False

:checked=False, :disabled=False, :hover=True, :focus=False, :error=False

:checked=False, :disabled=True, :hover=False, :focus=False, :error=False

:checked=False, :disabled=False, :hover=False, :focus=True, :error=False

:checked=True, :disabled=False, :hover=False, :focus=False, :error=False

:checked=False, :disabled=False, :hover=False, :focus=False, :error=True

Additional properties

Description: provides additional context or details for the related checkbox item.

Leading icon: can be used to help draw relationship between a selection (for example, Apple and Android icons before the label selection, indicating the app type).

Trailing icon: another option for adding visual emphasis to the checkbox item.

Trailing badge: a badge that follows a checkbox label, commonly used for cases where a certain option is recommended.

Slot: custom content can be included if placed in a slot—used when a particular selection may have child content once selected.

Checkbox group

A collection of multiple checkboxes for selecting options within a related category or set. Depending on the number of items, checkbox groups can have either a vertical or horizontal orientation, with the vertical option as the preferred default.

Checkbox group, vertical

Checkbox group, horizontal

Bordered checkbox group, vertical

Bordered checkbox group, horizontal

Guidelines

Use cases

Use the Checkbox component when marketers need to make multiple selections from a list of options, such as choosing preferences, interests, or features.

Implement the component in forms, surveys, preference settings, or any interface requiring multiple-choice selection.

Note: Checkboxes share a similar function with the Toggle component, but Checkboxes should be used when the user is required to save the form (i.e a save button).

Use a Checkbox over a Toggle when a save required for the action or setting to persist.

Provide clear labels for each checkbox option to ensure clarity and facilitate informed decision-making.

Offer an intuitive user interface with visually distinct checkboxes and easy-to-understand interaction patterns.

Consider the layout and presentation of checkboxes to optimize space usage and improve readability.

Don't

Don't overwhelm users with too many checkboxes in a single group, as it can lead to decision fatigue and confusion.

Don't use checkboxes for mutually exclusive options; instead, use radio buttons to prevent ambiguity.

Don't neglect to test the Checkbox component across different devices and screen sizes to ensure compatibility and responsiveness.

Content

Checkboxes should always leverage the built-in label and provide descriptive labels for each option to guide marketers in making selections. It should also provide clear instructions or contextual information to aid in decision-making and prevent errors.

Accessibility

Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for each checkbox.

Ensure that the Checkbox component is navigable using keyboard controls, allowing marketers to toggle checkboxes without relying solely on mouse interactions.

Provide sufficient color contrast and visual indicators to highlight selected checkboxes and improve visibility for users with low vision or color vision deficiencies.

Test the Checkbox component with assistive technologies and screen readers to verify its accessibility and usability for marketers with disabilities.

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Storybook

Includes a link to an external code repository

Open link

Status

The component has a health status indicated