---
title: Switch
description: Turns a setting on or off, and the change applies at once.
---

```tsx
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](/deft/components/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](/deft/components/field).

## API

Parts: `Root`. Built on Base UI [Switch](https://base-ui.com/react/components/switch); props such as `checked`, `defaultChecked` and `onCheckedChange` come from it.