diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
new file mode 100644
index 0000000000..8f4247155c
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
@@ -0,0 +1,20 @@
+<div class="input-group">
+  <div class="col-9 col-md-10 p-0">
+    <input
+      [type]="fieldTextType ? 'text' : 'password'"
+      class="form-control"
+      [id]="prop.id"
+      [formControlName]="prop.name"
+    />
+  </div>
+  <span class="input-group-text">
+    <i
+      class="fa"
+      [ngClass]="{
+        'fa-eye-slash': !fieldTextType,
+        'fa-eye': fieldTextType
+      }"
+      (click)="toggleFieldTextType()"
+    ></i>
+  </span>
+</div>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
new file mode 100644
index 0000000000..ca93a1d121
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { EXTENSIBLE_FORM_VIEW_PROVIDER } from '../../tokens/extensible-form-view-provider.token';
+import { FormProp } from '../../models/form-props';
+
+@Component({
+  selector: 'abp-password',
+  templateUrl: `password.component.html`,
+  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER],
+})
+export class PasswordComponent {
+  @Input() prop!: FormProp;
+
+  fieldTextType: boolean;
+
+  toggleFieldTextType() {
+    this.fieldTextType = !this.fieldTextType;
+  }
+}