Angular InputText renders a text field to enter data.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {InputTextModule} from 'primeng/inputtext';
Getting Started
InputText is applied to an input field with pInputText directive.
<input type="text" pInputText />
Model Binding
A model can be bound using standard ngModel directive.
<input type="text" pInputText [(ngModel)]="property"/>
Float Label
A floating label is implemented by wrapping the input and the label inside a container with .p-float-label class.
<span class="p-float-label">
<input id="float-input" type="text" pInputText>
<label for="float-input">Username</label>
</span>
Icons
An icon can be integrated within an input field by wrapping the input and the icon with an element having either p-input-icon-right or p-input-icon-left class depending on the icon location.
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input type="text" pInputText [(ngModel)]="value1" placeholder="Search">
</span>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner"></i>
<input type="text" pInputText [(ngModel)]="value2" >
</span>
Sizes
2 more sizes are available in addition to a regular input, for a smaller input add p-inputtext-sm and for a larger one, use p-inputtext-lg. Note that these classes should be used to change the size of a particular field, for global scaling see theming page.
<input type="text" pInputText class="p-inputtext-sm" placeholder="Small">
<input type="text" pInputText class="p-inputtext-sm" placeholder="Small">
<input type="text" pInputText class="p-inputtext-lg" placeholder="Large">
Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier
<div class="p-inputtext-sm">
<input type="text" pInputText>
<p-inputnumber></p-inputnumber>
<p-inputmask></p-inputmask>
</div>
Outlined vs Filled
Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-input-filled to an ancestor of an input p-input-filled enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
<div class="p-input-filled">
<input type="text" pInputText>
</div>
Addons
Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside .p-inputgroup element. Multiple addons can be used within the same group as well.
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
<input type="text" pInputText placeholder="Username">
</div>
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><i class="pi pi-tags"></i></span>
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
<input type="text" pInputText placeholder="Price">
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
Theming
InputText supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG InputText showcase for demos and documentation.