# Checkbox — Yoonet AU & NZ Component Prompt

You are building a Checkbox component for Yoonet AU & NZ.
Use shadcn/ui with the CSS variables below applied to :root.

## Active Brand Tokens
--primary: hsl(231 100% 77%);         /* #8A9EFF */
--primary-foreground: hsl(0 0% 100%); /* #fff */
--secondary: hsl(183 70% 76%);
--secondary-foreground: hsl(235 22% 12%);
--destructive: hsl(341 100% 70%); /* #FF6495 */
--radius: 0.5rem;
--font-heading: var(--font-heading);  /* Manrope */
--font-body: var(--font-body);        /* Inter */

## Typography
- Heading font: Manrope (weights 700, 800)
- Body / UI font: Inter (weights 400, 700)

## Code Conventions
- Import from @/components/ui/checkbox
- Use cn() from @/lib/utils for conditional classes
- "use client" only when state or events are needed
- No inline hex values — always reference CSS variables
## Usage
```tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Checkbox id="email" defaultChecked />
  <Label htmlFor="email">Send email updates</Label>
</div>

{/* Checkbox group */}
<div className="space-y-2">
  {options.map(opt => (
    <div key={opt} className="flex items-center gap-2">
      <Checkbox id={opt} />
      <Label htmlFor={opt}>{opt}</Label>
    </div>
  ))}
</div>
```

## Rules
- Checked: var(--primary) fill (#8A9EFF), white checkmark
- Border: var(--border) unchecked, var(--primary) checked
- Always use Label for accessibility
- Indeterminate state only for select-all patterns