Checkboxes

Checkboxes are interactive form elements that let users select multiple options from a group of up to five predefined choices.

Overview

Use checkboxes within checkbox groups, as both have unique props and events.

Checkboxes and checkbox groups have a tablet/mobile breakpoint of 1024px. On tablet and mobile screens, they will shrink to better fit the limited content area while still retaining a large touch target area.

Design and Layout

Anatomy

Checkboxes Anatomy
ElementDescription
1. Checkbox Group Container Holds all components of the checkbox group
2. Label Text for label element
3. Optional Optional note can be added for non-required fields
4. Tooltip Provides additional information
5. Checkboxes Individual buttons that can be stacked vertically or horizontally
6. Help Text Displays additional information such as formatting requirements
7. Input Notification Displays error messages

Style Variations

Each checkbox uses a distinct color, line weight, and effect to clearly communicate its purpose, providing visual feedback and enhancing usability.

STATEEXAMPLE
Default
Focus
Selected
Error
Disabled

Checkbox Widths

General Layout

When individual checkboxes in a group have varied text lengths, set all checkboxes to the width of the widest one.

Radio button width
Minimum Widths

Vary checkbox widths to fit the viewport to ensure consistent spacing and adequate touch target sizes. The minimum widths are as follows :

  • Desktop: 182px
  • Tablet: 162px
  • Mobile: Full width of the content area
Radio button width

Dos and Don'ts

Do
  • Do use checkbox groups for form fields with five options or fewer.
Don't
  • Don't use a horizontal layout for more than three options or options longer than one or two words. Instead, use vertical stacks for easier scanning.
Do
  • Do ensure all options are the same width. If one option is wider due to text length, set all options to the width of the widest one.

Installation

Checkboxes

Checkbox Group

Props

Checkboxes

Checkbox Group

Events

Checkboxes