Textarea

View on GitHub

Introduction

The Textarea components maps directly to a textarea element.

<Textarea
  name="textarea-1"
  placeholder="Textarea placeholder..."
/>
code 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>
code 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>
code 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 to be invalid.
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.
widthunion = '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.