Checkbox

Also known as

Check box, Tick box, Tickbox

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