diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index 836ef19..8e8d52c 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -125,8 +125,9 @@ class SimpleInputRenderer extends Renderer{
           <span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
         </label>
         <input class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
+        <span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">&#128065;</span>
       </div>
-    `  
+    `     
     return this.#html
   }
 }
@@ -139,16 +140,28 @@ class SecretInputRenderer extends Renderer{
     super(input)
   }
   
+  connectedCallback(controller){
+    controller.addEventListener("click", ev=>{
+      const ename = ev.target.getAttribute("name")
+      if(ename === "password_toggle"){
+        const w = controller.querySelector("div.ccp-input-widget input")
+        w.type = (w.type === "password" ? "" : "password")
+        ev.preventDefault()
+      }
+    })
+  }
+  
   render(){
     let required = this.required ? 'required="required"' : "" 
     let readonly = this.readOnly ? 'readonly="readOnly"' : ""
     this.#html = `
-      <div class="ccp-input-widget form-field">
+      <div class="ccp-input-widget ccp-input-widget form-field">
         <label>
           ${this.title}
           <span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
         </label>
         <input type="password" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
+        <span style="user-select:none;position:relative;top:-1.6rem;left:90%;cursor:pointer" name="password_toggle">&#128065;</span>
       </div>
     `  
     return this.#html
diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index 3bd508b..738324e 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -9,7 +9,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
       <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
     </svg>
   `
-  
+    
   constructor(){
     super();
     
@@ -101,12 +101,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
             <div name="input-default" class="mb-3">
               <div class="form-field" title="Default value">
                 <input value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>
+                <span style="user-select:none;position:relative;top:-1.6rem;left:95%;cursor:pointer" name="password_toggle" class="d-none">&#128065;</span>
               </div>
             </div>
           </div>
         </details>
     `
     
+    this.addEventListener("click", ev=>{
+      const ename = ev.target.getAttribute("name")
+      if(ename === "password_toggle"){
+        const w = this.querySelector("div[name=input-default] input[name=default]")
+        w.type = (w.type === "password" ? "" : "password")
+        ev.preventDefault()
+      }
+    })
+    
     this.addEventListener("input", ev=>{
       const val = ev.target.value
       const ename = ev.target.getAttribute("name")
@@ -127,8 +137,17 @@ class CCPInputWidgetEditorController extends HTMLElement{
       }
       else if(ename === "format"){
         this.#input.schema.format = val
+        this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
+        this.querySelector("div[name=input-default] input[name=default]").type = ""
         if(this.#input.schema.format === "secret"){
            this.querySelector("div[name=input-default] input[name=default]").type = "password"
+           this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
+        }else if(this.#input.schema.format === "date"){
+          this.querySelector("div[name=input-default] input[name=default]").type = "date"
+        }else if(this.#input.schema.format === "time"){
+          this.querySelector("div[name=input-default] input[name=default]").type = "time"
+        }else if(this.#input.schema.format === "dateTime"){
+          this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
         }
       }
       else if(ename === "contentMediaType"){