InputtextInputText is an extension to standard input element with theming.

Documentation

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"/>
 

Addons

Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside .ui-inputgroup element. Multiple addons can be used within the same group as well.

<div class="ui-inputgroup">
    <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
    <input type="text" pInputText placeholder="Username">         
</div>
<div class="ui-inputgroup">
    <span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span>  
    <span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span>   
    <input type="text" pInputText placeholder="Price"> 
    <span class="ui-inputgroup-addon">$</span>  
    <span class="ui-inputgroup-addon">.00</span>      
</div>
 

Float Label

A floating label is implemented by wrapping the input and the label inside a container with .ui-float-label class.

<span class="ui-float-label">
    <input id="float-input" type="text" size="30" pInputText> 
    <label for="float-input">Username</label>
</span>
 

Properties

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<h3 class="first">Basic</h3>
<input id="input" type="text" size="30" pInputText [(ngModel)]="text"> 
<span id="text">{{text}}</span>
<h3>Float Label</h3>
<span class="ui-float-label">
    <input id="float-input" type="text" size="30" pInputText> 
    <label for="float-input">Username</label>
</span>
<h3>Disabled</h3>
<input id="disabled-input" type="text" size="30" pInputText [disabled]="disabled" />
<button id="disabled-btn" type="button" (click)="toggleDisabled()" pButton label="Toggle"></button>
 

export class InputTextDemo {
    text: string;
    disabled: boolean = true;
    toggleDisabled() {
        this.disabled = !this.disabled;
    }
}