Skip to content


What component has

Keyboard support

Keyboard support
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
SpaceToggles checkbox between checked and unchecked states.

Roles and attributes

The list below describes roles and attributes that component already has.

Roles and attributes
checkboxdivIdentifies the div element as a checkbox. The child text content of this div provides the accessible name of the checkbox.
tabIndex="0"divIncludes the checkbox in the page Tab sequence.
aria-invalidinputTurns to true if state=invalid is provided.

Considerations for developers

  • The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.

Find live examples in the A11y style guide.

Roles and attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.

groupdivIdentifies the div element as a group container for the checkboxes.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.