# CheckboxGroup

Die CheckboxGroup fasst mehrere Checkboxen oder CheckboxButtons logisch in einer Gruppierung zusammen.

## Overview

# Playground

Verwende `<CheckboxGroup />` zusammen mit mehreren `<Checkbox />` oder
`<CheckboxButtons />`, um eine CheckboxGroup darzustellen. Über der
CheckboxGroup kann ein beschreibendes
[Label](/04-components/content/label/overview) verwendet werden.

```tsx
import {
  Checkbox,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
</CheckboxGroup>
```

---

# CheckboxButtons

Eine CheckboxGroup kann entweder mit
[CheckboxButtons](/04-components/form-controls/checkbox-button/overview) oder
[Checkboxen](/04-components/form-controls/checkbox/overview) gefüllt werden.

```tsx
import {
  CheckboxButton,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <CheckboxButton value="read">Lesen</CheckboxButton>
  <CheckboxButton value="write">Schreiben</CheckboxButton>
</CheckboxGroup>
```

---

# Spalten

Die CheckboxGroup verwendet das
[ColumnLayout](/04-components/structure/column-layout/overview), um eine
Anpassung der Spalten zu ermöglichen. Bei der Verwendung von CheckboxButtons
entspricht der Default dem des ColumnLayouts, während Checkboxen im Default
untereinander angezeigt werden.

```tsx
import {
  CheckboxButton,
  CheckboxGroup,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup l={[1, 1]} m={[1]}>
  <Label>Berechtigungen</Label>
  <CheckboxButton value="read">Lesen</CheckboxButton>
  <CheckboxButton value="write">Schreiben</CheckboxButton>
</CheckboxGroup>
```

---

# Kombiniere mit ...

## FieldDescription

Um wichtige Hinweise zu den Auswahloptionen der CheckboxGroup bereitzustellen,
kann unterhalb der Gruppe eine `<FieldDescription />` eingebaut werden.

```tsx
import {
  Checkbox,
  CheckboxGroup,
  FieldDescription,
  Label,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>Berechtigungen</Label>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
  <FieldDescription>Weitere Informationen</FieldDescription>
</CheckboxGroup>
```

## ContextualHelp

Benutze das [ContextualHelp](/04-components/overlays/contextual-help/overview),
um weitere Informationen bereitstellen zu können.

```tsx
import {
  Button,
  Checkbox,
  CheckboxGroup,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<CheckboxGroup>
  <Label>
    Berechtigungen
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
  <Checkbox value="read">Lesen</Checkbox>
  <Checkbox value="write">Schreiben</Checkbox>
</CheckboxGroup>
```

## React Hook Form

```tsx
import {
  Checkbox,
  CheckboxGroup,
  Label,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";

export default () => {
  const form = useForm<{ permissions: string[] }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="permissions"
          rules={{
            required:
              "Bitte wähle mindestens eine Berechtigung aus",
          }}
        >
          <CheckboxGroup>
            <Label>Berechtigungen</Label>
            <Checkbox value="read">Lesen</Checkbox>
            <Checkbox value="write">Schreiben</Checkbox>
          </CheckboxGroup>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```