Text, icon, buttons and other content can be grouped next to an input.
import { InputTextModule } from 'primeng/inputtext';
import { CheckboxModule } from 'primeng/checkbox';
import { RadioButtonModule } from 'primeng/radiobutton';
An InputGroup is created by wrapping the input and add-ons inside an element with a p-inputgroup class where add-ons also should be inside an element with .p-inputgroup-addon class
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<input pInputText placeholder="Username" />
</div>
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<input type="text" pInputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
<div class="p-inputgroup">
<span class="p-inputgroup-addon">www</span>
<input type="text" pInputText placeholder="Website" />
</div>
Multiple add-ons can be placed inside the same group.
<div class="p-inputgroup w-full md:w-30rem">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star-fill"></i>
</span>
<input type="text" pInputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
Buttons can be placed at either side of an input element.
<div class="p-inputgroup">
<button type="button" pButton label="Search"></button>
<input type="text" pInputText placeholder="Keyword" />
</div>
<div class="p-inputgroup">
<input type="text" pInputText placeholder="Keyword" />
<button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
</div>
<div class="p-inputgroup">
<button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
<input type="text" pInputText placeholder="Vote" />
<button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
</div>
Checkbox and RadioButton components can be combined with an input element under the same group.
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
<input type="text" pInputText placeholder="Username" />
</div>
<div class="p-inputgroup">
<input type="text" pInputText placeholder="Price" />
<span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
</div>
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
<input type="text" pInputText placeholder="Website" />
<span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
</div>
API defines helper props, events and others for the PrimeNG InputGroup module.