Components

Toggle switch

A sharp, flat on/off switch built from a real checkbox so it stays keyboard-accessible and form-bound. The track squares off with the rest of the system — no radius, a single sliding knob.

States

Toggle checked on the input for the on state, and disabled to lock it. The label text sits beside the track and is part of the clickable area.

Off 
<label class="ds-switch"><input type="checkbox"><span class="ds-switch__track"></span><span>Detail mode</span></label>
On 
<label class="ds-switch"><input type="checkbox" checked><span class="ds-switch__track"></span><span>Detail mode</span></label>
Disabled 
<label class="ds-switch"><input type="checkbox" disabled><span class="ds-switch__track"></span><span>Detail mode</span></label>

Web Component

The <ds-switch> element builds the checkbox, track and label for you. Pass checked and disabled as attributes; the label is the element's text.

<ds-switch> 
<ds-switch checked>Detail mode</ds-switch>