Checkbox is a UI control that toggles some boolean object or its property.
Visual design
One particular question for checkbox design is the extent of emphasis if it is checked. In this case we may consider two options for the checked state — one is less emphasized and another is more.
Behavior
Intermediate state
In most cases checkboxes are used for strictly boolean values (i.e. they have checked and unchecked status), but they may also have intermediate (also called indeterminate) state, when the checkbox is neither on nor off.
Readonly or disabled
In rare cases the checkbox may be in two separate non-interactive states — read only and disabled. The difference is the following:
- In read only state checkbox is essentially an indicator of some information, and can’t be enabled in a straightforward way. But the information that this indicator is important to be clear, readable for the user.
- In disabled state the emphasis is already on the fact, that the checkbox is not available for manipulation of the state. For instance, because it is blocked by another object or control, the the user may affect.
If we expect that this situation, in our design system we must consider that readonly checkboxes have higher contrast, like normal labels, and disabled checkboxes share the same low contrast as disabled radio buttons, inputs and so on.