Switch
A togglable state element that work like a check box.
c-switch
States
Value
Invalid
Today we don't have a specific visual styling for invalid switches.
Disabled
Loading
Locked
The locked variant is and extra state that require to add the c-switch--locked class. It can be applied as is to disabled checkboxes. In order to keep the events firing you can also apply the variant on an enabled element. In this case you will need to add some javascript to simulate its read-only state.
Locked and disabled:
Locked and enabled (javascript used to prevent changes):
Sizes
Apply the same size variant to the label attached to the switch (ex: c-label--xs).
Xsmall
c-switch c-switch--xs