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

# Checkbox

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

Used when a user needs to select multiple values from several options.

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props           | Type     | Description                                                                                  |
    | --------------- | -------- | -------------------------------------------------------------------------------------------- |
    | checked         | boolean  | Indicates whether the checkbox is checked                                                    |
    | indeterminate   | boolean  | Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked)  |
    | onChange        | function | The callback function you want to trigger when the checkbox state changes                    |
    | onCheckedChange | function | The callback function you want to trigger when the `checked` state changes                   |
    | variant         | string   | The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary` |
    | size            | string   | The size of the checkbox. Has two options: `small` and `large`                               |
    | shape           | string   | The shape of the checkbox. Has two options: `squared` and `rounded`                          |
  </Tab>
</Tabs>