Switch Input
A simple switch or toggle input pattern for on-off states.
Switch with Label
Example of the Switch input with the necessary parent label.
Label Alignment
Align the label left, right or on both sides.
A simple switch or toggle input pattern for on-off states.
<input class="c-input c-input--switch" type="checkbox"><input class="c-input c-input--switch" type="checkbox" checked><input class="c-input c-input--switch" type="checkbox" disabled>Example of the Switch input with the necessary parent label.
<label class="c-label c-label--switch">
<input class="c-input c-input--switch" type="checkbox">
<span class="c-label__text">Label</span>
</label>Align the label left, right or on both sides.
<label class="c-label c-label--switch">
<input class="c-input c-input--switch" type="checkbox">
<span class="c-label__text">Label</span>
</label><label class="c-label c-label--switch">
<span class="c-label__text">Label</span>
<input class="c-input c-input--switch" type="checkbox">
</label><label class="c-label c-label--switch">
<span class="c-label__text">Label</span>
<input class="c-input c-input--switch" type="checkbox">
<span class="c-label__text">Label</span>
</label>