Switch

Turns a setting on or off, and the change applies at once.

import { Field, Switch } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SwitchBasic() {
  return (
    <Preview stack={true}>
      <Field.Root>
        <Field.Label>
          <Switch.Root />
          Label
        </Field.Label>
      </Field.Root>
    </Preview>
  );
}

• Use a switch for a setting that applies immediately. Use a Checkbox for a choice that is submitted with a form.
• The label says what is on: “Email me when an error regresses”, not “Email notifications: on”.
• Put the switch inside its Field.Label so the whole line toggles it. See Field.

API

Parts: Root. Built on Base UI Switch; props such as checked, defaultChecked and onCheckedChange come from it.