diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index 8aa15b4..836ef19 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -71,12 +71,22 @@ class Renderer{
     if(this.isDateTime(input)){
       return new DateTimeInputRenderer(input)
     }
+    if(this.isSecret(input)){
+      return new SecretInputRenderer(input)
+    }
     return new SimpleInputRenderer(input)
   }
   
   static isEnum(input){
     return (input.schema.type === "string") && ("enum" in input.schema) 
   }
+
+  static isSecret(input){
+    return (input.schema.type === "string") && 
+      ("format" in input.schema) && 
+      (input.schema.format != null) &&
+      (input.schema.format.toLowerCase() === "secret")
+  }
   
   static isCode(input){
     return (input.schema.type === "string") && 
@@ -121,6 +131,30 @@ class SimpleInputRenderer extends Renderer{
   }
 }
 
+class SecretInputRenderer extends Renderer{
+  
+  #html = null;
+  
+  constructor(input){
+    super(input)
+  }
+  
+  render(){
+    let required = this.required ? 'required="required"' : "" 
+    let readonly = this.readOnly ? 'readonly="readOnly"' : ""
+    this.#html = `
+      <div class="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>
+      </div>
+    `  
+    return this.#html
+  }
+}
+
 class DateTimeInputRenderer extends Renderer{
   
   #html = null;
diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index 9d92e52..3bd508b 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -81,6 +81,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                     <option value="time">Time</option>
                     <option value="dateTime">Date time</option>
                     <option value="code">Code</option>
+                    <option value="secret">Secret</option>
                   </select>
                 </div>
               </div>
@@ -97,7 +98,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                 <small class="form-text text-muted">Comma separated list of options</small>
               </div>
             </div>
-            <div class="mb-3">
+            <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"/>
               </div>
@@ -126,6 +127,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
       }
       else if(ename === "format"){
         this.#input.schema.format = val
+        if(this.#input.schema.format === "secret"){
+           this.querySelector("div[name=input-default] input[name=default]").type = "password"
+        }
       }
       else if(ename === "contentMediaType"){
         this.#input.schema.contentMediaType = val