Checkbox group

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

Status

Status

Healthy

Figma component

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

Principles

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.

 

Structure

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)

Properties

Attribute

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.

Alignment

Vertical

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.

Horizontal

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.

 

Behavior

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.

Transition

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