# Switch

> On/off toggle built on Radix.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/switch.json`

## Install

```tsx
import { Switch } from "@aspyn-io/kit";
```

### With label

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

### Settings row pattern

```tsx
<div className="flex items-center justify-between rounded-lg border p-4">
  <div className="space-y-0.5">
    <Label htmlFor="2fa">Two-factor authentication</Label>
    <p className="text-sm text-muted-foreground">
      Require a code on every sign-in.
    </p>
  </div>
  <Switch id="2fa" />
</div>
```

### Disabled

```tsx
<div className="flex items-center gap-2">
  <Switch id="beta" disabled defaultChecked />
  <Label htmlFor="beta">Beta features (managed by admin)</Label>
</div>
```

### Choice card

A bordered settings card pairing a title and description with the switch.

```tsx
<Label
  htmlFor="marketing"
  className="flex items-start justify-between gap-4 rounded-lg border p-4"
>
  <div className="space-y-0.5">
    <div className="font-medium">Marketing emails</div>
    <p className="text-sm font-normal text-muted-foreground">
      Receive product news and occasional offers.
    </p>
  </div>
  <Switch id="marketing" defaultChecked />
</Label>
```

## Notes

- Use Switch for settings that apply immediately; use Checkbox inside forms that submit.