# Textarea

## Introduction

> 💡 **Use built-in form props**
>
> This component natively supports form elements such as `label` and `helperText` props.
> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.

```tsx
<Textarea name="Textarea" />
```

| Field          | Description | Default    |
| -------------- | ----------- | ---------- |
| name           | —           | "Textarea" |
| variant        | —           | —          |
| color          | —           | —          |
| size           | —           | —          |
| label          | —           | —          |
| startDecorator | —           | —          |
| endDecorator   | —           | —          |
| required       | —           | —          |
| disabled       | —           | —          |
| error          | —           | —          |
| onChange       | —           | —          |

### Variants

```tsx
<>
  <Textarea name="Solid" placeholder="Type in here…" variant="solid" />
  <Textarea name="Soft" placeholder="Type in here…" variant="soft" />
  <Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
  <Textarea name="Plain" placeholder="Type in here…" variant="plain" />
</>
```

### Sizes

```tsx
<>
  <Textarea size="sm" name="Size" placeholder="Small" />
  <Textarea size="md" name="Size" placeholder="Medium" />
  <Textarea size="lg" name="Size" placeholder="Large" />
</>
```

### Colors

```tsx
<>
  <Textarea name="Primary" placeholder="Type in here…" variant="outlined" color="primary" />
  <Textarea name="Neutral" placeholder="Type in here…" variant="outlined" color="neutral" />
  <Textarea name="Danger" placeholder="Type in here…" variant="outlined" color="danger" />
  <Textarea name="Warning" placeholder="Type in here…" variant="outlined" color="warning" />
</>
```

### Variants

```tsx
<>
  <Textarea name="Solid" placeholder="Type in here…" variant="solid" />
  <Textarea name="Soft" placeholder="Type in here…" variant="soft" />
  <Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
  <Textarea name="Plain" placeholder="Type in here…" variant="plain" />
</>
```
