# Switch

## Overview

Accessible on/off toggle built on Radix Switch with DS tokens and smooth thumb slide.

---

## Props

Inherits Radix Switch props:

- `checked?`, `defaultChecked?`
- `onCheckedChange?(checked: boolean)`
- `disabled?`, `required?`, `name?`, `value?`

---

## Example

```tsx
import * as React from "react";
import { Switch } from "laif-ds";

export function ControlledSwitch() {
  const [checked, setChecked] = React.useState(false);
  return (
    <div className="flex items-center gap-2">
      <Switch id="wifi" checked={checked} onCheckedChange={setChecked} />
      <label htmlFor="wifi">Wi‑Fi {checked ? "on" : "off"}</label>
    </div>
  );
}
```

---

## Notes

- Track uses `bg-d-primary` when checked and `bg-d-foreground/20` when unchecked.
- Thumb translation is optimized for a 32px track with 16px thumb.