Checkbox

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.

Also known as: Check box, Tick box, Tickbox

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

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.

Best practices

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.

Best practices

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.