> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kontrollkästchen

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tasks/tasks_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=4c4e26ebbb9b40e541a945a9cda7c28a" alt="Kopfzeile" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png" />
</Frame>

Wird verwendet, wenn ein Benutzer mehrere Werte aus mehreren Optionen auswählen muss.

<Tabs>
  <Tab title="&#x22;Verwendung&#x22;">
    ```jsx theme={null}
    import { Checkbox } from "twenty-ui/display";

    export const MyComponent = () => {
      return (
        <Checkbox
          checked={true}
          indeterminate={false}
          onChange={() => console.log("onChange function fired")}
          onCheckedChange={() => console.log("onCheckedChange function fired")}
          variant="primary"
          size="small"
          shape="squared"
        />
      );
    };
    ```
  </Tab>

  <Tab title="&#x22;Eigenschaften&#x22;">
    | "Eigenschaften"        | Typ          | Beschreibung                                                                                                  |
    | ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
    | markiert               | boolesch     | Gibt an, ob das Kontrollkästchen markiert ist                                                                 |
    | unbestimmt             | boolesch     | Gibt an, ob sich das Kontrollkästchen in einem unbestimmten Zustand befindet (weder markiert noch unmarkiert) |
    | beiÄnderung            | Funktion     | Die Rückruffunktion, die ausgelöst werden soll, wenn sich der Zustand des Kontrollkästchens ändert            |
    | beiMarkierungsÄnderung | Funktion     | Die Rückruffunktion, die ausgelöst werden soll, wenn sich der `markiert` Zustand ändert                       |
    | Variante               | Zeichenkette | Der visuelle Stil der Box. Optionen umfassen: `primary`, `secondary` und `tertiary`                           |
    | größe                  | Zeichenkette | Die Größe des Kontrollkästchens. Hat zwei Optionen: `klein` und `groß`                                        |
    | Form                   | Zeichenkette | Die Form des Kontrollkästchens. Hat zwei Optionen: `squared` und `rounded`                                    |
  </Tab>
</Tabs>