# UITextarea

Create a textarea base on style guide

**Since**: 7.0.0 (6.3.0)

| Name           | Type       | Default | Description                                                 |
| -------------- | ---------- | ------- | ----------------------------------------------------------- |
| id             | `string`   |         | **Required** - Id of the textarea                           |
| value          | `string`   |         | **Required** - Value for textarea                           |
| label          | `string`   |         | The text label                                              |
| secondaryLabel | `string`   |         | The secondary text label displayed in top right corner      |
| placeholder    | `string`   |         | Placeholder for textarea                                    |
| size           | `string`   |         | Size and feeling for textarea                               |
| variant        | `string`   |         | Variant of the textarea                                     |
| rows           | `number`   | `3`     | Textarea rows presentation                                  |
| disabled       | `boolean`  | `false` | Wether the textarea is disabled or not                      |
| onChange       | `function` |         | **Required** - Callback for when the textarea value changes |

### Example

```js
import {UITextarea} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
        $$(UITextarea, {
            id: 'myTextarea',
            label: this.getLabel('Textarea label'),
            secondaryLabel: this.getLabel('Mandatory Field'),
            value: '',
            rows: 5,
            onChange: (value) => {
                // Do something
            }
        })
    )
}
```