Users can click a Checkbox to make a choice and click it again to deselect an option. They allow users to select one or more options of something.
Checkboxes support several states: enabled, hover, focus, disabled, invalid, required, and indeterminate.
Checkboxes in their "unchecked" state are considered enabled. They are ready for user interaction.
Hover states are activated when the user pauses their pointer over the input.
The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
Checked Checkboxes, sometimes referred to as "ticked", display a check to indicate the they are selected.
Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
Checkboxes are disabled individually. The values of disabled inputs will not be submitted.
Checkboxes present as invalid when a required input is left unchecked or an incompatible choice has been made.
When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
Unlike Radio Buttons, Checkboxes validate individually, not as a group.
Unlike other inputs, Odyssey assumes Checkboxes are optional by default.
Individual checkboxes can be set to required. This is useful when a user confirms they have read the terms of service.
In the case of nested checkboxes, an indeterminate state may be required.
Note that this state is visual-only and will be submitted as either "checked" or "unchecked" depending on the design of your UI.