InputTextarea

InputTextarea adds styling and autoResize functionality to standard textarea element.

Import#


import { InputTextarea } from 'primereact/inputtextarea';

Basic#

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} />

Auto Resize#

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} />

Key Filter#

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} />

Float Label#

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

Description


<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#

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


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

Disabled#

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


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

Form#

Compatibility with popular React form libraries.

Formik#

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" />

Hook Form#

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" />

Style#

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

Name	Element
p-inputtextarea	Textarea element

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

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

Key	Function
tab	Moves focus to the input.