Checkbox group

A checkbox group is a form input element formed by multiple checkboxes coming together, which are contextually related to each other.




Figma component

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


Use when

  1. multiple checkboxes need to be used together and as an input element.

Don't use when

  1. if users need to make an explicit and irrevocable choice, consider using the checkbox only.



Checkbox group can be used in horizontally and vertically.

Checkbox group can be used in horizontally and vertically.

  1. Checkbox-group label
  2. Checkbox area (checkbox)
  3. Helper text (optional)



Helper text (boolean)

Helper text can be used when a message needs to be conveyed to the entire checkbox group at the input level.

Input label (boolean)

A checkbox group should be used with a label when it is intended to be used as a form input element or to indicate a group within an overflow menu.



The vertical aligment should be used when displaying the items within the group in a vertical order and conveying the ability to select within each other.


When a checkbox group needs to be horizontally aligned on a form page, it is preferable to use it, but if this is the case, the checkbox group should contain a maximum of 3 items.



Each checkbox group (checkbox) in a form page, modal and overflow menu is independent of the others, meaning selecting or deselecting one checkbox does not impact the selection status of the others.


When each checkbox is checked (pressed) in each checkbox group, only the box area will smoothly transition with a duration of 200ms ease .