On this page

Textarea

Use Textarea for multi-line text input form fields
  • Experimental
  • Review pending by accessibility team
On this page
import {Textarea} from '@primer/react'

Examples

Textarea components must always be accompanied by a corresponding label to improve support for assistive technologies. Examples below are provided for conciseness and may not reflect accessibility best practices.

Use the FormControl component to render a Textarea with a corresponding label.

Controlled mode

Uncontrolled mode

Displaying form validation state

Inactive

Resize

By default, Textarea can be resized by the user vertically and horizontally. Resizing can be prevented by setting resize to none

Props

Textarea

NameTypeDefaultDescription
classNamestringSets a custom class
colsnumber30Specifies the visible width of a textarea.
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
requiredbooleanIndicates to the user and assistive technologies that the field value is required.
resize'both'
'horizontal'
'vertical'
'none'
'both'Sets whether an element is resizable, and if so, in which directions.
rowsnumber7Specifies the visible height of a text area.
size'medium'
'large'
Provides alternate visual presentation.
validationStatus'error'
'success'
Applies visual and semantic state to the underlying elements

Additional props can be passed to the <textarea> element. See MDN for a list of props accepted by the <textarea> element.