Accessible checkbox component built on Radix UI's `CheckboxPrimitive`, styled with Tailwind CSS utility classes and a custom checkmark icon. ## Key Components - **`Checkbox`** — A forwarded-ref React component wrapping `@radix-ui/react-checkbox` with Flamingo design system styles, including focus ring, disabled state, and checked state variants. ## Usage Example ```typescript import { Checkbox } from "@/components/checkbox" // Basic usage // With label and controlled state const [checked, setChecked] = React.useState(false)
// Disabled state ``` ## Styling Highlights | State | Applied Style | |---|---| | Default | `border-primary`, `rounded-sm` | | Checked | `bg-primary text-primary-foreground` | | Focused | `ring-2 ring-ring ring-offset-2` | | Disabled | `cursor-not-allowed opacity-50` |