diff --git a/src/form/radio-item.wc b/src/form/radio-item.wc
index 49f691c..8e6328c 100644
--- a/src/form/radio-item.wc
+++ b/src/form/radio-item.wc
@@ -229,7 +229,7 @@ export default class Radio {
 
     this.checked = true
 
-    this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
+    $.fire(this.parentNode, 'child-picked', { value: this.value })
   }
 
   mounted() {
diff --git a/src/form/radio.wc b/src/form/radio.wc
index 59b5697..87d3ab2 100644
--- a/src/form/radio.wc
+++ b/src/form/radio.wc
@@ -100,7 +100,8 @@ export default class RadioGroup {
   mounted() {
     this._pickedFn = $.bind(this, 'child-picked', ev => {
       this.value = ev.detail
-      this.dispatchEvent(new CustomEvent('input'))
+      $.fire(this, 'input')
+      $.fire(this, 'change')
     })
 
     this.__observer = new MutationObserver(_ => {
diff --git a/src/form/star.wc b/src/form/star.wc
index 68063cb..2a59114 100644
--- a/src/form/star.wc
+++ b/src/form/star.wc
@@ -193,7 +193,8 @@ export default class Star {
       }
       if (ev.target.tagName === 'WC-ICON') {
         this.props.value = tmp.i + tmp.f
-        this.dispatchEvent(new CustomEvent('input'))
+        $.fire(this, 'input', { value: this.value })
+        $.fire(this, 'change', { value: this.value })
       }
     })
 
diff --git a/src/form/switch.wc b/src/form/switch.wc
index 1a36a49..07858a2 100644
--- a/src/form/switch.wc
+++ b/src/form/switch.wc
@@ -3,7 +3,7 @@
     <label>
       <span class="dot"></span>
     </label>
-    <slot></slot>
+    <slot />
   </section>
 </template>
 
@@ -11,13 +11,15 @@
 :host {
   display: inline-flex;
   align-items: center;
+  height: 32px;
+  color: var(--color-dark-1);
 
   section {
     display: flex;
     justify-content: center;
     align-items: center;
-    line-height: 1;
     white-space: nowrap;
+    user-select: none;
   }
   label {
     display: flex;
@@ -28,6 +30,7 @@
     margin: 5px;
     border-radius: 21px;
     background: var(--color-plain-3);
+    transition: background 0.2s linear;
     cursor: inherit;
 
     &.checked {
@@ -182,7 +185,8 @@ export default class Switch {
       this.checked = !this.checked
 
       this._updateStat()
-      this.dispatchEvent(new CustomEvent('input'))
+      $.fire(this, 'input')
+      $.fire(this, 'change')
     })
   }
 
diff --git a/src/form/textarea.wc b/src/form/textarea.wc
index 5b769f7..e0c083b 100644
--- a/src/form/textarea.wc
+++ b/src/form/textarea.wc
@@ -234,7 +234,7 @@ export default class Textarea {
         }
 
         this.stamp = now
-        this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
+        $.fire(this, 'submit', { value: this.value })
       }
     })
 
@@ -244,6 +244,7 @@ export default class Textarea {
       maxlength = maxlength || '∞'
 
       this.__STAT__.textContent = `${len}/${maxlength}`
+      $.fire(this, ev.type, { value: this.value })
     })
   }