Textarea

Textarea is used to set a value that is multiple lines of text.

Page navigation navigation

React

ready

Storybook|Source

Rails

ready

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
</FormControl>

Resize behavior

Resizing guidelines

This example prevents the Textarea from being resized in any direction, but you can also limit resizing to horizontal or vertical.

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea resize="none" />
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea resize="none" />
</FormControl>

Customized width

Defaults to 30-character width; can be set to be any number of characters or fill the parent width. For 100% width, use the block prop instead.

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea cols={60} />
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea cols={60} />
</FormControl>

Customized height

Defaults to 7 lines; can be adjusted to any number of lines based on expected content length. Users can scroll if content exceeds the set height.

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea rows={3} />
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea rows={3} />
</FormControl>

Required

Label*

<FormControl required>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
</FormControl>

<FormControl required>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
</FormControl>

With a caption

LabelThis is a caption

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
  <FormControl.Caption>This is a caption</FormControl.Caption>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
  <FormControl.Caption>This is a caption</FormControl.Caption>
</FormControl>

With a validation message

Label

Something went wrong

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Textarea />
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

Props

Textarea

Name	Default	Description
required		`boolean` Indicates to the user and assistive technologies that the field value is required
cols		`number` Specifies the visible width of a text area.
rows		`number` Specifies the visible height of a text area.
block	`false`	`boolean` Expands with width of the component to fill the parent elements
resize	`'both'`	`'both' \| 'horizontal' \| 'vertical' \| 'none'` Changes the resize behavior
contrast	`false`	`boolean` Changes background color to a higher contrast color
validationStatus		`'success' \| 'error' \| undefined` Style the textarea to match the current form validation status
ref		`React.RefObject<HTMLTextAreaElement>`
as	`"input"`	`React.ElementType`
sx Deprecated		`SystemStyleObject`
className		`string \| undefined` The className to apply to the wrapper element
minHeight		`number` The minimum height of the textarea
maxHeight		`number` The maximum height of the textarea