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
Loading
Uncontrolled mode
Loading
Displaying form validation state
Loading
Inactive
Loading
Resize
By default, Textarea can be resized by the user vertically and horizontally. Resizing can be prevented by setting resize to none
Loading
Props
Textarea
| Name | Type | Default | Description |
|---|---|---|---|
className | string | Sets a custom class | |
cols | number | 30 | Specifies the visible width of a textarea. |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
required | boolean | Indicates 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. |
rows | number | 7 | Specifies 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.