# Checkbox

> A styled native checkbox: an `<input type="checkbox">` paired with a decorative glyph box that renders its check or dash mark purely from the input's own state, wrapped in a `<label>` so clicking or tapping anywhere in the row — box, glyph, or label text alike — toggles the control.

```ts
import { Checkbox } from "@sdxc/ui";
```

The box precedes the input in source order so its `:has(~ input:…)` rules
can read state directly off it, keeping the whole control CSS-driven;
`shrink(0)` also keeps the box square regardless of label length.

## Examples

```tsx
<Checkbox name="terms" required>{t("signup.acceptTerms")}</Checkbox>
```

```tsx
<Checkbox color="danger" checked={row.flagged} aria-label={t("table.flagRow")} />
```

```tsx
<Checkbox disabled defaultChecked>{t("settings.legacyOptIn")}</Checkbox>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `role?` | `"checkbox" \| "button" \| "menuitemcheckbox" \| "option" \| "switch"` | ARIA role override, restricted to what a checkbox input may carry. |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `children?` | `RemixNode` | Label content rendered after the box, inside the same native `<label>` wrapping the row — clicking any of it toggles the checkbox natively, with no separate `htmlFor`/`id` pair required. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed elements. |

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |