Chi Design System

Toggle Switch

In order to use a toggle switch just use an input type="checkbox" with the classes a-input and -toggle. Also, in order to have the switch properly styled you must add an empty label for the checkbox immediately after it's declaration.

Very important flag
<input type="checkbox" class="a-input -toggle" id="checkbox">
<label for="checkbox"></label>
<span>Very important flag</span>

The toggle switches by default contains the text ON/OFF, but we could disable it with the use of the modifier -noText.

Very important flag
<input type="checkbox" class="a-input -toggle -noText" id="checkbox">
<label for="checkbox"></label>
<span>Very important flag</span>