# Checkbox: Cards

> Wrap a whole card in the label so the card is the hit area, and style it with `has-data-checked`.

Example: https://hextaui.com/docs/checkbox/examples/cards
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-cards.json
```

This adds `components/examples/checkbox/cards.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/cards.tsx"
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"

const addOns = [
  { value: "analytics", title: "Analytics", text: "Dashboards and exports." },
  { value: "backups", title: "Backups", text: "Daily snapshots, 30 days." },
]

export function CheckboxCards() {
  return (
    <CheckboxGroup
      aria-label="Add-ons"
      defaultValue={["analytics"]}
      className="w-full max-w-md"
    >
      <div className="grid gap-3 sm:grid-cols-2">
        {addOns.map((addOn) => (
          <label
            key={addOn.value}
            className="flex items-start gap-3 rounded-xl border p-4 text-sm transition-colors has-data-checked:border-primary"
          >
            <span className="flex h-5 items-center">
              <Checkbox value={addOn.value} />
            </span>
            <span className="flex flex-col gap-0.5">
              <span className="leading-5 font-medium">{addOn.title}</span>
              <span className="text-muted-foreground">{addOn.text}</span>
            </span>
          </label>
        ))}
      </div>
    </CheckboxGroup>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Identifies the box inside a group and is what the form submits. Falls back to name, then “on”. |

### CheckboxGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `string[]` | – |  |

## More Checkbox examples

- [States](https://hextaui.com/docs/checkbox/examples/states.md)
- [Select all](https://hextaui.com/docs/checkbox/examples/select-all.md)
- [Nested groups](https://hextaui.com/docs/checkbox/examples/nested-groups.md)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.md)
- [Form](https://hextaui.com/docs/checkbox/examples/form.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)