Checkbox

A checkbox is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting.

Accessibility

To implement an accessible PatternFly checkbox component:

Ensure the checkbox can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
Ensure the checkbox can be toggled by clicking its visible text label, if it has one
Ensure the checkbox label has hover styles to indicate that it can be clicked
Provide an aria-label if the checkbox does not have a visible text label
Place related checkboxes inside of a list element, and that list inside of an element that has the role="group" attribute

At a minimum, a checkbox should meet the following criteria:

Standard keyboard navigation can be used to navigate between checkboxes or other focusable elements.Tab navigates to the next checkbox or focusable element, and Shift + Tab navigates to the previous checkbox or focusable element. If a checkbox is inside of a menu, follow the menu accessibility documentation instead.
Standard keyboard interaction can be used to interact with the checkbox.Only Space should be able to toggle the checkbox.
If the checkbox has a visible text label, clicking the label toggles the checkbox.This provides extra clickable space for users who may have trouble clicking the checkbox input itself, such as on mobile or due to a motor or physical impairment.
If the checkbox has a visible text label, that label has hover styles to indicate to users that it can be interacted with.
If the checkbox does not have a visible text label, it has an aria-label.This provides context to users who may not be able to see or understand the visual context, such as a checkbox that selects a table row.
Multiple related checkboxes are inside of a list element, and that list element is inside of another element that has the role="group" attribute.The role attribute notifies users of assistive technologies that they are in a group of checkboxes, while the list element notifies them of how many checkboxes there are in the group.

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`aria-label="[text describing the checkbox]"`	`Checkbox`	Adds an accessible name to the checkbox when there is no visible text label. Required when there is no visible text label.
`id`	`Checkbox`	Links the checkbox input with its text label, which allows clicking the label to toggle the checkbox. The linked label text is also used as the accessible name of the checkbox. Required.
`isRequired`	`Checkbox`	Adds the `required` attribute to the checkbox and adds visual styling to notify users the checkbox must be checked. Required when users must check the checkbox.
`isValid={[true or false]}`	`Checkbox`	Sets the `aria-invalid` attribute, notifying users of assistive technologies whether the checkbox value is invalid.
`label="[text describing the checkbox]"`	`Checkbox`	Adds a visible text label for the checkbox, which also acts as its accessible name.

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`aria-invalid={[true or false]}`	`.pf-c-check__input`	Notifies users of assistive technologies whether the checkbox value is invalid.
`aria-label="[text describing the checkbox]"`	`.pf-c-check__input`	Adds an accessible name to the checkbox when there is no visible text label. Required when there is no visible text label.
`id`	`.pf-c-check__input`	Links the checkbox input with its text label, which allows clicking the label to toggle the checkbox. The linked label text is also used as the accessible name of the checkbox. Required.
`label="[text describing the checkbox]"`	`label.pf-c-check__label > span.pf-c-check__label-required`	Adds styling to visually notify users that the checkbox is required and to differentiate the content from the checkbox label. Usually an asterisk `` is used to visually convey that an input is required. Required* when users must check the checkbox.
`required`	`.pf-c-check__input`	Notifies users that the checkbox must be checked. Required when users must check the checkbox.

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH