Skip to content

role switch

Switch draft v0.1.0

Turns a setting on or off, with immediate effect.

A switch is a binary control for a setting that applies as soon as it is flipped: notifications on or off, dark mode, airplane mode. It has two values only, on and off, shown by the position of its thumb and the fill of its track. A choice that is saved later with a form, or that may be partially on, is a Checkbox.

Playground

HTML 
<div class="ds-switch" data-size="medium">
  <input
    type="checkbox"
    role="switch"
    class="ds-switch__control"
    data-part="control"
    id="ds-switch-17"
  >
  <label
    class="ds-switch__label"
    data-part="label"
    for="ds-switch-17"
  >Email notifications</label>
</div>