# Checkbox

## Overview

_[Design to fill]_

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

## Anatomy

_[Design to fill]_

## Variants

| Prop          | Effect                                                     |
| ------------- | ---------------------------------------------------------- |
| `isSecondary` | Renders the checkbox in its secondary style.               |
| `isSmall`     | Renders the smaller checkbox with `text-200` label sizing. |
| `hasError`    | Applies the error style to signal invalid input.           |
| `hasWarning`  | Applies the warning style to signal a caution state.       |

## Props / API

### `Checkbox`

| Prop            | Type          | Default | Description                                             |
| --------------- | ------------- | ------- | ------------------------------------------------------- |
| `indeterminate` | `boolean`     | `false` | Renders the mixed (minus) state instead of a checkmark. |
| `isSecondary`   | `boolean`     | `false` | Renders the checkbox in its secondary style.            |
| `isSmall`       | `boolean`     | `false` | Renders the smaller size with `text-200` label sizing.  |
| `hasError`      | `boolean`     | `false` | Applies the error style.                                |
| `hasWarning`    | `boolean`     | `false` | Applies the warning style.                              |
| `disabled`      | `boolean`     | `false` | Disables the input.                                     |
| `onChange`      | `(e) => void` | -       | Standard change handler for the native input.           |

Extends `InputHTMLAttributes<HTMLInputElement>`. All standard `<input>` attributes are forwarded to the underlying `<input type="checkbox">` via `...rest`.

## States

- Default (idle)
- Hover
- Focus-visible
- Checked
- Indeterminate
- Error
- Warning
- Disabled

## Code examples

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

export default function CheckboxExample(): React.JSX.Element {
  const [accepted, setAccepted] = useState(false);

  return (
    <label>
      <Checkbox
        checked={accepted}
        onChange={(e) => setAccepted(e.target.checked)}
      />
      I accept the terms
    </label>
  );
}
```

## A11y intent

_[Design to fill]_

- The control is a real native `<input type="checkbox">`, so checked/unchecked/indeterminate state, keyboard operation, and focus are handled correctly.
- Always associate a visible label with the input (wrap it in a `<label>` or use `aria-labelledby`) so its purpose is announced.
- `hasError` / `hasWarning` are visual only, pair them with a programmatically associated message and don't rely on color alone to signal validity.
- The `disabled` input stays in the accessibility tree so its state is announced.

## Cross-references

- **[Checkbox group](./checkbox-group.md)**: groups related checkboxes under a shared `<fieldset>`/`<legend>` with parent/nested selection support.