The Checkbox component is built using a native HTML <input type="checkbox"> element. The input is visually hidden but remains in the accessibility tree, while a custom-styled <div> provides the visual appearance. Its <label> element points to the input's id to allow the Checkbox to be toggled when clicking the label.

Assistive text (description and error) renders in separate elements below the input. Their IDs are automatically linked to the input through the aria-describedby attribute so that assistive technology will properly announce them.

ARIA

table
Element	Attribute	Description
Input	`aria-describedby`	References the assistive text element. Error text takes precedence over visible descriptions. Custom text may be set.
Input	`aria-label`	Provides an accessible name when no visible label is rendered.
Input	`aria-labelledby`	References the visible label element's ID. When a custom `ariaLabelledby` prop is also provided, both IDs are included so the input is named by all referenced elements.

Labels

We highly recommend adding visible labels with the label prop to prevent a lapse in communication. If a visible label is unneeded for the use case, such as a Checkbox in a table row, add an ariaLabel or ariaLabelledby so assistive technology will announce the Checkbox to the user. Omitting a label will result in an error.

Indeterminate state

The Indeterminate state is set through a DOM property for visual feedback regarding the state of a Checkbox group. Screen readers will announce indeterminate checkboxes as "mixed." The Checkbox's underlying state may still be either checked or unchecked.

Keyboard

table
Key	Function
`Space`	Toggles the Checkbox between checked and unchecked.
`Tab`	Moves focus to the next focusable element.
`Shift`+`Tab`	Moves focus to the previous focusable element.

Checkbox

Structure

ARIA

Labels

Indeterminate state

Keyboard

On this page