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.
<Textarea
  name="textarea-1"
  placeholder="Textarea placeholder..."
/>
Hide code

Textarea with a label

<Pane>
  <Label
    htmlFor="textarea-2"
    marginBottom={4}
    display="block"
  >
    Label
  </Label>
  <Textarea
    id="textarea-2"
    placeholder="Textarea placeholder..."
  />
</Pane>
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.
<Component initialState={{ value: 'Hello'}}>
  {({ state, setState }) => (
    <Textarea
      onChange={e => setState({ value: e.target.value })}
      value={state.value}
    />
  )}
</Component>
Hide code

Textarea Props

This component composes ../typography

requiredbool
Makes the textarea element required.
disabledbool = false
Makes the textarea element disabled.
isInvalidbool = false
Sets visual styling of _only_ the text area to be "invalid". Note that this does not effect any `validationMessage`.
spellCheckbool = true
Use the native spell check functionality of the browser.
grammarlybool = false
Allow the Grammarly browser extension to attach to the backing textarea.
placeholderstring
The placeholder text when there is no value present.
appearancestring = 'default'
The appearance of the TextInput.
widthstring | number = '100%'
The width of the TextInput.
themeobjectrequired
Theme provided by ThemeProvider.
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.

<TextareaField
  label="Default textarea field"
  description="This is a description."
  placeholder="Placeholder text"
/>
Hide code

A hint is under the textarea

This is a hint.

<TextareaField
  label="Default textarea field"
  hint="This is a hint."
  placeholder="Placeholder text"
/>
Hide code

Required textarea field

This is a description.

<TextareaField
  id="ids-are-optional"
  label="A required textarea field"
  required
  description="This is a description."
  placeholder="Placeholder text"
/>
Hide code

Invalid field

This is a description.

<TextareaField
  isInvalid
  required
  label="A required textarea field"
  description="This is a description."
  validationMessage="This field is required"
/>
Hide code

Validation message without invalid input

This is a description.

<TextareaField
  isInvalid={false}
  required
  label="A required textarea field"
  description="This is a description."
  validationMessage="This field is required"
/>
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.
<Component initialState={{ value: '' }}>
  {({ state, setState }) => (
    <TextareaField
      label="A controlled text input field"
      required
      description="This is a description."
      value={state.value}
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</Component>
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 = 80
The height of the input element.
inputWidthnumber | string = '100%'
The width of the input width.