# 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 `` zusammen mit einer eingebetteten Beschriftung, um eine
darzustellen.
```tsx
import { Checkbox } from "@mittwald/flow-react-components";
Ich stimme den AGBs zu und bestätige, dass ich die
Datenschutzhinweise zur Kenntnis genommen habe.
```
---
# 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";
Ich stimme den AGBs zu und bestätige, dass ich die
Datenschutzhinweise zur Kenntnis genommen habe.
```
---
# 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";
Ich stimme den AGBs zu und bestätige, dass ich die
Datenschutzhinweise zur Kenntnis genommen habe.
```
---
# 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 (
);
}
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `inputClassName` | `string` | - | - |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-CheckboxGroup'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `