---
title: チェックボックス
image: '""'
---

<Frame>
  <img src="&#x22;&#x22;" alt="ヘッダー" />
</Frame>

ユーザーが、複数のオプションから複数の値を選択する必要がある場合に使用されます。

<Tabs>
  <Tab title="使用方法">
    ```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="プロパティ">
    | プロパティ           | タイプ    | 説明                                                                        |
    | --------------- | ------ | ------------------------------------------------------------------------- |
    | checked         | ブール型   | チェックボックスがチェックされているかどうかを示します                                               |
    | 不確定             | ブール型   | チェックボックスが不確定な状態（チェック済みでも未チェックでもない）かどうかを示します                               |
    | onChange        | 関数     | チェックボックスの状態が変化したときにトリガーされるコールバック関数                                        |
    | onCheckedChange | 関数     | `checked` 状態が変化したときにトリガーされるコールバック関数                                       |
    | バリアント           | string | ボックスのビジュアルスタイルのバリエーション。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます |
    | サイズ             | string | チェックボックスのサイズ。 オプションは2つ：`small` と `large`                                  |
    | 形状              | string | チェックボックスの形状。 オプションは2つ：`squared` と `rounded`                               |
  </Tab>
</Tabs>