---
title: Case à cocher
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

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

<Tabs>
<Tab title="Usage">

```jsx
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="Props">

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