Toggle switch

<div class="settings">
  <label class="switch-row">
    <span><b>Email updates</b><small>One email when something new ships.</small></span>
    <input class="switch" type="checkbox" role="switch" checked>
  </label>
  <label class="switch-row">
    <span><b>Dark previews</b><small>Show widget demos on a dark background.</small></span>
    <input class="switch" type="checkbox" role="switch">
  </label>
</div>

.settings { width: min(400px, 100%); display: grid; gap: 1px; border-radius: 16px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  cursor: pointer;
  font: 15px/1.4 system-ui, sans-serif;
}
.switch-row span { display: grid; gap: 2px; }
.switch-row small { color: var(--muted); font-size: 13px; }

/* The switch is a real checkbox, restyled. appearance: none removes the default box. */
.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 99px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background 0.2s;
}
/* The knob. */
.switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch:checked { background: var(--brand); box-shadow: none; }
.switch:checked::before { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .switch::before { transition-duration: 0.12s; } }

// No JavaScript needed: the switch is a native checkbox, so clicking the label,
// pressing Space, and form submission all work by default.
// Listen for changes like any checkbox:
document.querySelectorAll('.switch').forEach((toggle) => {
  toggle.addEventListener('change', () => {
    console.log(`${toggle.closest('label').querySelector('b').textContent}: ${toggle.checked ? 'on' : 'off'}`);
  });
});