Components / Form & Input / Switch
Switch stable
A real checkbox underneath, so it works with no JS at all. Teal variant included.
Notifications
Auto-save
Public
<span class="switchrow"><label class="switch"><input type="checkbox" checked><span class="tr"></span></label>Notifications</span> <span class="switchrow"><label class="switch teal"><input type="checkbox" checked><span class="tr"></span></label>Auto-save</span> <span class="switchrow"><label class="switch"><input type="checkbox"><span class="tr"></span></label>Public</span>
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
.switch .tr{position:absolute;inset:0;border-radius:99px;background:var(--k-track);transition:background .18s}
.switch .tr::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--k-knob);box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .18s}
.switch input:checked + .tr{background:var(--k-ink)}
.switch input:checked + .tr::after{background:radial-gradient(circle at center,var(--k-core) 0 3px,var(--k-knob) 3.6px)}
.switch input:checked + .tr::after{transform:translateX(18px)}
.switch input:focus-visible + .tr{box-shadow:var(--k-ring)}
.switch.teal input:checked + .tr{background:var(--k-accent)}
.switchrow{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;font-family:var(--k-font);color:var(--k-ink)}
Usage
For settings that take effect immediately. For choices applied on submit, use a Checkbox instead.
Accessibility
It is a native checkbox: keyboard, focus and screen readers work out of the box. The clickable area includes the label text.