Checkbox

A checkbox is an input control that allows users to select a single item or multiple items from a list.

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 or aria-labelledby 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 with its own aria-label or aria-labelledby

Testing

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 or aria-labelledby attribute.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.

React customization

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

Prop	Applied to	Reason
`aria-label="[text that labels the checkbox]"`	`Checkbox`	Adds an accessible name to the checkbox when there is no visible text label. Required for standalone checkboxes without a `label` prop, and there is no other element that can label the checkbox via its `aria-labelledby` prop.
`aria-labelledby="[id or space-separated list of id's of the element(s) that labels the checkbox]"`	`Checkbox`	Adds an accessible name to the checkbox. Required for standalone checkboxes without a `label` prop, and when there is another element that labels the checkbox.
`disabled`	`.pf-v6-c-check__input`	Disables the checkbox, removing it from the tab order on the page, and applies disabled styling.
`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.
`isDisabled={[true or false]}`	`Checkbox`	Disables the checkbox, removing it from the tab order on the page and preventing interaction, and applies disabled styling.
`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 that labels the checkbox]"`	`Checkbox`	Adds a visible text label for the checkbox, which also acts as its accessible name.

HTML/CSS customization

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

Attribute or class	Applied to	Reason
`aria-describedby="[id of the element that desribes the checkbox]"`	`.pf-v6-c-check__input`	Adds an accessible description for the radio, typically the `.pf-v5-c-check__description` element. Required when there is a `.pf-v5-c-check__description` element.
`aria-invalid={[true or false]}`	`.pf-v6-c-check__input`	Notifies users of assistive technologies whether the checkbox value is invalid.
`aria-label="[text that labels the checkbox]"`	`.pf-v6-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. If there is already a visible text label via the `label` element, this attribute should not be passed in.
`disabled`	`.pf-v6-c-check__input`	Disables the checkbox, removing it from the tab order on the page and preventing interaction, and applies disabled styling.
`id`	`.pf-v6-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.
`required`	`.pf-v6-c-check__input`	Notifies users that the checkbox must be checked. Required when users must check the checkbox.
`for="[id of the associated checkbox]"`	`label`	Links the `label` element to the checkbox, providing a larger clickable area to toggle the checkbox. Required.
`.pf-v6-c-check__label-required`	`label > span`	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.

Explicit vs implicit labeling

Wrapping an input element within a label element will link the two implicitly, without the for attribute on the label element being necessary. For example, the following code snippet shows an input and label being linked implicitly:

<label>
  <span>Checkbox label</span>
  <input type="checkbox">
</label>

Implicitly linking the two elements behaves similarly as passing the for attribute on the label, i.e. clicking the visible label text will toggle the checkbox. However, this may not be supported by all assistive technologies, so when possible it is best to explicitly link an input with its label like the following code snippet shows, even if the input is wrapped by the label element:

<label for="checkbox1-id">
  <span>Checkbox label</span>
  <input id="checkbox1-id" type="checkbox">
</label>

View source on GitHub