Checkbox and CheckboxGroup allow users to select or deselect a specific option. A checkbox can stand alone to control a single option, or form part of a checkbox group to control multiple options.
- If you are using a checkbox without a text description, pass an
aria-label to the checkbox that describes its purpose.
| Key | Function |
|---|
| Tab |
- Tab moves focus to the checkbox.
- If moving focus into a checkbox group, Tab moves focus to the first checkbox in the group.
- If focus is inside a checkbox group, Tab moves focus to the next checkbox in the group.
|
| Space |
- Space changes the state of the checkbox, select or deselect.
|
| Shift + Tab |
- This action moves focus to outside of the checkbox component and to the previous element in the tabbing order.
- If focus is inside a checkbox group, this action moves focus to the previous checkbox option within the tab order.
|
