Textarea

A Textarea allows users to enter any combination of letters, numbers, or symbols in a multi-line input box.

Figma

React

Bootstrap

Native

Design guidance

When and how to use this

Use a Textarea when the user needs to be able to enter longer, multi-line freeform input in the form of letters, numbers, or symbols. Textareas are ideal for cases where users might be pasting in longer snippets of text from their clipboard.

When to consider something else

For cases where a user needs to enter or paste shorter input, consider using a TextInput instead.

Figma

Drag in a Textarea Field from the Compositions section in the Form Controls v2 library in your Assets pane. We provide default and error states as well as a required attribute for the field. A Textarea component is nested within, where you can set its state (Idle, Focus, Disabled, and so on). You can also drag in a Textarea on its own from the Components section, but we recommend using the Field composition in most cases.

React

Textarea composes Chakra's Textarea. We offer size variants that align with those in TextInput. We recommend wrapping your Textarea in a Field to get a <label> element, error display below the field (if an error is present) which will also trigger isInvalid on the Textarea.

live

<Stack direction="column" spacing="400">
  <Textarea placeholder="I'm idle" rows="2" />
  <Textarea placeholder="I'm invalid" rows="2" isInvalid />
  <Textarea placeholder="I'm disabled" rows="2" isDisabled />
  <Field label="I'm a label">
    <Textarea placeholder="I'm wrapped in a Field" rows="2" />
  </Field>
  <Field label="I'm a label" error="I'm an error message">
    <Textarea value="I'm wrapped in a Field that has an error" rows="2" />
  </Field>
</Stack>

Prop	Description
`size`	Sets the size of the Textarea. Use `small` or `tiny` only for especially compact interfaces.
`placeholder`	Sets placeholder text for the Textarea.
`resize`	By default a Textarea can be resized horizontally and vertically. Use this optional prop to constrain resizing to `horizontal` or `vertical`, or set this to `none` to fix the size.
`value`	Sets a default value for the Textarea.
`isDisabled`	If `true` the Textarea will be disabled.
`isInvalid`	If `true` the Textarea will be invalid and its `aria-invalid` will be set to `true`

Bootstrap

Bootstrap provides styles for Textarea and label elements, using the .form-control and .form-label classes. We match React size variants via .form-control-sm and .form-control-tiny. Using Bootstrap's .form-control-lg maps to our default.