Toggle Switch
Examples
Base
<chi-switch id="toggle1" label="Label"></chi-switch>
<div class="chi-form__item">
<label class="chi-switch" for="toggle1">
<input type="checkbox" class="chi-switch__input" id="toggle1">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
Disabled
<chi-switch id="toggle2" label="Label" disabled></chi-switch>
<div class="chi-form__item">
<label class="chi-switch" for="toggle2">
<input type="checkbox" class="chi-switch__input" name="toggle2" value="toggle2" disabled>
<span id="toggle2" class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
Stacked
<div class="chi-form__item">
<chi-switch id="toggle3" label="Label"></chi-switch>
</div>
<div class="chi-form__item">
<chi-switch id="toggle4" label="Label"></chi-switch>
</div>
<fieldset>
<legend class="chi-label">Configure options</legend>
<div class="chi-form__item">
<label class="chi-switch" for="toggle3">
<input type="checkbox" class="chi-switch__input" id="toggle3">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
<div class="chi-form__item">
<label class="chi-switch" for="toggle4">
<input type="checkbox" class="chi-switch__input" id="toggle4">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
</fieldset>
Inline
Apply the
-inline
class to chi-form__item
for displaying toggle switches inline.<div class="chi-form__item -inline">
<chi-switch id="toggle5" label="Label"></chi-switch>
</div>
<div class="chi-form__item -inline">
<chi-switch id="toggle6" label="Label"></chi-switch>
</div>
Apply the class
-inline
to chi-form__item
to display switches inline.<fieldset>
<legend class="chi-label">Configure options</legend>
<div class="chi-form__item -inline">
<label class="chi-switch" for="toggle5">
<input type="checkbox" class="chi-switch__input" id="toggle5">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
<div class="chi-form__item -inline">
<label class="chi-switch" for="toggle6">
<input type="checkbox" class="chi-switch__input" id="toggle6">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
<span class="chi-switch__label">Label</span>
</label>
</div>
</fieldset>
Switch list
Switch lists are used to wrap a series of switches in a list.
To render, apply the class -list
to chi-form__item
.
<fieldset>
<legend class="chi-label">Select options</legend>
<ul class="chi-form__item -list">
<li class="chi-form__item">
<label class="chi-switch" for="toggle10">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle10">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</li>
<li class="chi-form__item">
<label class="chi-switch" for="toggle11">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle11">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</li>
<li class="chi-form__item">
<label class="chi-switch" for="toggle12">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle12">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</li>
<li class="chi-form__item">
<label class="chi-switch" for="toggle13">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle13">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</li>
<li class="chi-form__item" for="toggle14">
<label class="chi-switch">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle14">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</li>
</ul>
</fieldset>
Switch with Left Label
<div class="chi-form__item">
<label class="chi-switch" for="toggle7">
<span class="chi-switch__label">Label</span>
<input type="checkbox" class="chi-switch__input" id="toggle7">
<span class="chi-switch__content">
<span class="chi-switch__thumb"></span>
</span>
</label>
</div>