TextArea

TextAreaField is a field element that wraps TextArea with label, helper, and validation text.
Use CharacterCount when enforcing character limits in order to provide instant user feedback.

TextAreaField will occupy the width of its parent by default
The native rows prop can be used to set the initial height of the input
TextArea is user-resizable by default using the drag handle in the lower-right corner

Disabled states should be used with caution.

It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. This example uses visuallyHidden to visually hide the label.

React props
Name	Type	Default	Description
after	`ReactNode`		Content shown after the `input` value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with `pointer-events: auto;`
before	`ReactNode`		Content shown before the `input` value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with `pointer-events: auto;`
children Required	`ReactNode`		Individual options related to the group.
counter	`ReactNode`		Indicator of a limit placed on a field, e.g. maximum character count or remaining hours. Frequently used with `CharacterCount`.
disabled	`boolean`		If `true`, the element will be disabled.
helperText	`ReactNode`		Additional descriptive information for the `input`.
invalid	`boolean`	false	If true, the `input` will be shown in an invalid state.
label Required	`ReactNode`		Label for the associated `input`.
name Required	`string`		Name of the `input`. Submitted with the form as part of a name/value pair.
optionalText	`string`		Text used to indicate that a field is not required.
validationText	`ReactNode`		Validation message associated with the `input`.

TextArea can be tested by following the same patterns as TextField.