Toggle switch
A toggle switch is used to turn an option on or off.
<div class="ds-switch-wraper relative">
<label class="ds-switch">
<span title="" class="ds-switch-label">Audio</span>
<input type="checkbox" class="ds-switch-checkbox" checked="checked" />
<span class="ds-switch-slider ds-round"></span>
</label>
</div>
<div class="ds-switch-wraper relative mt5">
<label class="ds-switch">
<span title="" class="ds-switch-label">Video</span>
<input type="checkbox" class="ds-switch-checkbox" >
<span class="ds-switch-slider ds-round"></span>
</label>
</div>
Guidelines
- Use toggle buttons when an action is required without any confirmation process.
- Toggle buttons must have short labels.
- Do not change the label when the toggle button is switched between on and off.