Text, icon, buttons and other content can be grouped next to an input.
import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
An InputGroup is created by wrapping the add-ons inside the p-inputGroup element.
<p-inputgroup>
<p-inputgroup-addon>
<i class="pi pi-user"></i>
</p-inputgroup-addon>
<input pInputText placeholder="Username" />
</p-inputgroup>
<p-inputgroup>
<p-inputgroup-addon>$</p-inputgroup-addon>
<input type="text" pInputText placeholder="Price" />
<p-inputgroup-addon>.00</p-inputgroup-addon>
</p-inputgroup>
<p-inputgroup>
<p-inputgroup-addon>www</p-inputgroup-addon>
<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-inputgroup-addon>
<i class="pi pi-clock"></i>
</p-inputgroup-addon>
<p-inputgroup-addon>
<i class="pi pi-star-fill"></i>
</p-inputgroup-addon>
<input type="text" pInputText placeholder="Price" />
<p-inputgroup-addon>$</p-inputgroup-addon>
<p-inputgroup-addon>.00</p-inputgroup-addon>
</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-search" class="p-button-warning"></button>
</p-inputgroup>
<p-inputgroup>
<button type="button" pButton icon="pi pi-check" class="p-button-success"></button>
<input type="text" pInputText placeholder="Vote" />
<button type="button" pButton icon="pi pi-times" class="p-button-danger"></button>
</p-inputgroup>
Checkbox and RadioButton components can be combined with an input element under the same group.
<p-inputgroup>
<input type="text" pInputText placeholder="Price" />
<p-inputgroup-addon>
<p-radiobutton [(ngModel)]="radioValue1" name="rb1" value="rb1"/>
</p-inputgroup-addon>
</p-inputgroup>
<p-inputgroup>
<p-inputgroup-addon><p-checkbox [(ngModel)]="checked1" [binary]="true"/></p-inputgroup-addon>
<input type="text" pInputText placeholder="Username" />
</p-inputgroup>
<p-inputgroup>
<p-inputgroup-addon><p-checkbox [(ngModel)]="checked2" [binary]="true"/></p-inputgroup-addon>
<input type="text" pInputText placeholder="Website" />
<p-inputgroup-addon><p-radiobutton name="rb2" value="rb2" [(ngModel)]="category"/></p-inputgroup-addon>
</p-inputgroup>
InputGroup and InputGroupAddon does not require any roles and attributes.
Component does not include any interactive elements.