diff --git a/src/app/components/inputgroup/inputgroup.ts b/src/app/components/inputgroup/inputgroup.ts
new file mode 100755
index 00000000000..5e16fe8150c
--- /dev/null
+++ b/src/app/components/inputgroup/inputgroup.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+/**
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputGroup',
+    template: `
+        <div class="p-inputgroup" [attr.data-pc-name]="'inputgroup'">
+            <ng-content></ng-content>
+        </div>
+    `,
+    host: {
+        class: 'p-element p-inputgroup'
+    }
+})
+export class InputGroup {}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputGroup, SharedModule],
+    declarations: [InputGroup]
+})
+export class InputGroupModule {}
diff --git a/src/app/components/inputgroup/ng-package.json b/src/app/components/inputgroup/ng-package.json
new file mode 100644
index 00000000000..ab5467eb7e4
--- /dev/null
+++ b/src/app/components/inputgroup/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/components/inputgroup/public_api.ts b/src/app/components/inputgroup/public_api.ts
new file mode 100644
index 00000000000..d806323197d
--- /dev/null
+++ b/src/app/components/inputgroup/public_api.ts
@@ -0,0 +1 @@
+export * from './inputgroup';
diff --git a/src/app/components/inputgroupaddon/inputgroupaddon.ts b/src/app/components/inputgroupaddon/inputgroupaddon.ts
new file mode 100755
index 00000000000..082d3ae5344
--- /dev/null
+++ b/src/app/components/inputgroupaddon/inputgroupaddon.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+/**
+ * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputGroupAddon',
+    template: `
+        <div [attr.data-pc-name]="'inputgroupaddon'">
+            <ng-content></ng-content>
+        </div>
+    `,
+    host: {
+        class: 'p-element p-inputgroup-addon'
+    }
+})
+export class InputGroupAddon {}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputGroupAddon, SharedModule],
+    declarations: [InputGroupAddon]
+})
+export class InputGroupAddonModule {}
diff --git a/src/app/components/inputgroupaddon/ng-package.json b/src/app/components/inputgroupaddon/ng-package.json
new file mode 100644
index 00000000000..ab5467eb7e4
--- /dev/null
+++ b/src/app/components/inputgroupaddon/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/components/inputgroupaddon/public_api.ts b/src/app/components/inputgroupaddon/public_api.ts
new file mode 100644
index 00000000000..41e11c64546
--- /dev/null
+++ b/src/app/components/inputgroupaddon/public_api.ts
@@ -0,0 +1 @@
+export * from './inputgroupaddon';
diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts
index 1d2921ea88a..1eb5f409b07 100644
--- a/src/app/showcase/doc/inputgroup/basicdoc.ts
+++ b/src/app/showcase/doc/inputgroup/basicdoc.ts
@@ -5,75 +5,71 @@ import { Code } from '../../domain/code';
     selector: 'basic-doc',
     template: `
         <app-docsectiontext>
-            <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>
+            <p>An InputGroup is created by wrapping the add-ons inside the <i>p-inputGroup</i> element.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">
+            <p-inputGroup>
+                <p-inputGroupAddon>
                     <i class="pi pi-user"></i>
-                </span>
+                </p-inputGroupAddon>
                 <input pInputText placeholder="Username" />
-            </div>
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">$</span>
+            </p-inputGroup>
+            <p-inputGroup>
+                <p-inputGroupAddon>$</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Price" />
-                <span class="p-inputgroup-addon">.00</span>
-            </div>
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">www</span>
+                <p-inputGroupAddon>.00</p-inputGroupAddon>
+            </p-inputGroup>
+            <p-inputGroup>
+                <p-inputGroupAddon>www</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
-            </div>
+            </p-inputGroup>
         </div>
-        <app-code [code]="code" selector="inputgroup-basic-demo"></app-code>
+        <app-code [code]="code" selector="input-group-basic-demo"></app-code>
     `
 })
 export class BasicDoc {
     code: Code = {
-        basic: `<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">
+        basic: `<p-inputGroup>
+    <p-inputGroupAddon>
         <i class="pi pi-user"></i>
-    </span>
+    </p-inputGroupAddon>
     <input pInputText placeholder="Username" />
-</div>
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">$</span>
+</p-inputGroup>
+<p-inputGroup>
+    <p-inputGroupAddon>$</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Price" />
-    <span class="p-inputgroup-addon">.00</span>
-</div>
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">www</span>
+    <p-inputGroupAddon>.00</p-inputGroupAddon>
+</p-inputGroup>
+<p-inputGroup>
+    <p-inputGroupAddon>www</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
-</div>`,
+</p-inputGroup>`,
 
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
+        <p-inputGroupAddon>
             <i class="pi pi-user"></i>
-        </span>
+        </p-inputGroupAddon>
         <input pInputText placeholder="Username" />
-    </div>
-
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">$</span>
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>$</p-inputGroupAddon>
         <input type="text" pInputText placeholder="Price" />
-        <span class="p-inputgroup-addon">.00</span>
-    </div>
-
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">www</span>
+        <p-inputGroupAddon>.00</p-inputGroupAddon>
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>www</p-inputGroupAddon>
         <input type="text" pInputText placeholder="Website" />
-    </div>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-basic-demo',
-    templateUrl: './inputgroup-basic-demo.html'
+    selector: 'input-group-basic-demo',
+    templateUrl: './input-group-basic-demo.html'
 })
-export class InputgroupBasicDemo {
-}`
+export class InputGroupBasicDemo { }`
     };
 }
diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts
index bd8876191dd..cc7aa2ece23 100644
--- a/src/app/showcase/doc/inputgroup/buttondoc.ts
+++ b/src/app/showcase/doc/inputgroup/buttondoc.ts
@@ -8,70 +8,68 @@ import { Code } from '../../domain/code';
             <p>Buttons can be placed at either side of an input element.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <button type="button" pButton label="Search"></button>
                 <input type="text" pInputText placeholder="Keyword" />
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <input type="text" pInputText placeholder="Keyword" />
                 <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
                 <input type="text" pInputText placeholder="Vote" />
                 <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-            </div>
+            </p-inputGroup>
         </div>
         <app-code [code]="code" selector="inputgroup-button-demo"></app-code>
     `
 })
 export class ButtonDoc {
     code: Code = {
-        basic: `<div class="p-inputgroup">
+        basic: `<p-inputGroup>
     <button type="button" pButton label="Search"></button>
     <input type="text" pInputText placeholder="Keyword" />
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <input type="text" pInputText placeholder="Keyword" />
     <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
     <input type="text" pInputText placeholder="Vote" />
     <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-</div>`,
-
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
+</p-inputGroup>`,
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
         <button type="button" pButton label="Search"></button>
         <input type="text" pInputText placeholder="Keyword" />
-    </div>
-    
-    <div class="p-inputgroup">
+    </p-inputGroup>
+
+    <p-inputGroup>
         <input type="text" pInputText placeholder="Keyword" />
         <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-    </div>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
+    <p-inputGroup>
         <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
         <input type="text" pInputText placeholder="Vote" />
         <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-    </div>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-button-demo',
-    templateUrl: './inputgroup-button-demo.html'
+    selector: 'input-group-button-demo',
+    templateUrl: './input-group-button-demo.html'
 })
-export class InputgroupButtonDemo {
+export class InputGroupButtonDemo {
 }`
     };
 }
diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts
index 599be793b8c..01179558c45 100644
--- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts
+++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts
@@ -8,23 +8,23 @@ import { Code } from '../../domain/code';
             <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+            <p-inputGroup>
+                <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Username" />
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <input type="text" pInputText placeholder="Price" />
-                <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-            </div>
+                <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+            <p-inputGroup>
+                <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
-                <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-            </div>
+                <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+            </p-inputGroup>
         </div>
-        <app-code [code]="code" selector="inputgroup-checkbox-demo"></app-code>
+        <app-code [code]="code" selector="input-group-checkbox-demo"></app-code>
     `
 })
 export class CheckboxDoc {
@@ -35,49 +35,48 @@ export class CheckboxDoc {
     category: string | undefined;
 
     code: Code = {
-        basic: `<div class="p-inputgroup">
-    <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+        basic: `<p-inputGroup>
+    <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Username" />
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <input type="text" pInputText placeholder="Price" />
-    <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-</div>
+    <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+</p-inputGroup>
 
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+<p-inputGroup>
+    <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
-    <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-</div>`,
+    <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+</p-inputGroup>`,
 
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
+        <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Username" />
-    </div>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
+    <p-inputGroup>
         <input type="text" pInputText placeholder="Price" />
-        <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-    </div>
+        <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+    <p-inputGroup>
+        <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Website" />
-        <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-    </div>
+        <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-checkbox-demo',
-    templateUrl: './inputgroup-checkbox-demo.html'
+    selector: 'input-group-checkbox-demo',
+    templateUrl: './input-group-checkbox-demo.html'
 })
-export class InputgroupCheckboxDemo {
+export class InputGroupCheckboxDemo {
     checkbox1: boolean = false;
 
     checkbox2: boolean = false;
diff --git a/src/app/showcase/doc/inputgroup/importdoc.ts b/src/app/showcase/doc/inputgroup/importdoc.ts
index cbdf5a58ce6..947c92e0949 100644
--- a/src/app/showcase/doc/inputgroup/importdoc.ts
+++ b/src/app/showcase/doc/inputgroup/importdoc.ts
@@ -7,8 +7,7 @@ import { Code } from '../../domain/code';
 })
 export class ImportDoc {
     code: Code = {
-        typescript: `import { InputTextModule } from 'primeng/inputtext';
-import { CheckboxModule } from 'primeng/checkbox';
-import { RadioButtonModule } from 'primeng/radiobutton';`
+        typescript: `import { InputGroup } from 'primeng/inputgroup';
+import { InputGroupAddon } from 'primeng/inputgroupaddon';`
     };
 }
diff --git a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts
index 4880b514937..627fda6dcd6 100644
--- a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts
+++ b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts
@@ -13,9 +13,11 @@ import { ButtonDoc } from './buttondoc';
 import { CheckboxDoc } from './checkboxdoc';
 import { ImportDoc } from './importdoc';
 import { MultipleDoc } from './multipledoc';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 
 @NgModule({
-    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule],
+    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule,InputGroupModule,InputGroupAddonModule],
     exports: [AppDocModule],
     declarations: [ImportDoc, BasicDoc, MultipleDoc, ButtonDoc, CheckboxDoc]
 })
diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts
index 1e22d5487ab..11206cc0f9d 100644
--- a/src/app/showcase/doc/inputgroup/multipledoc.ts
+++ b/src/app/showcase/doc/inputgroup/multipledoc.ts
@@ -8,58 +8,63 @@ import { Code } from '../../domain/code';
             <p>Multiple add-ons can be placed inside the same group.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <div class="p-inputgroup w-full md:w-30rem">
-                <span class="p-inputgroup-addon">
+            <p-inputGroup class="w-full md:w-30rem">
+                <p-inputGroupAddon>
                     <i class="pi pi-clock"></i>
-                </span>
-                <span class="p-inputgroup-addon">
+                </p-inputGroupAddon>
+
+                <p-inputGroupAddon>
                     <i class="pi pi-star-fill"></i>
-                </span>
+                </p-inputGroupAddon>
+
                 <input type="text" pInputText placeholder="Price" />
-                <span class="p-inputgroup-addon">$</span>
-                <span class="p-inputgroup-addon">.00</span>
-            </div>
+                <p-inputGroupAddon>$</p-inputGroupAddon>
+                <p-inputGroupAddon>.00</p-inputGroupAddon>
+            </p-inputGroup>
         </div>
-        <app-code [code]="code" selector="inputgroup-multiple-demo"></app-code>
+        <app-code [code]="code" selector="input-group-multiple-demo"></app-code>
     `
 })
 export class MultipleDoc {
     code: Code = {
-        basic: `<div class="p-inputgroup w-full md:w-30rem">
-    <span class="p-inputgroup-addon">
+        basic: `<p-inputGroup class="w-full md:w-30rem">
+    <p-inputGroupAddon>
         <i class="pi pi-clock"></i>
-    </span>
-    <span class="p-inputgroup-addon">
+    </p-inputGroupAddon>
+
+    <p-inputGroupAddon>
         <i class="pi pi-star-fill"></i>
-    </span>
+    </p-inputGroupAddon>
+
     <input type="text" pInputText placeholder="Price" />
-    <span class="p-inputgroup-addon">$</span>
-    <span class="p-inputgroup-addon">.00</span>
-</div>`,
+    <p-inputGroupAddon>$</p-inputGroupAddon>
+    <p-inputGroupAddon>.00</p-inputGroupAddon>
+</p-inputGroup>`,
 
-        html: `
-<div class="card flex justify-content-center">
-    <div class="p-inputgroup w-full md:w-30rem">
-        <span class="p-inputgroup-addon">
+        html: `<div class="card flex justify-content-center">
+    <p-inputGroup class="w-full md:w-30rem">
+        <p-inputGroupAddon>
             <i class="pi pi-clock"></i>
-        </span>
-        <span class="p-inputgroup-addon">
+        </p-inputGroupAddon>
+
+        <p-inputGroupAddon>
             <i class="pi pi-star-fill"></i>
-        </span>
+        </p-inputGroupAddon>
+
         <input type="text" pInputText placeholder="Price" />
-        <span class="p-inputgroup-addon">$</span>
-        <span class="p-inputgroup-addon">.00</span>
-    </div>
+        <p-inputGroupAddon>$</p-inputGroupAddon>
+        <p-inputGroupAddon>.00</p-inputGroupAddon>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-multiple-demo',
-    templateUrl: './inputgroup-multiple-demo.html'
+    selector: 'input-group-multiple-demo',
+    templateUrl: './input-group-multiple-demo.html'
 })
-export class InputgroupMultipleDemo {
+export class InputGroupMultipleDemo {
 }`
     };
 }