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

# TextField

<Meta of={TextFieldStories} />

<br />

## Overview

텍스트를 여러 줄로 입력하기 위해 사용하는 요소입니다.

<Canvas of={TextFieldStories.Default} />

<Controls />

<br />

## Usage

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

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

<TextArea placeholder="Reply to comment…" />;
```

<br />

## Variant

### Radius Props

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

기본 값은 `medium` 입니다.

<Canvas of={TextFieldStories.Radius} />
### Appearance Props

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

기본 값은 `surface` 입니다.

<Canvas of={TextFieldStories.Appearance} />

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={TextFieldStories.Size} />

### Scaling Props

`scaling` props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={TextFieldStories.Scaling} />