Text, icon, buttons and other content can be grouped next to an input.
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
A group is created by wrapping the input and add-ons with the InputGroup component. Each add-on element is defined as a child of InputGroupAddon component.
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<InputText placeholder="Username" />
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputNumber placeholder="Price" />
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<InputText placeholder="Website" />
</InputGroup>
Multiple add-ons can be placed inside the same group.
<InputGroup class="w-full md:w-30rem">
<InputGroupAddon>
<i class="pi pi-clock"></i>
</InputGroupAddon>
<InputGroupAddon>
<i class="pi pi-star-fill"></i>
</InputGroupAddon>
<InputNumber placeholder="Price" />
<InputGroupAddon>$</InputGroupAddon>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
Buttons can be placed at either side of an input element.
<InputGroup>
<Button label="Search" />
<InputText placeholder="Keyword" />
</InputGroup>
<InputGroup>
<InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warning" />
</InputGroup>
<InputGroup>
<Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" />
</InputGroup>
Checkbox and RadioButton components can be combined with an input element under the same group.
<InputGroup>
<InputText placeholder="Price" />
<InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" />
</InputGroupAddon>
<InputText placeholder="Username" />
</InputGroup>
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" />
</InputGroupAddon>
<InputText placeholder="Website" />
<InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</InputGroupAddon>
</InputGroup>
InputGroup and InputGroupAddon does not require any roles and attributes.
Component does not include any interactive elements.