Checkbox - Overview and UX Guide
Description <auro-checkbox> is a HTML custom element for the purpose of allowing users to select one or more options of a limited number of choices.
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>
User Stories Select one or more options
  1. Move focus to a checkbox

    Each checkbox is an independent tab stop. Focus moves to the checkbox via Tab or by clicking/tapping the checkbox or its label.

  2. Toggle the checkbox

    Press Space or click/tap to toggle the checked state. Multiple checkboxes can be checked simultaneously.

  3. Move focus away from the checkbox group

    If the group is required, validation is triggered on blur. If no checkbox is checked the component renders the valueMissing error state.

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>
 Preset checked options

Use the checked attribute on individual <auro-checkbox> elements to preset which options are selected on initial render.

Select your preferences Wi-Fi Power outlet Extra legroom Window seat
See code 
<auro-checkbox-group>
  <span slot="legend">Select your preferences</span>
  <auro-checkbox value="wifi" name="preset" id="checkbox-preset1" checked>Wi-Fi</auro-checkbox>
  <auro-checkbox value="power" name="preset" id="checkbox-preset2" checked>Power outlet</auro-checkbox>
  <auro-checkbox value="legroom" name="preset" id="checkbox-preset3">Extra legroom</auro-checkbox>
  <auro-checkbox value="window" name="preset" id="checkbox-preset4">Window seat</auro-checkbox>
</auro-checkbox-group>
 Skip selection

The checkbox group does not force the user to make a selection. If no checkbox is checked and the group is not required, the user can move past the group without checking any option.

If the group is required, moving focus away without checking any option triggers validation and renders the valueMissing error state.

Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option
See code 
<auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
  <span slot="legend">Form label goes here</span>
  <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
  <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
  <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
  <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
</auro-checkbox-group>