> ## 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.

# Case à cocher

<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="En-tête" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png" />
</Frame>

Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options.

<Tabs>
  <Tab title="Utilisation">
    ```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="Propriétés">
    | Propriétés      | Type     | Description                                                                                                |
    | --------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
    | coché           | booléen  | Indique si la case à cocher est cochée                                                                     |
    | indéterminé     | booléen  | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée)                           |
    | onChange        | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change              |
    | onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change                          |
    | variante        | chaîne   | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
    | taille          | chaîne   | La taille de la case à cocher. Comporte deux options : `petit` et `grand`                                  |
    | forme           | chaîne   | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie`                               |
  </Tab>
</Tabs>