Similar to text inputs, Evergreen exports two components to create text areas:

• Textarea: base text area component. Directly maps to a textarea element.
• TextareaField: combines a label, textarea and validation message in one. Used for traditional forms.

Label

The Textarea component works the same as using textarea directly. Use e.target.value to get the value of the component on change.

The TextareaField component combines a Textarea with a label and optional description, validationMessage and hint. The example below shows how each of these fields is rendered on the text field. Try opening the code example and changing some of the fields.

Default textarea field *
This is a description.
This field is required. It's only rendered when isInvalid is true.
This is a hint. It's rendered under the textarea

The TextareaField component works the same as using textarea directly. Use e.target.value to get the value of the component on change.

A controlled text input field *
This is a description.