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.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected Examples
Accessibility
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.
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.
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.
