# Component/Textarea

> Props: component-textarea.props.txt

## Examples


### Auto Size

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    placeholder: '텍스트를 입력해주세요.',
    autoSize: true
  }
}
```

### Auto Size With Max Rows

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    placeholder: '텍스트를 입력해주세요.',
    autoSize: {
      maxRows: 5
    }
  }
}
```

### Auto Size With Min Max Rows

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    placeholder: '텍스트를 입력해주세요.',
    autoSize: {
      minRows: 3,
      maxRows: 6
    }
  }
}
```

### Auto Size With Min Rows

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    placeholder: '텍스트를 입력해주세요.',
    autoSize: {
      minRows: 3
    }
  }
}
```

### Base

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Disabled

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    disabled: true,
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Entered Disabled

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    disabled: true,
    value: '텍스트',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Error

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    error: true,
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Max Length

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  },
  args: {
    placeholder: '텍스트를 입력해주세요.',
    maxLength: 500,
    showCounter: true
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={16}>
      <Textarea size='large' placeholder='텍스트를 입력해주세요.' />
      <Textarea size='medium' placeholder='텍스트를 입력해주세요.' />
      <Textarea size='small' placeholder='텍스트를 입력해주세요.' />
      <Textarea size='xsmall' placeholder='텍스트를 입력해주세요.' />
    </Stack>
}
```

### With Form Helper Text

```tsx
{
  render: () => <div>
      <Textarea error placeholder='텍스트를 입력해주세요.' />
      <FormHelperText status='error'>Error Message</FormHelperText>
    </div>
}
```