diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index 03979de..7b5a7b1 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -31,6 +31,10 @@
   }
 }
 
+:host([readonly]) {
+  opacity: 0.8;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
   opacity: 0.6;
@@ -136,12 +140,15 @@
 
 <script>
 import '../icon/index'
+import { bind, unbind } from '../utils'
+
 export default class Checkbox {
   props = {
     label: '',
     color: '',
     value: [],
     checked: false,
+    readonly: false,
     disabled: false
   }
   __init__() {
@@ -188,6 +195,25 @@ export default class Checkbox {
     }
   }
 
+  get readonly() {
+    return this.props.readonly
+  }
+
+  set readonly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.removeAttribute('readonly')
+    }
+  }
+
   get disabled() {
     return this.props.disabled
   }
@@ -208,16 +234,18 @@ export default class Checkbox {
   }
 
   mounted() {
-    this.addEventListener(
-      'click',
-      ev => {
-        if (!this.disabled) {
-          this.checked = !this.checked
-          this.dispatchEvent(new CustomEvent('input'))
-        }
-      },
-      false
-    )
+    this._handlClick = bind(this, 'click', ev => {
+      ev.preventDefault()
+
+      if (!this.disabled && !this.readonly) {
+        this.checked = !this.checked
+        this.dispatchEvent(new CustomEvent('input'))
+      }
+    })
+  }
+
+  unmount() {
+    unbind(this, 'click', this._handlClick)
   }
 
   watch() {
@@ -228,6 +256,7 @@ export default class Checkbox {
         break
 
       case 'checked':
+      case 'readonly':
       case 'disabled':
         this[name] = true
         break
diff --git a/src/form/radio.wc b/src/form/radio.wc
index dd1836a..79f193d 100644
--- a/src/form/radio.wc
+++ b/src/form/radio.wc
@@ -44,6 +44,10 @@
   }
 }
 
+:host([readonly]) {
+  opacity: 0.8;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
   opacity: 0.6;
@@ -159,6 +163,7 @@ export default class Radio {
   props = {
     label: '',
     checked: false,
+    readonly: false,
     disabled: false
   }
   __init__() {
@@ -184,6 +189,25 @@ export default class Radio {
     this.__SWITCH__.classList.toggle('checked', this.props.checked)
   }
 
+  get readonly() {
+    return this.props.readonly
+  }
+
+  set readonly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.removeAttribute('readonly')
+    }
+  }
+
   get disabled() {
     return this.props.disabled
   }
@@ -205,7 +229,7 @@ export default class Radio {
 
   mounted() {
     this._handleClick = bind(this, 'click', ev => {
-      if (!this.disabled && !this.checked) {
+      if (!this.disabled && !this.readonly && !this.checked) {
         this.checked = true
         this.dispatchEvent(new CustomEvent('input'))
       }
@@ -223,6 +247,7 @@ export default class Radio {
         break
 
       case 'checked':
+      case 'readonly':
       case 'disabled':
         this[name] = true
         break