# Checkbox

Toggles between checked and not checked, with an indeterminate value for parents of a list.

Tier: Free

## Installation

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

## Usage

```tsx
import { CheckboxField } from '@/components/fetaui/checkbox'

export function Example() {
  return <CheckboxField label="Accept terms" onCheckedChange={setAccepted} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| checked | boolean |  |
| defaultChecked | boolean | false |
| onCheckedChange | (checked) => void |  |
| indeterminate | boolean | false |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |
| CheckboxField label | ReactNode | required |
| CheckboxField description, error | ReactNode |  |
| CheckboxCard title, description, icon | ReactNode |  |
| CheckboxGroup label, items | string, items[] | required |

## When to use

- For independent choices, and for agreeing to something.

## When not to use

- When the change applies right away: use Switch.
- When only one option can be picked: use Radio.

## Accessibility

- A native checkbox with a label.
- Indeterminate is set on the input, so it reads as mixed.
- The hit area is 24 px on Web.

## Motion

- The box presses to 0.9, fills from the centre and draws its check in one stroke.
- A parent checks its rows 30 ms apart.
- With reduced motion, the state appears at once.