React InputText is an extension to standard input element with theming and keyfiltering.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { InputText } from 'primereact/inputtext';
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.
Theming
InputText supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact InputText showcase for demos and documentation.