---
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">

| Властивості | Тип         | Опис                                                                                                                         | За замовчуванням |
| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| значення    | булевий тип | Поточний стан перемикача                                                                                                     | `хибно`          |
| onChange    | функція     | Функція зворотного виклику, що активується при зміні стану перемикача                                                        |                  |
| колір       | рядок       | Color of the toggle when it\                                                                                                | s blue color     |
| toggleSize  | рядок       | Size of the toggle, affecting both height and weight. Має два варіанти: `малий` і `середній` | середній         |

</Tab>
</Tabs>