---
title: 切換
image: /images/user-guide/table-views/table.png
---

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

<Tabs>
<Tab title="Usage">

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

| 屬性   | 類型       | 描述                            | 預設值          |
| ---- | -------- | ----------------------------- | ------------ |
| 值    | 布爾值      | 切換的當前狀態                       | `假`          |
| 變更事件 | function | 切換狀態改變時觸發的回調函數                |              |
| 顏色   | 字串       | Color of the toggle when it\ | s blue color |
| 切換大小 | 字串       | 切換的尺寸，影響高度和寬度。 有兩個選項：`小`和`中等` | 中等           |

</Tab>
</Tabs>