import { Canvas, Meta, Controls } from '@storybook/addon-docs';
import * as ToggleSwitchStories from './ToggleSwitch.stories';

# ToggleSwitch

<Meta of={ToggleSwitchStories} />

<br />

## Overview

선택 상태와 선택 해제 상태를 전환하여 컨트롤하는 요소입니다.

<Canvas of={ToggleSwitchStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>ToggleSwitch</strong> 컴포넌트 사용방법 입니다.

```javascript
import { ToggleSwitch } from '@lotte-innovate/lui';

<ToggleSwitch></ToggleSwitch>;
```

<br />

## API Reference

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
    <th>Default</th>
  </tr>
  <tr>
    <td>defaultChecked</td>
    <td>boolean</td>
    <td>처음 랜더링 될 때 ToggleSwitch의 상태입니다.</td>
    <td>false</td>
  </tr>
  <tr>
    <td>checked</td>
    <td>boolean</td>
    <td>ToggleSwitch의 제어 상태입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>boolean</td>
    <td>ToggleSwitch을 인터렉팅하는 것을 제어합니다.</td>
    <td>360px</td>
  </tr>
  <tr>
    <td>required</td>
    <td>boolean</td>
    <td>ToggleSwitch의 필수값 여부입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>id</td>
    <td>string</td>
    <td>ToggleSwitch의 아이디입니다.</td>
    <td></td>
  </tr>
  <tr>
    <td>name</td>
    <td>string</td>
    <td>ToggleSwitch의 이름입니다.</td>
    <td></td>
  </tr>
</table>
## Variant

### Size Props

`size` props는 컴포넌트의 크기입니다.

기본 값은 `medium` 입니다.

<Canvas of={ToggleSwitchStories.Size} />

### Radius Props

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={ToggleSwitchStories.Radius} />

### Appearance Props

`appearance` props는 컴포넌트의 스타일을 변경합니다.

기본 값은 `surface` 입니다.

<Canvas of={ToggleSwitchStories.Appearance} />