useTextarea

Usage#

import { useTextarea } from '@primereact/headless/textarea';
 
const { rootProps } = useTextarea({ autoResize: true });
 
return <textarea {...rootProps} rows={5} placeholder="Enter text" />;

useTextarea returns spread-ready rootProps with auto-resize logic and data attributes for styling — see Primitive for a component-based API.

Features#

• Returns spread-ready rootProps for the root textarea element
• Built-in auto-resize that adjusts height as content grows
• Uses native CSS field-sizing: content when supported, with JavaScript scrollHeight fallback

Behavior#

Auto Resize#

Set autoResize to enable automatic height adjustment. The hook detects CSS field-sizing support and uses it when available, falling back to JavaScript-based resize via scrollHeight.

const { rootProps } = useTextarea({ autoResize: true });
 
<textarea {...rootProps} rows={5} />;

Custom Styling with Data Attributes#

The prop object includes data-scope="textarea" and data-part="root" for styling.

[data-scope='textarea'][data-part='root'] {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}
 
[data-scope='textarea'][data-part='root']:focus {
    border-color: var(--p-primary-color);
    outline: none;
}
 
[data-scope='textarea'][data-part='root']:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

API#

useTextarea#

Accessibility#

See Textarea Primitive for WAI-ARIA compliance details and keyboard support.