diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index 4672cae465..15fecb5e13 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -1,5 +1,6 @@
 import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
 import { Component, CssClassMap, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { debounce } from '../../utils/helpers';
 
 
 @Component({
@@ -16,7 +17,6 @@ export class Checkbox implements CheckboxInput {
   private didLoad: boolean;
   private inputId: string;
   private nativeInput: HTMLInputElement;
-  private styleTmr: any;
 
   @State() keyFocus: boolean;
 
@@ -35,7 +35,7 @@ export class Checkbox implements CheckboxInput {
   /**
    * The name of the control, which is submitted with the form data.
    */
-  @Prop() name: string;
+  @Prop({ mutable: true }) name: string;
 
   /**
    * If true, the checkbox is selected. Defaults to `false`.
@@ -50,7 +50,7 @@ export class Checkbox implements CheckboxInput {
   /**
    * the value of the checkbox.
    */
-  @Prop({ mutable: true }) value: string;
+  @Prop() value = 'on';
 
   /**
    * Emitted when the checked property has changed.
@@ -73,15 +73,15 @@ export class Checkbox implements CheckboxInput {
   @Event() ionStyle: EventEmitter<StyleEvent>;
 
   componentWillLoad() {
-    this.inputId = 'ion-cb-' + (checkboxIds++);
-    if (this.value === undefined) {
-      this.value = this.inputId;
+    this.inputId = `ion-cb-${checkboxIds++}`;
+    if (this.name === undefined) {
+      this.name = this.inputId;
     }
     this.emitStyle();
   }
 
   componentDidLoad() {
-    this.nativeInput.checked = this.checked;
+    this.ionStyle.emit = debounce(this.ionStyle.emit.bind(this.ionStyle));
     this.didLoad = true;
 
     const parentItem = this.nativeInput.closest('ion-item');
@@ -96,10 +96,6 @@ export class Checkbox implements CheckboxInput {
 
   @Watch('checked')
   checkedChanged(isChecked: boolean) {
-    if (this.nativeInput.checked !== isChecked) {
-      // keep the checked value and native input `nync
-      this.nativeInput.checked = isChecked;
-    }
     if (this.didLoad) {
       this.ionChange.emit({
         checked: isChecked,
@@ -110,19 +106,10 @@ export class Checkbox implements CheckboxInput {
   }
 
   @Watch('disabled')
-  disabledChanged(isDisabled: boolean) {
-    this.nativeInput.disabled = isDisabled;
-    this.emitStyle();
-  }
-
   emitStyle() {
-    clearTimeout(this.styleTmr);
-
-    this.styleTmr = setTimeout(() => {
-      this.ionStyle.emit({
-        'checkbox-disabled': this.disabled,
-        'checkbox-checked': this.checked,
-      });
+    this.ionStyle.emit({
+      'checkbox-disabled': this.disabled,
+      'checkbox-checked': this.checked,
     });
   }
 
@@ -169,6 +156,7 @@ export class Checkbox implements CheckboxInput {
         onFocus={this.onFocus.bind(this)}
         onBlur={this.onBlur.bind(this)}
         onKeyUp={this.onKeyUp.bind(this)}
+        checked={this.checked}
         id={this.inputId}
         name={this.name}
         value={this.value}