InputTextarea adds styling and autoResize functionality to standard textarea element.

import { InputTextarea } from 'primereact/inputtextarea';

Textarea is used as a controlled input with value and onChange properties.

<InputTextarea value={value} onChange={(e) => setValue(} rows={5} cols={30} />

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

<InputTextarea autoResize value={value} onChange={(e) => setValue(} rows={5} cols={30} />

InputTextarea has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

<InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30} />

A floating label appears on top of the input field when focused.

<span className="p-float-label">
    <InputTextarea id="username" value={value} onChange={(e) => setValue(} rows={5} cols={30} />
    <label htmlFor="username">Username</label>

Invalid state style is added using the p-invalid class to indicate a failed validation.

<InputTextarea rows={5} cols={30} className="p-invalid" />

When disabled is present, the element cannot be edited and focused.

<InputTextarea disabled rows={5} cols={30} />

Compatibility with popular React form libraries.

Formik is a popular library for handling forms in React.


Toast ref={toast} />
    className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
    onChange={(e) => {
<Button label="Submit" type="submit" icon="pi pi-check" />

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
    rules={{ required: 'Description is required.' }}
    render={({ field, fieldState }) => (
            <label htmlFor={}>Description</label>
            <InputTextarea id={} {...field} rows={4} cols={30} className={classNames({ 'p-invalid': fieldState.error })} />
<Button label="Submit" type="submit" icon="pi pi-check" />

Screen Reader

InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

<label htmlFor="address1">Address 1</label>
<InputTextarea id="address1" />

<span id="address2">Address 2</span>
<InputTextarea aria-labelledby="address2" />

<InputTextarea aria-label="Address Details"/>

Keyboard Support

tabMoves focus to the input.