---
title: 토글
icon: toggle-on
---

<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 | function | 토글 상태가 변경될 때 호출되는 콜백 함수                                  |              |
| 색상       | 문자열      | Color of the toggle when it\                             | s blue color |
| 토글 크기    | 문자열      | 토글의 크기는 높이와 너비에 영향을 미칩니다. 옵션은 'small'과 'medium' 두 가지입니다. | 중간           |



</Tab>
</Tabs>
