Switch
Toggle switch is meant to use instead of a checkbox for simple “On/Off” options.
Basic structure
<div class="container">
<ul class="switch">
<li class="switch__item">
<input id="one" type="checkbox" class="switch__checkbox" checked>
<label for="one" class="switch__label">
Choice one
</label>
</li>
<li class="switch__item">
<input id="two" type="checkbox" class="switch__checkbox switch__checkbox--red">
<label for="two" class="switch__label">
Choice two
</label>
</li>
<li class="switch__item">
<input id="three" type="checkbox" class="switch__checkbox switch__checkbox--blue">
<label for="three" class="switch__label">
Choice three
</label>
</li>
<li class="switch__item">
<input id="four" type="checkbox" class="switch__checkbox switch__checkbox--yellow">
<label for="four" class="switch__label">
Choice four
</label>
</li>
</ul>
</div>Examples and usage
In Eventival, we mainly use the toggle switches to make a note private or shared.
Notes
Curabitur accumsan, nunc dictum blandit euismod, velit lectus aliquet sem, non tempus nulla lectus non tortor.