# Toggle Switch

Accessible toggle/switch input using native checkbox.

## Basic Example

```html
<input type="checkbox" class="toggle">
<input type="checkbox" class="toggle" checked>
```

## With Label

```html
<label>
  <input type="checkbox" class="toggle">
  Enable notifications
</label>

<label>
  <input type="checkbox" class="toggle" checked>
  Dark mode
</label>
```

## Compact Variant

Smaller toggle for tight spaces:

```html
<input type="checkbox" class="toggle compact">
```

## Disabled State

```html
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" checked disabled>
```

## Custom Color

Override the checked color:

```html
<input type="checkbox" class="toggle" style="--toggle-color: var(--green)">
```

## CSS Variables

- `--toggle-color` - Color when checked (default: `var(--primary)`)
- `--toggle-width` - Track width
- `--toggle-height` - Track height

## Accessibility

The toggle uses a native checkbox, so it:
- Works with keyboard (Space to toggle)
- Announces state to screen readers
- Respects `prefers-reduced-motion`

## See Also

- [Forms](https://graffiti-ui.com/llms/forms.txt) - All form inputs