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 optional auto-resize logic and data attributes for styling. See Primitive for a component-based API.

Features#

• Spread-ready root props — single rootProps object for the textarea element
• Auto-resize — height follows content when autoResize is enabled
• Native-first sizing — uses CSS field-sizing: content when the browser supports it, falling back to scrollHeight measurement
• Stateless value — leaves value management to React or the native element

Working with callbacks#

Controlled value#

Drive the textarea from outside state by placing value/onChange directly on the element.

const [text, setText] = React.useState('');
const { rootProps } = useTextarea({ autoResize: true });
 
return <textarea {...rootProps} value={text} onChange={(e) => setText(e.target.value)} />;

Auto-resize with min/max rows#

Combine autoResize with a minimum rows and CSS max-height to cap growth on long input.

const { rootProps } = useTextarea({ autoResize: true });
 
return <textarea {...rootProps} rows={3} style={{ maxHeight: '12rem' }} />;

Disable auto-resize#

Leave autoResize unset (or false) when the surrounding layout owns the height — the hook falls back to a plain textarea.

const { rootProps } = useTextarea();
 
return <textarea {...rootProps} rows={8} />;

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#

Standard multiline text input behavior with Enter inserting newlines. See Primitive for full WAI-ARIA compliance details.