# Switch

A two-state on/off toggle.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | — | Controlled checked state. |
| `defaultChecked` | `boolean` | `false` | Uncontrolled initial checked state. |
| `disabled` | `boolean` | `false` | Disable the switch. |
| `label` | `string` | — | Label rendered next to the switch. |
| `onChange` | `((checked: boolean) => void)` | — | Change handler — receives the new checked state. |

## Off

**`Off.stories.tsx`**

```tsx
import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Email notifications" />;
```

## On

**`On.stories.tsx`**

```tsx
import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Email notifications" defaultChecked />;
```

## Disabled

**`Disabled.stories.tsx`**

```tsx
import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Locked setting" disabled defaultChecked />;
```