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.

jsx

<Textarea name="textarea-1" placeholder="Textarea placeholder..." />

Textarea with a label

jsx

<Pane>
  <Label htmlFor="textarea-2" marginBottom={4} display="block">
    Label
  </Label>
  <Textarea id="textarea-2" placeholder="Textarea placeholder..." />
</Pane>

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.

jsx

function ControlledTextareaExample() {
  const [value, setValue] = React.useState('')
  return <Textarea onChange={(e) => setValue(e.target.value)} value={value} />
}

TextareaField

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.

Label and description

jsx

<TextareaField
  isInvalid={true}
  label="Default textarea field"
  description="This is a description."
  hint="This is a hint. It's rendered under the textarea"
  required
  validationMessage="This field is required. It's only rendered when isInvalid is true."
  placeholder="Placeholder text"
/>

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.

jsx

function ControlledTextareaExample() {
  const [value, setValue] = React.useState('')
  return (
    <TextareaField
      label="A controlled text input field"
      required
      description="This is a description."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}