InputGroup

Text, icon, buttons and other content can be grouped next to an input.

Import #


import { InputGroupModule } from 'primeng/inputgroup';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';

Basic #

An InputGroup is created by wrapping the add-ons inside the p-inputGroup element.

.00

www


<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 #

Multiple add-ons can be placed inside the same group.

.00


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

Button #

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>

Check & Radio #

Checkbox and RadioButton components can be combined with an input element under the same group.


<p-inputGroup>
    <input type="text" pInputText placeholder="Price" />
    <p-inputGroupAddon>
        <p-radioButton [(ngModel)]="radioValue1" name="rb1" value="rb1"/>
    </p-inputGroupAddon>
</p-inputGroup>

<p-inputGroup>
    <p-inputGroupAddon><p-checkbox [(ngModel)]="checked1" [binary]="true"/></p-inputGroupAddon>
    <input type="text" pInputText placeholder="Username" />
</p-inputGroup>

<p-inputGroup>
    <p-inputGroupAddon><p-checkbox [(ngModel)]="checked2" [binary]="true"/></p-inputGroupAddon>
    <input type="text" pInputText placeholder="Website" />
    <p-inputGroupAddon><p-radioButton name="rb2" value="rb2" [(ngModel)]="category"/></p-inputGroupAddon>
</p-inputGroup>

InputGroup

Import #

Basic #

Multiple #

Button #

Check & Radio #

Accessibility #

Screen Reader

Keyboard Support

InputGroup API