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