Switch

A toggle switch built on Base UI’s Switch primitive. Provides an accessible on/off control with a sliding thumb animation.

Import


import { Switch } from "chunks-ui";

Basic Usage


<Switch.Root aria-label="Airplane mode">
  <Switch.Thumb />
</Switch.Root>

A switch without a visible label needs an aria-label. To show a label, use Field as below.

With Label


<Field.Root>
  <div className="flex items-center gap-2">
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
    <Field.Label>Enable notifications</Field.Label>
  </div>
</Field.Root>

Enable notifications

Controlled


function ControlledSwitch() {
  const [enabled, setEnabled] = useState(false);
 
  return (
    <Switch.Root checked={enabled} onCheckedChange={setEnabled} aria-label="Dark mode">
      <Switch.Thumb />
    </Switch.Root>
  );
}

Disabled


<Switch.Root disabled aria-label="Unavailable setting">
  <Switch.Thumb />
</Switch.Root>

Compound Parts

Part	Description
`Switch.Root`	The switch track. Manages checked state and keyboard interaction. Changes background color when checked.
`Switch.Thumb`	The sliding circle. When checked it moves toward its inline end by its own width (`translate-x-full`, or `-translate-x-full` right to left), so it fits any `--spacing`. If you resize the switch, keep the track’s inner width at twice the thumb’s, e.g. `h-6 w-11` on `Switch.Root` with `size-5` on `Switch.Thumb`.

Props

All compound parts are thin style wrappers. Props are forwarded to the underlying Base UI Switch.