# Switch

Turns a setting on or off immediately.

```tsx
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Switch id="notifications" defaultChecked />
  <Label htmlFor="notifications">Email notifications</Label>
</div>
```

## Usage

### What you provide
- `id` + `Label`; `checked` / `onCheckedChange`. `size`: `sm` | `default`.
- The label names the setting, not the action: "Email notifications", not "Turn on notifications".
- If the change only applies after "Save", use `Checkbox`.

## Accessibility

- For binary settings that take effect immediately; if the change needs confirmation, use a checkbox in a form.
- The label names the setting and never changes with the state, so the announced name stays stable.
- Clicking the switch or its label toggles it; hover gives feedback. `Tab` reaches it and `Space` toggles it.
- Screen readers hear the label, the switch role and the on/off state; there is no mixed state.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Switch](https://magoo.cc/en/components/forms/switch.html) (`switch`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add switch
```

```tsx
<Switch />
<Label />
```

### Switch

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | — | Controlled state. |
| `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
| `onCheckedChange` | `(checked: boolean) => void` | — | Runs when the state changes. |
| `size` | `"sm" \| "default"` | `"default"` | Switch size. |
| `disabled` | `boolean` | `false` | Blocks changes. |

## Related pages

- [Checkbox](https://aline-aroucha.github.io/pui/components/checkbox.html)
- [Label](https://aline-aroucha.github.io/pui/components/label.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/switch.html