InputText

InputText is an extension to standard input element with theming and keyfiltering.

Basic

Floating Label

Username

Left Icon

Right Icon

Help Text

UsernameEnter your username to reset your password.

Invalid

UsernameUsername is not available.

Disabled

Sizes

Import via Module


import { InputText } from 'primereact/inputtext';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>

Getting Started

InputText is used as a controlled input with value and onChange properties.


<InputText value={value} onChange={(e) => setValue(e.target.value)} />

Float Label

A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.


<span className="p-float-label">
    <InputText id="in" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="in">Username</label>
</span>

KeyFilter

InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

Properties

InputText passes any valid attribute to the underlying React HTMLInputElement element. Extended properties are as follows;

Name	Type	Default	Description
keyfilter	string/regex	null	Format definition of the keys to block.
validateOnly	boolean	false	When enabled, instead of blocking keys, input is validated internally to test against the regular expression.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.