Design
Web component
Is documented
The component is fully documented
Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Principles
Use when
- multiple checkboxes need to be used together and as an input element.
Don't use when
- if users need to make an explicit and irrevocable choice, consider using the checkbox only.
Structure
- Checkbox-group label
- Checkbox area (checkbox)
- 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. |
Placement
Vertical
The vertical placement 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 .