<!-- source-hash: 01a25a0740d1f4040be1a2e32f829429 -->
A styled checkbox component that renders as a full-width interactive block with a label, optional description, and error state — built on top of Radix UI's `CheckboxPrimitive`.

## Key Components

- **`CheckboxBlock`** — A `forwardRef` component wrapping `@radix-ui/react-checkbox` with a card-style block layout
- **`CheckboxBlockProps`** — Interface extending standard checkbox behavior with `label`, `description`, `error`, and `className`

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Required primary text displayed next to the checkbox |
| `description` | `React.ReactNode` | Optional secondary text below the label |
| `error` | `string` | Error message shown below the block; also triggers a red border |
| `checked` / `defaultChecked` | `boolean` | Controlled/uncontrolled checked state |
| `onCheckedChange` | `(checked: boolean) => void` | Change handler |
| `disabled` | `boolean` | Disables interaction and reduces opacity |

## Usage Example

```typescript
import { CheckboxBlock } from "./checkbox-block"

// Basic usage
<CheckboxBlock
  id="terms"
  label="Accept Terms & Conditions"
  description="By checking this, you agree to our terms of service."
  onCheckedChange={(checked) => console.log(checked)}
/>

// With error state
<CheckboxBlock
  id="required-field"
  label="Required option"
  error="This field is required"
  checked={false}
  onCheckedChange={handleChange}
/>

// Disabled
<CheckboxBlock
  id="disabled-option"
  label="Unavailable option"
  disabled
/>
```