Toggle
Technical definition
A toggle switch is not a native HTML element, it’s just a change of visual appearance for an <input> elements of type checkbox which allows you to select single values for submission in a form.
Anatomy and styling
The toggle element consists of two logical slots. A slot that "holds" a container with the knob in it for the "states": checked/uncheck/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 toggle in relation to the toggle’s state and properties by selecting them in the parent context module.
To hide some of the children in some of the states - use display: none
Changing the assets for the know can be done by using the ‘asset content’ property
Props and states
Interactive state:
Default
Hover
Active
Disabled property
True
False
Checked state (special):
Checked
Unchecked
Indeterminate
Special mechanics
There are two logical slots that come with the toggle element:
Checkbox primitive - as mentioned above, toggle is basically a dressed up checkbox as far as native HTML elements are concerned, so this is a container for the visual of the actual ‘toggle’ of the element, where the different states are represented by different styling. This slot cannot be empty, otherwise the checkbox inside of the toggle will not function properly. In code - this is where the actual input element type: checkbox resides.
Trigger - is a container that gives all objects inside it the ability to change the state of the toggle. It can be empty or it can have other objects.
Live mode
In live mode you can:
Check the interactive states of the toggle.
Change the state of the toggle by clicking either on the primitive or the whatever is in the trigger logical slot. Note that in a single toggle the indeterminate state cannot be caused by checking or unchecking the toggle, it’s only relevant where nested toggle groups are involved.
Last updated
