diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a706eb8971..3554c26561 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1290,6 +1290,7 @@ export namespace Components {
           * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
          */
         "step"?: string;
+        "togglePassword": boolean;
         /**
           * The type of control to display. The default type is text.
          */
@@ -6021,6 +6022,7 @@ declare namespace LocalJSX {
           * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
          */
         "step"?: string;
+        "togglePassword"?: boolean;
         /**
           * The type of control to display. The default type is text.
          */
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 3607b10322..e798d86756 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -153,6 +153,8 @@ export class Input implements ComponentInterface {
     this.emitStyle();
   }
 
+  @Prop() togglePassword = false;
+
   /**
    * A hint to the browser for which enter key to display.
    * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
@@ -836,7 +838,9 @@ export class Input implements ComponentInterface {
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
               </button>
             )}
-            <slot name="end"></slot>
+            <slot name="end">
+              { this.togglePassword && <button>Hello World</button> }
+            </slot>
           </div>
           {shouldRenderHighlight && <div class="input-highlight"></div>}
         </label>