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.
|