Is used as an alternative for the Checkbox component. Except indeterminate and label are not supported.
States 
<div class="form-field checkbox-switch" role="switch">
    <input type="checkbox">
    <label>Switch off</label>
</div>

<div class="form-field checkbox-switch" role="switch">
    <input type="checkbox" disabled>
    <label>Switch off disabled</label>
</div>

<div class="form-field checkbox-switch" role="switch">
    <input type="checkbox" checked>
    <label>Switch on</label>
</div>

<div class="form-field checkbox-switch" role="switch">
    <input type="checkbox" checked disabled>
    <label>Switch on disabled</label>
</div>
General guidelines
  • Use one field per line.

  • A label should clearly and concisely describe the purpose of the field with no more than a few words.
Structure
1
Toggle: Indicates if the switch is activated or deactivated.
2
Label: Indicates the description of the control.
DO
  • To allow users to change a single setting.
  • When the result of turning the setting on and off is clear.
  • For changes that have an instant response, for example to disable a form field.
DON'T
  • To present several options, use checkbox group.