InputGroup

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

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.

$.00
www


<div class="p-inputgroup flex-1">
    <span class="p-inputgroup-addon">
        <i class="pi pi-user"></i>
    </span>
    <InputText placeholder="Username" />
</div>

<div class="p-inputgroup flex-1">
    <span class="p-inputgroup-addon">$</span>
    <InputNumber placeholder="Price" />
    <span class="p-inputgroup-addon">.00</span>
</div>

<div class="p-inputgroup flex-1">
    <span class="p-inputgroup-addon">www</span>
    <InputText placeholder="Website" />
</div>

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

$.00


<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>
    <InputNumber 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 flex-1">
    <Button label="Search" />
    <InputText placeholder="Keyword" />
</div>

<div class="p-inputgroup flex-1">
    <InputText placeholder="Keyword" />
    <Button icon="pi pi-search" severity="warning" />
</div>

<div class="p-inputgroup flex-1">
    <Button icon="pi pi-check" severity="success" />
    <InputText placeholder="Vote" />
    <Button icon="pi pi-times" severity="danger" />
</div>

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



<div class="p-inputgroup flex-1">
    <InputText placeholder="Price" />
    <span class="p-inputgroup-addon">
        <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
    </span>
</div>

<div class="p-inputgroup flex-1">
    <span class="p-inputgroup-addon">
        <Checkbox v-model="checked1" :binary="true" />
    </span>
    <InputText placeholder="Username" />
</div>

<div class="p-inputgroup flex-1">
    <span class="p-inputgroup-addon">
        <Checkbox v-model="checked2" :binary="true" />
    </span>
    <InputText placeholder="Website" />
    <span class="p-inputgroup-addon">
        <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
    </span>
</div>