diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index 7cb418429..8541460a4 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -3,23 +3,23 @@
         <p>An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class.</p>
     </DocSectionText>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <i class="pi pi-user"></i>
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Username" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">$</span>
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">www</span>
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
             <InputText placeholder="Website" />
-        </div>
+        </InputGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -30,67 +30,67 @@ export default {
         return {
             code: {
                 basic: `
-<div class="p-inputgroup flex-1">
-    <span class="p-inputgroup-addon">
+<InputGroup>
+    <InputGroupAddon>
         <i class="pi pi-user"></i>
-    </span>
+    </InputGroupAddon>
     <InputText placeholder="Username" />
-</div>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
-    <span class="p-inputgroup-addon">$</span>
+<InputGroup>
+    <InputGroupAddon>$</InputGroupAddon>
     <InputNumber placeholder="Price" />
-    <span class="p-inputgroup-addon">.00</span>
-</div>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
-    <span class="p-inputgroup-addon">www</span>
+<InputGroup>
+    <InputGroupAddon>www</InputGroupAddon>
     <InputText placeholder="Website" />
-</div>
+</InputGroup>
 `,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <i class="pi pi-user"></i>
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Username" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">$</span>
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">www</span>
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
             <InputText placeholder="Website" />
-        </div>
+        </InputGroup>
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <i class="pi pi-user"></i>
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Username" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">$</span>
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">www</span>
+        <InputGroup>
+            <InputGroupAddon>www</InputGroupAddon>
             <InputText placeholder="Website" />
-        </div>
+        </InputGroup>
     </div>
 </template>
 `
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index 019d333f9..ada67e018 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -3,21 +3,21 @@
         <p>Buttons can be placed at either side of an input element.</p>
     </DocSectionText>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Keyword" />
             <Button icon="pi pi-search" severity="warning" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
             <Button icon="pi pi-times" severity="danger" />
-        </div>
+        </InputGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -28,57 +28,57 @@ export default {
         return {
             code: {
                 basic: `
-<div class="p-inputgroup flex-1">
+<InputGroup>
     <Button label="Search" />
     <InputText placeholder="Keyword" />
-</div>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
+<InputGroup>
     <InputText placeholder="Keyword" />
     <Button icon="pi pi-search" severity="warning" />
-</div>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
+<InputGroup>
     <Button icon="pi pi-check" severity="success" />
     <InputText placeholder="Vote" />
     <Button icon="pi pi-times" severity="danger" />
-</div>
+</InputGroup>
 `,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Keyword" />
             <Button icon="pi pi-search" severity="warning" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
             <Button icon="pi pi-times" severity="danger" />
-        </div>
+        </InputGroup>
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button label="Search" />
             <InputText placeholder="Keyword" />
         </div>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Keyword" />
             <Button icon="pi pi-search" severity="warning" />
         </div>
 
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
             <Button icon="pi pi-times" severity="danger" />
diff --git a/doc/inputgroup/CheckboxDoc.vue b/doc/inputgroup/CheckboxDoc.vue
index 7f0b52dad..924776e7c 100644
--- a/doc/inputgroup/CheckboxDoc.vue
+++ b/doc/inputgroup/CheckboxDoc.vue
@@ -3,29 +3,29 @@
         <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
     </DocSectionText>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Price" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-            </span>
-        </div>
+            </InputGroupAddon>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked1" :binary="true" />
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Username" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked2" :binary="true" />
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Website" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-            </span>
-        </div>
+            </InputGroupAddon>
+        </InputGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -40,56 +40,56 @@ export default {
             radioValue2: '',
             code: {
                 basic: `
-<div class="p-inputgroup flex-1">
+<InputGroup>
     <InputText placeholder="Price" />
-    <span class="p-inputgroup-addon">
+    <InputGroupAddon>
         <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-    </span>
-</div>
+    </InputGroupAddon>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
-    <span class="p-inputgroup-addon">
+<InputGroup>
+    <InputGroupAddon>
         <Checkbox v-model="checked1" :binary="true" />
-    </span>
+    </InputGroupAddon>
     <InputText placeholder="Username" />
-</div>
+</InputGroup>
 
-<div class="p-inputgroup flex-1">
-    <span class="p-inputgroup-addon">
+<InputGroup>
+    <InputGroupAddon>
         <Checkbox v-model="checked2" :binary="true" />
-    </span>
+    </InputGroupAddon>
     <InputText placeholder="Website" />
-    <span class="p-inputgroup-addon">
+    <InputGroupAddon>
         <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-    </span>
-</div>
+    </InputGroupAddon>
+</InputGroup>
 `,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Price" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
-            </span>
-        </div>
+            </InputGroupAddon>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked1" :binary="true" />
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Username" />
-        </div>
+        </InputGroup>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked2" :binary="true" />
-            </span>
+            </InputGroupAddon>
             <InputText placeholder="Website" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
-            </span>
-        </div>
+            </InputGroupAddon>
+        </InputGroup>
     </div>
 </template>
 
@@ -109,26 +109,26 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
-        <div class="p-inputgroup flex-1">
+        <InputGroup>
             <InputText placeholder="Price" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
             </span>
         </div>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked1" :binary="true" />
             </span>
             <InputText placeholder="Username" />
         </div>
 
-        <div class="p-inputgroup flex-1">
-            <span class="p-inputgroup-addon">
+        <InputGroup>
+            <InputGroupAddon>
                 <Checkbox v-model="checked2" :binary="true" />
             </span>
             <InputText placeholder="Website" />
-            <span class="p-inputgroup-addon">
+            <InputGroupAddon>
                 <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
             </span>
         </div>
diff --git a/doc/inputgroup/MultipleDoc.vue b/doc/inputgroup/MultipleDoc.vue
index 5942e2d5e..dc06ec9de 100644
--- a/doc/inputgroup/MultipleDoc.vue
+++ b/doc/inputgroup/MultipleDoc.vue
@@ -3,17 +3,17 @@
         <p>Multiple add-ons can be placed inside the same group.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <div class="p-inputgroup w-full md:w-30rem">
-            <span class="p-inputgroup-addon">
+        <InputGroup class="w-full md:w-30rem">
+            <InputGroupAddon>
                 <i class="pi pi-clock"></i>
-            </span>
-            <span class="p-inputgroup-addon">
+            </InputGroupAddon>
+            <InputGroupAddon>
                 <i class="pi pi-star-fill"></i>
-            </span>
+            </InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">$</span>
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -24,49 +24,49 @@ export default {
         return {
             code: {
                 basic: `
-<div class="p-inputgroup w-full md:w-30rem">
-    <span class="p-inputgroup-addon">
+<InputGroup class="w-full md:w-30rem">
+    <InputGroupAddon>
         <i class="pi pi-clock"></i>
-    </span>
-    <span class="p-inputgroup-addon">
+    </InputGroupAddon>
+    <InputGroupAddon>
         <i class="pi pi-star-fill"></i>
-    </span>
+    </InputGroupAddon>
     <InputNumber placeholder="Price" />
-    <span class="p-inputgroup-addon">$</span>
-    <span class="p-inputgroup-addon">.00</span>
-</div>
+    <InputGroupAddon>$</InputGroupAddon>
+    <InputGroupAddon>.00</InputGroupAddon>
+</InputGroup>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-inputgroup w-full md:w-30rem">
-            <span class="p-inputgroup-addon">
+        <InputGroup class="w-full md:w-30rem">
+            <InputGroupAddon>
                 <i class="pi pi-clock"></i>
-            </span>
-            <span class="p-inputgroup-addon">
+            </InputGroupAddon>
+            <InputGroupAddon>
                 <i class="pi pi-star-fill"></i>
-            </span>
+            </InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">$</span>
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-inputgroup w-full md:w-30rem">
-            <span class="p-inputgroup-addon">
+        <InputGroup class="w-full md:w-30rem">
+            <InputGroupAddon>
                 <i class="pi pi-clock"></i>
-            </span>
-            <span class="p-inputgroup-addon">
+            </InputGroupAddon>
+            <InputGroupAddon>
                 <i class="pi pi-star-fill"></i>
-            </span>
+            </InputGroupAddon>
             <InputNumber placeholder="Price" />
-            <span class="p-inputgroup-addon">$</span>
-            <span class="p-inputgroup-addon">.00</span>
-        </div>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
     </div>
 </template>
 `