<!-- source-hash: c1a54005af93850cd2ca67c81ddf2ca7 -->
A compound checkbox component that pairs a Radix UI checkbox with a title and description, styled with ODS (OpenFrame Design System) tokens.

## Key Components

- **`CheckboxWithDescription`** — A `forwardRef` component combining a controlled checkbox, label, and descriptive text in a card-style container
- **`CheckboxWithDescriptionProps`** — Interface defining the component's controlled state and content props

### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `id` | `string` | ✅ | Links the label `htmlFor` to the checkbox input |
| `checked` | `boolean` | ✅ | Controlled checked state |
| `onCheckedChange` | `(checked: boolean) => void` | ✅ | Change handler |
| `title` | `string` | ✅ | Primary label text |
| `description` | `string` | ✅ | Secondary descriptive text |
| `disabled` | `boolean` | ❌ | Disables interaction and dims the container |
| `className` | `string` | ❌ | Additional classes for the outer wrapper |

## Usage Example

```typescript
import { CheckboxWithDescription } from "@/components/ui/checkbox-with-description"

function SettingsForm() {
  const [enabled, setEnabled] = React.useState(false)

  return (
    <CheckboxWithDescription
      id="notifications"
      checked={enabled}
      onCheckedChange={setEnabled}
      title="Email Notifications"
      description="Receive alerts when a ticket is updated or assigned to you."
    />
  )
}
```

> The outer container becomes visually dimmed (`opacity-50`) and non-interactive (`cursor-not-allowed`) when `disabled` is set, applying consistently to both the checkbox and its label.