# Checkbox

> Accessible checkbox built on Radix.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/checkbox.json`

## Install

```tsx
import { Checkbox } from "@aspyn-io/kit";
import { Label } from "@aspyn-io/kit";
```

### With label

Always pair with a Label via htmlFor/id: clicking the label toggles the box.

```tsx
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">I agree to the terms</Label>
</div>
```

### Controlled

```tsx
const [checked, setChecked] = React.useState(false);

<Checkbox
  id="notify"
  checked={checked}
  onCheckedChange={(value) => setChecked(value === true)}
/>
```

### Disabled

```tsx
<Checkbox id="locked" disabled />
<Label htmlFor="locked">Managed by your organization</Label>
```

### Checkbox group

Group related options under a fieldset legend.

```tsx
<fieldset className="space-y-3">
  <legend className="text-sm font-medium">Notifications</legend>
  <div className="flex items-center gap-2">
    <Checkbox id="comments" defaultChecked />
    <Label htmlFor="comments">Comments</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="mentions" defaultChecked />
    <Label htmlFor="mentions">Mentions</Label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="deploys" />
    <Label htmlFor="deploys">Deploys</Label>
  </div>
</fieldset>
```

### With description

Pair the label with helper text via aria-describedby.

```tsx
<div className="flex items-start gap-2">
  <Checkbox id="marketing" aria-describedby="marketing-desc" />
  <div className="grid gap-1">
    <Label htmlFor="marketing">Marketing emails</Label>
    <p id="marketing-desc" className="text-sm text-muted-foreground">
      Receive product news and occasional offers.
    </p>
  </div>
</div>
```

### Invalid

Set aria-invalid to surface the destructive state.

```tsx
<div className="flex items-center gap-2">
  <Checkbox id="accept" aria-invalid aria-describedby="accept-error" />
  <Label htmlFor="accept">Accept the terms to continue</Label>
</div>
<p id="accept-error" className="text-sm text-destructive">
  You must accept the terms.
</p>
```

## Notes

- onCheckedChange receives true | false | "indeterminate": compare explicitly when storing booleans.