Checkbox
Checkboxes let users select one or more items from a list, or turn an item on or off
Use Cases
- Users should be able to:
- Navigate to a checkbox with assistive technology
- Toggle the checkbox on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The parent checkbox has three states: selected, unselected, and mixed.
Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group.
If some, but not all, child checkboxes are checked, the parent checkbox becomes mixed. Selecting an mixed parent checkbox will check all of its child checkboxes.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Space | Toggles a focused checkbox between selected and unselected |
Labeling Elements
If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component's role.
The accessibility label for an individual checkbox is typically the same as its adjacent text label.
Use Cases
- Users should be able to:
- Navigate to a checkbox with assistive technology
- Toggle the checkbox on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The parent checkbox has three states: selected, unselected, and mixed.
Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group.
If some, but not all, child checkboxes are checked, the parent checkbox becomes mixed. Selecting an mixed parent checkbox will check all of its child checkboxes.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Space | Toggles a focused checkbox between selected and unselected |
Labeling Elements
If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component's role.
The accessibility label for an individual checkbox is typically the same as its adjacent text label.
Use Cases
- Users should be able to:
- Navigate to a checkbox with assistive technology
- Toggle the checkbox on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The parent checkbox has three states: selected, unselected, and mixed.
Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group.
If some, but not all, child checkboxes are checked, the parent checkbox becomes mixed. Selecting an mixed parent checkbox will check all of its child checkboxes.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Space | Toggles a focused checkbox between selected and unselected |
Labeling Elements
If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component's role.
The accessibility label for an individual checkbox is typically the same as its adjacent text label.
Use Cases
- Users should be able to:
- Navigate to a checkbox with assistive technology
- Toggle the checkbox on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The parent checkbox has three states: selected, unselected, and mixed.
Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group.
If some, but not all, child checkboxes are checked, the parent checkbox becomes mixed. Selecting an mixed parent checkbox will check all of its child checkboxes.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Space | Toggles a focused checkbox between selected and unselected |
Labeling Elements
If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component's role.
The accessibility label for an individual checkbox is typically the same as its adjacent text label.