InputTextarea

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(e.target.value)} rows={5} cols={30} />
         

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


<InputTextarea autoResize value={value} onChange={(e) => setValue(e.target.value)} 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(e.target.value)} rows={5} cols={30} />
    <label htmlFor="username">Username</label>
</span>
         

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} />
<InputTextarea
    inputId="description"
    name="description"
    rows={4}
    cols={30}
    className={classNames({ 'p-invalid': isFormFieldInvalid('description') })}
    value={formik.values.description}
    onChange={(e) => {
        formik.setFieldValue('description', e.target.value);
    }}
/>
{getFormErrorMessage('description')}
<Button label="Submit" type="submit" icon="pi pi-check" />
         

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

 

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

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-inputtextareaTextarea element
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
tabMoves focus to the input.
Visit the API documentation for detailed information about all the properties, events and methods of the component.