useInputText

Usage#

import { useInputText } from '@primereact/headless/inputtext';
 
const { rootProps } = useInputText();
 
return <input {...rootProps} placeholder="Enter text" />;

useInputText returns spread-ready rootProps with type="text" and data attributes for styling — see Primitive for a component-based API.

Features#

• Returns spread-ready rootProps for the root input element with type="text" default
• Stateless hook — no internal state management, all behavior delegated to native <input>
• Compatible with any HTML element or custom component via prop spreading

Behavior#

Custom Styling with Data Attributes#

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

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

API#

useInputText#

Accessibility#

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