errorMessage

Checkbox groups should use help text for error messaging.

description

Checkbox groups should use help text for descriptions. Descriptions are valuable for giving context behind why a selection is required, or for clarifying the options.

When a description is present and an error is triggered, it is replaced with an error message. Once the error is resolved, the help text description reappears.

isDisabled

A checkbox group in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later. The field label, checkboxes, and help text are all displayed in a disabled state when the checkbox group is disabled.

isError

Checkbox groups can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. The error is indicated with negative help text, along with an icon.

orientation

Checkbox groups can be either horizontal or vertical. By default, checkbox groups are stacked vertically. Use a horizontal checkbox group when vertical space is limited.

isRequired

Checkbox groups can be marked as optional or required, depending on the situation. Optional checkbox groups are either denoted with text added to the end of the label — "(optional)" — or have no indication at all.

necessityIndicator

For required checkbox groups, there are two necessity indicator options: a "(required)" label or an asterisk. If you use an asterisk, be sure to include help text to explain what the asterisk means.

The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself.

labelPosition

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

label

Checkbox groups should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These checkbox groups without a visible label should still include an aria-label in HTML (depending on the context, "aria-label" or "aria-labelledby").