---
title: 切り替え
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="ヘッダー" />
</Frame>

<Tabs>
  <Tab title="使用方法">
    ```jsx
    import { Toggle } from "twenty-ui/input";

    export const MyComponent = () => {
      return (
        <Toggle
        value = {true}
        onChange = {()=>console.log('On Change event')}
        color="green"
        toggleSize = "medium"
        />
      );
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ    | タイプ    | 説明                                                                          | デフォルト |
    | -------- | ------ | --------------------------------------------------------------------------- | ----- |
    | 値        | ブール型   | トグルの現在の状態                                                                   | `偽`   |
    | onChange | 機能     | トグルスイッチの状態が変化した際にトリガーされるコールバック関数                                            |       |
    | カラー      | string | トグルの色\                                                                      | 青色    |
    | トグルサイズ   | string | トグルのサイズは、高さと幅の両方に影響します。 トグルのサイズは、高さと幅の両方に影響します。 オプションは2つ：`small` と `medium` | 中     |
  </Tab>
</Tabs>