diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index 42b9e70..0ef29c9 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -47,6 +47,44 @@ export default class CheckboxGroup {
     this._updateChildrenStat()
   }
 
+  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
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+    }
+  }
+
   mounted() {
     this._pickedFn = $.bind(this, 'child-picked', ev => {
       var tmp = [...this.props.value]
diff --git a/src/form/number.wc b/src/form/number.wc
index 2c130c3..11af83c 100644
--- a/src/form/number.wc
+++ b/src/form/number.wc
@@ -15,7 +15,7 @@
   user-select: none;
   -moz-user-select: none;
   color: var(--color-dark-1);
-  border-radius: 6px;
+  border-radius: 3px;
   cursor: text;
   transition: box-shadow 0.15s linear;
 }
@@ -27,7 +27,7 @@
   margin: 0 auto;
   line-height: 1;
   font-size: 14px;
-  border: 2px solid var(--color-grey-2);
+  border: 1px solid var(--color-grey-2);
   border-radius: inherit;
   background: var(--bg-color, #fff);
   color: inherit;
@@ -37,18 +37,18 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 32px;
+    width: 34px;
     height: 100%;
     font-size: 18px;
     cursor: pointer;
 
     &:first-child {
-      border-radius: 4px 0 0 4px;
-      border-right: 2px solid var(--color-grey-a);
+      border-radius: 3px 0 0 3px;
+      border-right: 1px solid var(--color-grey-a);
     }
     &:last-child {
-      border-radius: 0 4px 4px 0;
-      border-left: 2px solid var(--color-grey-a);
+      border-radius: 0 3px 3px 0;
+      border-left: 1px solid var(--color-grey-a);
     }
 
     &.disabled {
@@ -158,7 +158,7 @@
 }
 //
 :host(:focus-within) {
-  box-shadow: 0 0 0 2px var(--color-grey-a);
+  box-shadow: 0 0 0 2px var(--color-plain-a);
 }
 :host([type='primary']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-teal-a);
diff --git a/src/form/radio.wc b/src/form/radio.wc
index d96f82a..6631041 100644
--- a/src/form/radio.wc
+++ b/src/form/radio.wc
@@ -47,6 +47,44 @@ export default class RadioGroup {
     this._updateChildrenStat()
   }
 
+  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
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+    }
+  }
+
   mounted() {
     this._pickedFn = $.bind(this, 'child-picked', ev => {
       this.value = ev.detail