# CheckboxGroup

Shares one value array across a group of checkboxes.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/CheckboxGroup.tsx)

## Overview

A checkbox group shares one value array across the checkboxes inside it. Each checkbox joins the array under its `value`.

Name the group with `aria-label`, or with a `Field.Label` when it sits in a `Field.Root`.

## Examples

### Basic

```tsx
import { Checkbox, CheckboxGroup, Field } from '@tempoxyz/ds'

export function Demo() {
  return (
    <CheckboxGroup aria-label="Currencies" defaultValue={['usdc']}>
      {(['USDC', 'USDT', 'EURC'] as const).map((label) => (
        <Field.Root key={label}>
          <Field.Item>
            <Checkbox value={label.toLowerCase()} />
            <Field.Label>{label}</Field.Label>
          </Field.Item>
        </Field.Root>
      ))}
    </CheckboxGroup>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CheckboxGroup/Basic.tsx)

### Parent

Pass every option to `allValues` and add a `Checkbox` with `parent` for a select-all box.

```tsx
import { Checkbox, CheckboxGroup, Field } from '@tempoxyz/ds'

function Item(props: Checkbox.Props & { label: string }) {
  const { label, ...checkbox } = props

  return (
    <Field.Root>
      <Field.Item>
        <Checkbox {...checkbox} />
        <Field.Label>{label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <CheckboxGroup
      allValues={['usdc', 'usdt', 'eurc']}
      aria-label="Currencies"
      defaultValue={['usdc']}
    >
      <Checkbox aria-label="All currencies" parent />
      <Item label="USDC" name="usdc" value="usdc" />
      <Item label="USDT" name="usdt" value="usdt" />
      <Item label="EURC" name="eurc" value="eurc" />
    </CheckboxGroup>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CheckboxGroup/Parent.tsx)

### Disabled

Set `disabled` to disable every checkbox in the group.

```tsx
import { Checkbox, CheckboxGroup, Field } from '@tempoxyz/ds'

export function Demo() {
  return (
    <CheckboxGroup aria-label="Currencies" defaultValue={['usdc']} disabled>
      {(['USDC', 'USDT', 'EURC'] as const).map((label) => (
        <Field.Root key={label}>
          <Field.Item>
            <Checkbox value={label.toLowerCase()} />
            <Field.Label>{label}</Field.Label>
          </Field.Item>
        </Field.Root>
      ))}
    </CheckboxGroup>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CheckboxGroup/Disabled.tsx)

## Guidelines

TODO: Write guidelines for CheckboxGroup.