Toggle Switch

Examples

Select

<div class="ys-toggle-switch">
    <input type="checkbox" id="id-of-element" class="ys-toggle-switch__control ys-u-visuallyhidden" />
    <label for="id-of-element" class="ys-toggle-switch__label">Toggle Switch label</label>
</div>

UX and Design Guidelines

The toggle switch should only be used when the action is saved immediately and doesn’t require a “Submit” button. That makes the Toggle Switch ideal for application purposes and it’s not suitable for normal forms.