# Switch

Turns a setting on or off and applies it at once.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/switch
```

## Usage

```tsx
import { SwitchField } from '@/components/fetaui/switch'

export function Example() {
  return <SwitchField label="Sync" onCheckedChange={setSync} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| checked | boolean |  |
| defaultChecked | boolean | false |
| onCheckedChange | (checked) => void |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| SwitchField label, description | ReactNode |  |

## When to use

- When the change applies right away, like a light switch.

## When not to use

- When the choice is saved with a form: use Checkbox.

## Accessibility

- Role switch with aria-checked and a visible label.
- The thumb position carries the state, not only colour.

## Motion

- The thumb stretches 6 px under the finger and springs across at 500/30.
- Hover adds a halo. Invalid shakes 2 px once.
- With reduced motion, the thumb moves at once.