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

Element | Description |
---|---|
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.
STATE | EXAMPLE |
---|---|
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.

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

Dos and Don'ts

- Do use checkbox groups for form fields with five options or fewer.

- 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 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
No records available |
Checkbox Group
No records available |
Events
Checkboxes
No records available |