# Toggle

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop      | Effect                                                   |
| --------- | -------------------------------------------------------- |
| `isSmall` | Renders the smaller toggle with `text-200` label sizing. |

## Props / API

### `Toggle`

| Prop             | Type          | Default | Description                                            |
| ---------------- | ------------- | ------- | ------------------------------------------------------ |
| `isSmall`        | `boolean`     | `false` | Renders the smaller size with `text-200` label sizing. |
| `checked`        | `boolean`     | -       | Controlled on/off state of the toggle.                 |
| `defaultChecked` | `boolean`     | -       | Initial on/off state when used uncontrolled.           |
| `disabled`       | `boolean`     | `false` | Disables the input.                                    |
| `onChange`       | `(e) => void` | -       | Standard change handler for the native input.          |

Extends `InputHTMLAttributes<HTMLInputElement>` (with `type` and `indeterminate` omitted). All standard `<input>` attributes are forwarded to the underlying `<input type="checkbox" role="switch">` via `...props`.

## States

- Default (idle)
- Hover
- Focus-visible
- Checked
- Disabled

## Code examples

```tsx
import { useState } from "react";
import { Toggle } from "@mylighthouse/prism-react";

export default function ToggleExample(): React.JSX.Element {
  const [enabled, setEnabled] = useState(false);

  return (
    <label>
      <Toggle
        checked={enabled}
        onChange={(e) => setEnabled(e.target.checked)}
      />
      Notifications
    </label>
  );
}
```

## A11y intent

_[Design to fill]_

- The control is a real native `<input type="checkbox">` with `role="switch"`, so its on/off state is announced as a switch and keyboard operation and focus are handled correctly.
- The state is exposed via the native `checked` attribute.
- Always associate a visible label with the input so its purpose is announced.
- The `disabled` input stays in the accessibility tree so its state is announced.

## Cross-references

_[Design to fill]_