---
title: 토글
---


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