Introduction

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.
Hide code

Textarea with a label

Hide code

Controlled usage

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

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Textarea Props

This component composes ../typography

requiredbool
Makes the textarea element required.
disabledbool
Makes the textarea element disabled.
isInvalidbool
Sets visual styling of _only_ the text area to be "invalid". Note that this does not effect any `validationMessage`.
spellCheckbool
Use the native spell check functionality of the browser.
grammarlybool
Allow the Grammarly browser extension to attach to the backing textarea.
placeholderstring
The placeholder text when there is no value present.
appearancestring
The appearance of the TextInput.
widthstring | number
The width of the TextInput.
classNamestring
Class name passed to the button. Only use if you know what you are doing.

TextareaField

The TextareaField component combines a Textarea with a label and optional description, validationMessage and hint.

Label and description

This is a description.

Hide code

A hint is under the textarea

This is a hint.

Hide code

Required textarea field

This is a description.

Hide code

Invalid field

This is a description.

Hide code

Validation message without invalid input

This is a description.

Hide code

Controlled usage

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

This is a description.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

TextareaField Props

This component composes Textarea../form-field

labelnoderequired
The label used above the input element.
requiredbool
Whether or not to show an asterix after the label.
descriptionnode
An optional description of the field under the label, above the input element.
hintnode
An optional hint under the input element.
validationMessagenode
If a validation message is passed it is shown under the input element and above the hint. This is unaffected by `isInvalid`.
inputHeightnumber
The height of the input element.
inputWidthnumber | string
The width of the input width.