Checkbox - Design
Component Anatomy

The component consists of the following elements:

  • checkbox group: a container element (<auro-checkbox-group>) that manages a collection of checkboxes, handles validation, and provides a shared legend and help text.
  • checkbox: an individual selectable element (<auro-checkbox>) that can be toggled between checked and unchecked states.
  • legend: descriptive label rendered above the group of checkboxes, set via the legend slot on the group.
  • help text: descriptive text rendered below the group intended to help clarify the intended use of the component and any current validation error with instructions to resolve those errors.
Checkbox Group

The group element coordinates shared behavior across all child checkboxes, including validation (e.g. required), error state display, and the disabled attribute which disables all options at once.

Checkbox

Each checkbox renders a visual indicator (checkmark) and a label. A checkbox may be in one of the following states:

  • checked - The checkbox is selected and its value is included in the group's value.
  • disabled - The checkbox is not interactive and cannot be toggled.
  • error - Inherited from the parent group when validation fails.
Default Layout

The auro-checkbox-group renders checkboxes in a vertical list by default.

Form label goes here Checkbox option Checkbox option Checkbox option that has some extra text that should wrap when rendered in a narrow container Checkbox option
See code 
<auro-checkbox-group>
  <span slot="legend">Form label goes here</span>
  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
  <auro-checkbox value="value2" name="basic" id="checkbox-basic2">Checkbox option</auro-checkbox>
  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
</auro-checkbox-group>
 Horizontal Layout

Use the horizontal attribute to render options on a single horizontal line.

Note: The horizontal attribute has a limit of 3 options. Beyond three, options will be listed vertically.

Form label goes here Yes No Maybe
See code 
<auro-checkbox-group horizontal>
  <span slot="legend">Form label goes here</span>
  <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
  <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
  <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
</auro-checkbox-group>
 Colors Default Color

When the component is used on a light background.

Form label goes here Checkbox option Checkbox option Checkbox option that has some extra text that should wrap when rendered in a narrow container Checkbox option
See code 
<auro-checkbox-group>
  <span slot="legend">Form label goes here</span>
  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
  <auro-checkbox value="value2" name="basic" id="checkbox-basic2">Checkbox option</auro-checkbox>
  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
</auro-checkbox-group>
 Inverse Color

When the component is used on a darker background, set appearance="inverse" to invert the component colors for proper contrast and visibility.

Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option
See code 
<auro-checkbox-group appearance="inverse">
  <span slot="legend">Form label goes here</span>
  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
</auro-checkbox-group>