# Checkbox card (goodtabs UI)

A selectable card with a checkbox, title, description and meta line.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/checkbox-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/checkbox-card`

## Usage

```tsx
import { CheckboxCard, CheckboxCardGroup } from "@/components/ui/checkbox-card"

<CheckboxCardGroup aria-label="Add-ons" columns={2}>
  <CheckboxCard title="Priority support" description="Replies within four hours." meta="$20 per month" />
  <CheckboxCard title="Extra seats" description="Five more members." meta="$8 per seat" defaultChecked />
</CheckboxCardGroup>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | The card's title and the checkbox's accessible name. |
| description | `ReactNode` |  | One line under the title. |
| meta | `ReactNode` |  | Mono meta line at the bottom, for example a price. |
| checked | `boolean` |  | Controlled checked state. |
| defaultChecked | `boolean` | `false` | Starting state when uncontrolled. |
| onCheckedChange | `(checked: boolean) => void` |  | Fires with the next boolean on every toggle. |
| disabled | `boolean` | `false` | Disables the checkbox and fades the card. |
| name, value | `string` |  | Form field name and value, forwarded to the checkbox. |
| columns | `1 | 2 | 3` | `1` | On CheckboxCardGroup: columns from the md and lg container widths. |

## When to use

- Picking several options that each deserve a title and a line of context: add-ons, features, permissions
- Settings pages where a plain checkbox list would lose the explanation
- Onboarding steps that ask what someone wants to turn on

## When not to use

- For a single choice from a set, use radio-cards
- For long lists of simple options, a plain checkbox list is denser
- As a toggle for an immediate action; use a switch

## Notes for agents

- The whole card is a label around shadcn's Checkbox, so every click toggles it and the card carries the focus ring
- onCheckedChange is a function: pass it from a client component. Uncontrolled with defaultChecked works from a server component
- Checked styling targets radix's data-state=checked on the card and the checkbox, so it does not depend on the primitive's own checked classes
- CheckboxCardGroup is a plain grid with role=group; give it an aria-label and use columns for 2 or 3 across

Docs: https://ui.goodtabs.co/components/checkbox-card