An input checkbox is a form element used for selecting one or multiple options.
- Checked State: Used when the checkbox is selected and will use its value for the form submission.
- Disabled State: Prevents checkbox interactions and removes its value from the form submission.
- Intermediate State: Used when the checkbox has children selectable elements and only some of them are selected.
- Label: There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection.
- Error State: The error state is used for form validation errors when the error is related to the checkbox field only. Always use a text error along with changing the colour of the field.
- Keyboard State: Checkbox selections should be triggered with the Space key. Using native elements for this should provide this kind of interaction out of the box.
- Checkbox Group: Checkboxes can be grouped to work with multiple values at the same time.