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

# 复选框

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

用于用户需要从多个选项中选择多个值时。

<Tabs>
  <Tab title="**用法**">
    ```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="属性">
    | 属性              | 类型  | 描述                                                  |
    | --------------- | --- | --------------------------------------------------- |
    | 选中              | 布尔值 | 指示复选框是否被选中                                          |
    | 不确定             | 布尔值 | 指示复选框是否处于不确定状态（既非选中也非未选中）                           |
    | onChange        | 函数  | 当复选框状态更改时需要触发的回调函数                                  |
    | onCheckedChange | 函数  | 当`checked`状态更改时需要触发的回调函数                            |
    | 变体              | 字符串 | 盒子的视觉样式变体。 选项包括：`primary`，`secondary`， 和 `tertiary` |
    | 大小              | 字符串 | 复选框的大小。 有两个选项：`small` 和 `large`                     |
    | 形状              | 字符串 | 复选框的形状。 有两个选项：`squared` 和 `rounded`                 |
  </Tab>
</Tabs>