# CheckboxGroup

> A landmark grouping independently toggled checkbox controls into one related set: a `role="group"` host laying children out in a column, or a row when `orientation` is `"horizontal"`.

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

Lays checkbox children out in a column, or a row when `orientation` is
`"horizontal"`; each nested checkbox keeps its own checked state, `name`,
and `value`. `aria-invalid="true"` recolors plain text composed alongside.

## Examples

```tsx
<CheckboxGroup aria-labelledby="fruits-label">
	<Label id="fruits-label">{t("fruits.label")}</Label>
	<Checkbox name="fruits" value="apple">{t("fruits.apple")}</Checkbox>
	<Checkbox name="fruits" value="banana">{t("fruits.banana")}</Checkbox>
	<Checkbox name="fruits" value="orange">{t("fruits.orange")}</Checkbox>
</CheckboxGroup>
```

```tsx
<CheckboxGroup aria-label={t("notifications.label")} orientation="horizontal">
	<Checkbox name="notify" value="email">{t("notifications.email")}</Checkbox>
	<Checkbox name="notify" value="sms">{t("notifications.sms")}</Checkbox>
	<Checkbox name="notify" value="push">{t("notifications.push")}</Checkbox>
</CheckboxGroup>
```

```tsx
<CheckboxGroup aria-labelledby="terms-label" aria-invalid="true" aria-describedby="terms-error">
	<Label id="terms-label">{t("terms.label")}</Label>
	<Checkbox name="terms" value="accepted" required>{t("terms.accept")}</Checkbox>
	<FieldError id="terms-error">{t("terms.required")}</FieldError>
</CheckboxGroup>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis a group's checkboxes lay out along: a single column, or a single row. |