A component that groups together checkboxes, and arranges them to be inline with the design system's form patterns. Use checkboxes when the list of available options are less than 8. By Default, all options should be unselected.

🚧 Under construction

This component is under active development. If you need this component for your project, create an issue in the GitHub repo.


Groups together checkboxes into a format that is consistent with other form elements.
Used for selection elements that are less than 8 in count.

#Component structure

Default and Error States
  1. CheckboxGroup label and required text.
  2. Optional helper text.
  3. CheckboxGroup options.


Checkboxes allow for 3 states:
  1. Selected
  2. Unselected
  3. Indeterminate

#Indeterminate state

The Indeterminate state is applicable when checkboxes are organized in a hierarchy. If only a few of the child options are selected the state is indeterminate.
  1. When Selecting the parent checkbox, all child checkboxes are selected.
  2. If a child checkbox is unselected, the parent checkbox’s state is indeterminate.
  3. Selecting an Indeterminate checkbox will deselect all child checkboxes.

Copyright 2021 Arc XP