---

## Checkbox
Accessible checkbox with indeterminate support, semantic intents, and form integration.
Uses a hidden native input for correct form behavior and ARIA semantics.

**Import:** `import { Checkbox } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Checkbox label="Accept terms" bind:checked />
```

```svelte
<Checkbox
  label="Select all"
  indeterminate
  onCheckedChange={(val) => console.log(val)}
/>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: primary)
- variant: filled, ghost, outlined (default: outlined)
- size: lg, md, sm, xs (default: md)
- disabled: true (default: false)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...CheckboxVariants | `VariantProps` | no |  | Styling variants from CheckboxVariants |
| ...HTMLInputAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'type' | 'size' | 'checked' | 'class' | 'children') |
| checked | `boolean` | no |  | Current checked state. Supports two-way binding via `bind:checked`. |
| class | `string` | no |  | Extra classes merged onto the wrapper element. |
| disabled | `boolean` | no |  | Prevent interaction and dim the control. |
| error | `string` | no |  | Error message that replaces `helper`, styles the message red, and sets `aria-invalid` on the input. |
| helper | `string` | no |  | Hint text shown below the control. Hidden when `error` is set. |
| id | `string` | no |  | Explicit `id` to link `<label>` and `<input>`. Auto-generated if omitted. |
| indeterminate | `boolean` | no |  | Visual-only third state showing a dash icon. Resets to unchecked on next user toggle. Does not affect the submitted form value. Supports `bind:indeterminate`. |
| label | `string` | no |  | Text label displayed to the right of the checkbox box. |
| mint | `MintProp` | no |  | Micro-interaction preset applied to the control area on hover/click. |
| name | `string` | no |  | The `name` attribute of the underlying `<input>`. Used for form submission. |
| onCheckedChange | `(checked: boolean) => void` | no |  | Fired after the checked state changes. Receives the new `checked` value. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Checkbox: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| required | `boolean` | no |  | Mark the native input as required for form validation. |
| slotClasses | `Partial<Record<CheckboxSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. Slots: wrapper (root — what `class` also targets) | control | box | icon | label | message. |
| tier | `InteractiveTier` | no |  | Semantic radius tier. Default `modify` — checkbox is an input-tap surface. Inherited from TierContext when omitted; falls back to `modify` outside of any tier-aware container. |
| unstyled | `boolean` | no |  | Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The box exposes `data-state` for conditional styling. |
| value | `string` | no |  | The value submitted when checked. Defaults to `'on'`. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Checkbox. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| variant | `'filled' | 'ghost' | 'outlined'` | no | outlined | Controls the visual style and presentation of the Checkbox. Determines the component's visual treatment. Available options: filled, ghost, outlined. |
| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Checkbox. Affects the component's physical footprint. Available options: lg, md, sm, xs. |

Inherited from:
- Omit<CheckboxVariants, 'error' | 'checked' | 'indeterminate'> (omit-pattern)
- Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> (omit-pattern)