Source: https://primereact.org/inputtextarea/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

InputTextarea

InputTextarea adds styling and autoResize functionality to standard textarea element.

Import#

import { InputTextarea } from 'primereact/inputtextarea';

Copy

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

Copy

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

Copy

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

Copy

Float Label#

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Description

<FloatLabel>
    <InputTextarea id="username" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
    <label htmlFor="username">Username</label>
</FloatLabel>

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

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

Copy

Disabled#

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

Disabled

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

Copy

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

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the input. |

Import
Basic
Auto Resize
Key Filter
Float Label
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek