Checkbox
Technical definition
<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated. A checkbox allows you to select single values for submission in a form (or not).
Anatomy and styling
The checkbox element consists of 2 logical slots.A slot that holds a box with two assets in it for the states ‘checked’, ‘unchecked’ or ‘indeterminate’; and another slot that holds a text wrapper div with a label and a helper text.
You can influence the styling of the children of the checkbox in relation to the checkbox’s state and properties by selecting them in the parent context module.
To hide some of the children in some of the states (like the indeterminate icon asset when the state is ‘checked’ or ‘unchecked’) - use display: none
To change the SVG assets of the check and indeterminate icons, use the ‘asset content’ property
Props and states
Interactive state:
Default
Hover
Active
Disabled property
true
false
Checked state (special):
checked
unchecked
indeterminate
Matrix
Special mechanics
There are two logical slots that come with the checkbox element:
Checkbox primitive - is a container for the visual of the actual ‘box’ of the element, where the different states are represented by different assets/styling. This slot cannot be empty, otherwise the checkbox will not function properly. In code - this is where the actual input element type: checkbox resides.
Trigger (hit area) - is a container that gives all objects inside it the ability to change the state of the checkbox. It can be empty or it can have other objects.
Live mode
In live mode you can:
Check the interactive states of the checkbox.
Change the state of the checkbox by clicking either on the primitive or the whatever is in the trigger logical slot. Note that in a single checkbox the indeterminate state cannot be caused by checking or unchecking the checkbox, it’s only relevant where nested checkbox groups are involved.
Last updated
