Input Checkbox

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.