# Checkbox

> A native checkbox drawn as a gradient tick, plain or as a selectable card, with indeterminate.

Category: Forms. Docs page: https://rime.mjsons.net/components/checkbox

## Installation

```bash
npx shadcn@latest add KezLahd/rime/checkbox
```

Checkbox keeps the real <input type="checkbox"> (visually hidden, focusable, form-posting) and draws the box beside it. variant="card" turns the whole option into a bordered target for statements a user agrees to (terms, declarations).

## Usage

```tsx
import { Checkbox } from "@/components/ui";

<Checkbox label="I accept the workspace terms" checked={ok} onChange={(e) => setOk(e.target.checked)} />
```

## Props: Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `indeterminate` | `boolean` |  |  |
| `error` | `ReactNode` |  | Error text for a standalone checkbox (a declaration, accepting the terms). |
| `invalid` | `boolean` |  |  |
| `variant` | `"plain" \| "card"` | `"plain"` | plain = box and label. card = a bordered opt-in box that washes accent when ticked (declarations, an opt-in to email updates). |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes, InputHTMLAttributes.

## Examples

### Plain, card, indeterminate

```tsx
<Checkbox label="Email me updates" />
<Checkbox variant="card" label="I accept the terms" description="Required to continue." />
<Checkbox indeterminate label="Select all" />
```

## Theme tokens

System tokens it reads: `--brand`, `--brand-gradient`, `--danger-base`, `--danger-field-fill`, `--danger-ink`, `--dur`, `--ease`, `--focus-ring`, `--glow-sm`, `--ink-body`, `--ink-disabled`, `--ink-heading`, `--ink-inverse`, `--ink-muted`, `--line`, `--neutral-border`, `--r-2xs`, `--r-lg`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-contact`, `--rgb-danger`, `--rgb-white`, `--surface-solid`, `--surface-sunken`, `--text-body`, `--text-caption`.

## Accessibility

- The label is the <label> of the real input, so the whole row toggles it.
- error renders under the option and is tied by aria-describedby.

## Do

- Use the card variant for statements a user signs up to.

## Don't

- Don't use a checkbox to trigger an immediate action; that is a Switch.