Toggle

A switch. .toggle goes on a checkbox; Kobalte's Switch builds it from a Control and a Thumb, with the real input visually hidden. Both shapes work.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`toggle`	The track, on a checkbox or on Kobalte's Control
`toggle-thumb`	The knob, on Kobalte's Thumb. Not needed on a checkbox

Basic

<label class="label">
  <input type="checkbox" class="toggle" checked />
  Email me about releases
</label>
<label class="label">
  <input type="checkbox" class="toggle" />
  Email me about everything else
</label>
<label class="label">
  <input type="checkbox" class="toggle" disabled />
  Locked off
</label>

<label class="label">
  <input type="checkbox" class="toggle" checked />
  Email me about releases
</label>
<label class="label">
  <input type="checkbox" class="toggle" />
  Email me about everything else
</label>
<label class="label">
  <input type="checkbox" class="toggle" disabled />
  Locked off
</label>

import { Switch } from "@kobalte/core/switch";

<Switch class="label" checked={enabled()} onChange={setEnabled}>
  <Switch.Input />
  <Switch.Control class="toggle">
    <Switch.Thumb class="toggle-thumb" />
  </Switch.Control>
  <Switch.Label>Email me about releases</Switch.Label>
</Switch>

<div class="label" data-checked>
  <input type="checkbox" role="switch" checked style="border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px" />
  <div class="toggle" data-checked><div class="toggle-thumb" data-checked></div></div>
  <label>Email me about releases</label>
</div>
<div class="label">
  <input type="checkbox" role="switch" style="border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px" />
  <div class="toggle"><div class="toggle-thumb"></div></div>
  <label>Email me about everything else</label>
</div>
<div class="label" data-disabled>
  <input type="checkbox" role="switch" disabled style="border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px" />
  <div class="toggle" data-disabled><div class="toggle-thumb" data-disabled></div></div>
  <label>Locked off</label>
</div>

Switch's parts carry no role or attribute of their own: Control, Thumb and the root are all divs with the same data-checked. So the classes go on the parts by hand, .label on the root included, which gives it the same row as a checkbox in a label. The input Kobalte renders is visually hidden with inline styles.