Accessible checkbox component built on Radix UI's `CheckboxPrimitive`, styled with ODS (OpenFrame Design System) tokens and a custom checkmark icon.
## Key Components
- **`Checkbox`** — A `forwardRef` wrapper around `@radix-ui/react-checkbox` Root, with ODS-themed styles for default, checked, focused, and disabled states.
## Usage Example
```typescript
import { Checkbox } from "@/components/ui/checkbox"
export function AcceptTerms() {
return (
)
}
// Controlled usage
export function ControlledCheckbox() {
const [checked, setChecked] = React.useState(false)
return (
setChecked(!!value)}
disabled={false}
/>
)
}
```
## States & Styling
| State | Behavior |
|-------|----------|
| Default | `border-ods-border`, `bg-ods-card` background |
| Checked | `bg-ods-accent`, `border-ods-accent` with `CheckboxCheckmarkIcon` (10px) |
| Focus | `ring-2` with `ods-accent` ring and 2px offset |
| Disabled | `opacity-50`, `cursor-not-allowed` |
All props from `@radix-ui/react-checkbox` Root are forwarded, including `checked`, `defaultChecked`, `onCheckedChange`, and `disabled`.