Skip to main content

Checkbox

Component
Live

The Checkbox component allows users to make one or more selections from a set of options.

FigmaCode

Usage​

Checkboxes provide a label and clickable box in order to make a selection. One or more checkboxes can be displayed, and users are able to select one or more options.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Checkbox } from "@iag/chroma-react-ui.components";

When to use​

Use Checkboxes when multiple options can be selected and the options presented are not mutually exclusive. A Checkbox can also be used to indicate acceptance or agreement. For example, acceptance of Terms and Conditions.

When to avoid​

Avoid using Checkboxes when only one option can be selected from a list. In this case consider the Radio component. Also avoid Checkboxes where selecting one option excludes others, consider the Select or Segmented Control component instead.

Do

  • Do list options in a meaningful order.
  • Do use simple labels for easy scanning.
  • Do start all checkbox labels with a capital letter.
  • Do use Legends on Checkbox groups to provide context to the user.
  • Do provide help text for additional context where critical.
  • Do use informative error messages for easier correction.

Don't

  • Don't end a Checkbox label with punctuation.
  • Don't add large amounts of text to the Legend or additional content.

Additional content​

Additional content can be added where options are complex and require further information to assist the user. Only add where critical, as overloading a checkbox label can cause accessibility issues.

References​