Switch

Sliding on/off control for settings that apply immediately.

Source: src/stylus/components/switch.styl

Default

Wrap in .switch-field to make the text part of the target.

<label class="switch-field">
  <input type="checkbox" class="switch" checked aria-label="Instant security alerts" />
  <span>Instant security alerts</span>
</label>

Status colours

.switch-success, .switch-warning, .switch-danger.

<input type="checkbox" class="switch switch-success" checked aria-label="Success" />
<input type="checkbox" class="switch switch-warning" checked aria-label="Warning" />
<input type="checkbox" class="switch switch-danger" checked aria-label="Danger" />