# Checkbox

Mithilfe einer Checkbox kann ein User eine Option auswählen oder abwählen. Bei der Verwendung mehrerer Checkboxen wird im Normalfall die CheckboxGroup verwendet.

## Overview

# Playground

Verwende `<Checkbox />` zusammen mit einer eingebetteten Beschriftung, um eine
darzustellen.

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

<Checkbox>
  Ich stimme den AGBs zu und bestätige, dass ich die
  Datenschutzhinweise zur Kenntnis genommen habe.
</Checkbox>
```

---

# Indeterminated

Die Property `isIndeterminate` zeigt an, dass sich eine Checkbox in einem
visuell uneindeutigen Zustand befindet – also weder vollständig ausgewählt noch
vollständig abgewählt ist. Sie wird verwendet, um übergeordnete Checkboxen
darzustellen, bei denen nur ein Teil der untergeordneten Optionen ausgewählt
wurde.

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

<Checkbox isIndeterminate>
  Ich stimme den AGBs zu und bestätige, dass ich die
  Datenschutzhinweise zur Kenntnis genommen habe.
</Checkbox>
```

---

# Disabled

In bestimmten Fällen kann eine Checkbox den State **Disabled** haben. In diesem
Fall ist die Auswahloption für den User deaktiviert und kann nicht ausgewählt
werden.

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

<Checkbox isDisabled>
  Ich stimme den AGBs zu und bestätige, dass ich die
  Datenschutzhinweise zur Kenntnis genommen habe.
</Checkbox>
```

---

# Kombiniere mit ...

## React Hook Form

```tsx
import {
  Checkbox,
  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<{ acceptTerms: boolean }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="acceptTerms"
          rules={{ required: true }}
        >
          <Checkbox>
            Ich stimme den AGBs zu und bestätige, dass ich
            die Datenschutzhinweise zur Kenntnis genommen
            habe.
          </Checkbox>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```