npm package: @paprika/textarea
Description: The Textarea component is a standard multiline text input with some enhancements that can be used as a controlled or uncontrolled component.
Author: @paprika
Latest version: 3.0.16

<!-- start: Autogenerated - do not modify -->

# @paprika/textarea

## Description

The Textarea component is a standard multiline text input with some enhancements that can be used as a controlled or uncontrolled component.

## Installation

```
yarn add @paprika/textarea
```

or with npm:

```
npm install @paprika/textarea
```

## Props

### Textarea

| Prop         | Type                                                                                | required | default                    | Description                                                                                                                                    |
| ------------ | ----------------------------------------------------------------------------------- | -------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| a11yText     | string                                                                              | false    | null                       | Provides a non-visible label for this textarea for assistive technologies.                                                                     |
| canExpand    | bool                                                                                | false    | true                       | If true the height will expand automatically to fit content up to the value of maxHeight.                                                      |
| children     | node                                                                                | false    | null                       | Optional Textarea.Container to collect props for root DOM element.                                                                             |
| defaultValue | string                                                                              | false    | null                       | Sets the default textarea value for an uncontrolled component.                                                                                 |
| hasError     | bool                                                                                | false    | false                      | If true displays a red border around textarea to indicate an error.                                                                            |
| isDisabled   | bool                                                                                | false    | false                      | If true it makes the textarea disabled.                                                                                                        |
| isReadOnly   | bool                                                                                | false    | false                      | If true it makes the textarea read only.                                                                                                       |
| maxHeight    | [number,string]                                                                     | false    | 300                        | The maximum height of the textarea.                                                                                                            |
| minHeight    | [number,string]                                                                     | false    | 80                         | The minimum / default height of the textarea.                                                                                                  |
| onChange     | func                                                                                | false    | () => {}                   | Callback to be executed when the textarea value is changed. Receives the onChange event as an argument. Required when component is controlled. |
| size         | [ Textarea.types.size.SMALL, Textarea.types.size.MEDIUM, Textarea.types.size.LARGE] | false    | Textarea.types.size.MEDIUM | The size of the textarea input (font size).                                                                                                    |
| value        | string                                                                              | false    | undefined                  | The value inside of the textarea input. Defining this prop will make this a controlled component. Do not use in conjunction with defaultValue. |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

### Textarea.Container

All props and attributes are spread onto the root container `<div>` element.

### Usage

The Textarea can be used as a controlled or uncontrolled component.

To use it as a controlled comnponent:

```js
import Textarea from "@paprika/textarea";
...
const [value, setValue] = React.useState("Hello world");
...
<Textarea
  value={value}
  onChange={event => { setValue(event.target.value) }}
/>
```

To use it as an uncontrolled component:

```js
import Textarea from "@paprika/textarea";
...
const refTextarea = React.useRef();
...
<Textarea
  defaultValue="Hello world"
  ref={refTextarea}
/>
...
refTextarea.current.value // latest value
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-textarea--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Textarea/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/textarea%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Textarea/CHANGELOG.md)