diff --git a/packages/core/src/components/datetime/test/basic.html b/packages/core/src/components/datetime/test/basic.html
index c36450ac29..db09942f64 100644
--- a/packages/core/src/components/datetime/test/basic.html
+++ b/packages/core/src/components/datetime/test/basic.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Ionic DateTime</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <script src="/dist/build/ionic.js"></script>
+  <script src="/dist/ionic.js"></script>
 </head>
 <body>
   <ion-app>
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 6a1ed88d5e..de49905001 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -1,7 +1,10 @@
-import { Component, Element, HostElement, Method, Prop, Listen } from '@stencil/core';
-import { CssClassMap } from '../../index';
+import { Component, Element, HostElement, Listen, Method, Prop, State } from '@stencil/core';
+
 import { createThemedClasses } from '../../utils/theme';
 
+import { CssClassMap } from '../../index';
+
+import { RadioEvent } from '../radio/radio';
 
 @Component({
   tag: 'ion-item',
@@ -14,10 +17,14 @@ import { createThemedClasses } from '../../utils/theme';
 export class Item {
   private ids: number = -1;
   private id: string;
+  private inputs: any = [];
 
   private childStyles: CssClassMap = Object.create(null);
   private label: any;
 
+  // TODO get reorder from a parent list/group
+  @State() reorder: boolean = false;
+
   @Element() private el: HTMLElement;
 
   @Prop() mode: string;
@@ -42,11 +49,25 @@ export class Item {
     return hasChildStyleChange;
   }
 
+  // TODO? this loads after radio group
+  // @Listen('ionRadioDidLoad')
+  // protected radioDidLoad(ev: RadioEvent) {
+  //   const radio = ev.detail.radio;
+  //   // register the input inside of the item
+  //   // reset to the item's id instead of the radiogroup id
+  //   radio.id = 'rb-' + this.registerInput('radio');
+  //   radio.labelId = 'lbl-' + this.id;
+  // }
+
   @Method()
   getLabelText(): string {
     return this.label ? this.label.getText() : '';
   }
 
+  ionViewWillLoad() {
+    this.id = (++itemId).toString();
+  }
+
   ionViewDidLoad() {
     // Add item-button classes to each ion-button in the item
     const buttons = this.el.querySelectorAll('ion-button') as any;
@@ -64,14 +85,22 @@ export class Item {
     //   }
     //   this.viewLabel = false;
     // }
+
+    // if (this._viewLabel && this.inputs.length) {
+    //   let labelText = this.getLabelText().trim();
+    //   this._viewLabel = (labelText.length > 0);
+    // }
+
+    // if (this.inputs.length > 1) {
+    //   this.setElementClass('item-multiple-inputs', true);
+    // }
   }
 
   /**
    * @hidden
    */
-  @Method()
   registerInput(type: string) {
-    // this.inputs.push(type);
+    this.inputs.push(type);
     return this.id + '-' + (++this.ids);
   }
 
@@ -93,53 +122,18 @@ export class Item {
             <slot></slot>
           </div>
           <slot name='end'></slot>
+          { this.reorder
+            ? <ion-reorder></ion-reorder>
+            : null
+          }
         </div>
+        <div class="button-effect"></div>
       </TagType>
     );
-
-    // template:
-    //   '<ng-content select="[slot="start"],ion-checkbox:not([slot="end"])"></ng-content>' +
-    //   '<div class="item-inner">' +
-    //     '<div class="input-wrapper">' +
-    //       '<ng-content select="ion-label"></ng-content>' +
-    //       '<ion-label *ngIf="_viewLabel">' +
-    //         '<ng-content></ng-content>' +
-    //       '</ion-label>' +
-    //       '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
-    //     '</div>' +
-    //     '<ng-content select="[slot="end"],ion-radio,ion-toggle"></ng-content>' +
-    //     '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
-    //   '</div>' +
-    //   '<div class="button-effect"></div>',
   }
 
 
-  // _ids: number = -1;
-  // _inputs: Array<string> = [];
-  // _label: Label;
-  // _viewLabel: boolean = true;
-  // _name: string = 'item';
-  // _hasReorder: boolean;
-
-  // /**
-  //  * @hidden
-  //  */
-  // id: string;
-
-  // /**
-  //  * @hidden
-  //  */
-  // labelId: string = null;
-
-  // constructor(
-  //   form: Form,
-  //   config: Config,
-  //   elementRef: ElementRef,
-  //   renderer: Renderer,
-  //   @Optional() reorder: ItemReorder
-  // ) {
-  //   super(config, elementRef, renderer, 'item');
-
+  // constructor() {
   //   this._setName(elementRef);
   //   this._hasReorder = !!reorder;
   //   this.id = form.nextId().toString();
@@ -156,48 +150,6 @@ export class Item {
   //   }
   // }
 
-  // /**
-  //  * @hidden
-  //  */
-  // registerInput(type: string) {
-  //   this._inputs.push(type);
-  //   return this.id + '-' + (++this._ids);
-  // }
-
-  // /**
-  //  * @hidden
-  //  */
-  // ngAfterContentInit() {
-  //   if (this._viewLabel && this._inputs.length) {
-  //     let labelText = this.getLabelText().trim();
-  //     this._viewLabel = (labelText.length > 0);
-  //   }
-
-  //   if (this._inputs.length > 1) {
-  //     this.setElementClass('item-multiple-inputs', true);
-  //   }
-  // }
-
-  // /**
-  //  * @hidden
-  //  */
-  // _updateColor(newColor: string, componentName?: string) {
-  //   componentName = componentName || 'item'; // item-radio
-  //   this._setColor(newColor, componentName);
-  // }
-
-  // /**
-  //  * @hidden
-  //  */
-  // _setName(elementRef: ElementRef) {
-  //   let nodeName = elementRef.nativeElement.nodeName.replace('ION-', '');
-
-  //   if (nodeName === 'LIST-HEADER' || nodeName === 'ITEM-DIVIDER') {
-  //     this._name = nodeName;
-  //   }
-  // }
-
-
   // /**
   //  * @hidden
   //  */
@@ -223,18 +175,6 @@ export class Item {
   //   }
   // }
 
-  // /**
-  //  * @hidden
-  //  */
-  // @ContentChildren(Button)
-  // set _buttons(buttons: QueryList<Button>) {
-  //   buttons.forEach(button => {
-  //     if (!button._size) {
-  //       button.setElementClass('item-button', true);
-  //     }
-  //   });
-  // }
-
   // /**
   //  * @hidden
   //  */
@@ -245,3 +185,5 @@ export class Item {
   //   });
   // }
 }
+
+var itemId = -1;
\ No newline at end of file
diff --git a/packages/core/src/components/radio/radio-group.tsx b/packages/core/src/components/radio/radio-group.tsx
index 59627e0514..b492d34f51 100644
--- a/packages/core/src/components/radio/radio-group.tsx
+++ b/packages/core/src/components/radio/radio-group.tsx
@@ -1,6 +1,8 @@
-import { Component, Element, Event, EventEmitter, HostElement, Prop , State} from '@stencil/core';
+import { Component, Element, Event, EventEmitter, HostElement, Listen, Prop, PropDidChange, State} from '@stencil/core';
+
 import { isCheckedProperty } from '../../utils/helpers';
-import { Radio } from './radio';
+
+import { Radio, RadioEvent } from './radio';
 
 
 /**
@@ -58,7 +60,9 @@ import { Radio } from './radio';
   tag: 'ion-radio-group'
 })
 export class RadioGroup {
-  radios: Radio[];
+  radios: Radio[] = [];
+  id: number;
+  ids = 0;
 
   @Element() el: HTMLElement;
 
@@ -86,32 +90,45 @@ export class RadioGroup {
    */
   @Prop({ mutable: true }) value: string;
 
+  @PropDidChange('value')
+  valueChanged() {
+    this.update();
+    this.ionChange.emit(this);
+  }
+
+  @Listen('ionRadioDidLoad')
+  protected radioDidLoad(ev: RadioEvent) {
+    const radio = ev.detail.radio;
+    this.radios.push(radio);
+    radio.id = 'rb-' + this.id + '-' + (++this.ids);
+
+    // if the value is not defined then use its unique id
+    radio.value = !radio.value ? radio.id : radio.value;
+
+    if (radio.checked && !this.value) {
+      this.value = radio.value;
+    }
+  }
+
+  @Listen('ionRadioDidToggle')
+  protected radioToggle(ev: RadioEvent) {
+    const radio = ev.detail.radio;
+
+    // If the group does not allow empty selection then checked
+    // should be true, otherwise leave it as is
+    radio.checked = this.allowEmptySelection ? radio.checked : true;
+    this.value = radio.checked ? radio.value : '';
+  }
 
   ionViewWillLoad() {
-    let radioGroupId = ++radioGroupIds;
-    let radioId = 0;
-
-    const radios = this.el.querySelectorAll('ion-radio') as NodeListOf<HostElement>;
-
-    for (var i = 0; i < radios.length; i++) {
-      const radio = radios[i].$instance;
-
-      if (radio) {
-        radio.id = 'rb-' + radioGroupId + '-' + (++radioId);
-
-        if (radio.checked) {
-          this.activeId = radio.id;
-        }
-      } else {
-      }
-    }
+    this.id = ++radioGroupIds;
 
     // Get the list header if it exists and set the id
     const header = this.el.querySelector('ion-list-header') as HostElement;
 
     if (header) {
       if (!header.id) {
-        header.id = 'rg-hdr-' + radioGroupId;
+        header.id = 'rg-hdr-' + this.id;
       }
       this.headerId = header.id;
     }
@@ -125,10 +142,9 @@ export class RadioGroup {
   update() {
     // loop through each of the radios
     let hasChecked = false;
-    this.radios.forEach(radio => {
+    this.radios.forEach((radio: Radio) => {
 
-      // check this radiobutton if its value is
-      // the same as the radiogroups value
+      // Check the radio if the value is the same as the group value
       radio.checked = isCheckedProperty(this.value, radio.value) && !hasChecked;
 
       if (radio.checked) {
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 9e847ab7b3..08338a70fd 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -1,4 +1,5 @@
 import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core';
+
 import { createThemedClasses } from '../../utils/theme';
 
 
@@ -51,7 +52,6 @@ import { createThemedClasses } from '../../utils/theme';
 export class Radio {
   mode: string;
   color: string;
-  group: any;
   labelId: string;
   styleTmr: any;
 
@@ -61,6 +61,21 @@ export class Radio {
 
   @State() activated: boolean;
 
+  /**
+   * @output {EventEmitter} Emitted when the radio loads.
+   */
+  @Event() ionRadioDidLoad: EventEmitter;
+
+  /**
+   * @output {EventEmitter} Emitted when the radio unloads.
+   */
+  @Event() ionRadioDidUnload: EventEmitter;
+
+  /**
+   * @output {EventEmitter} Emitted when the radio is toggled.
+   */
+  @Event() ionRadioDidToggle: EventEmitter;
+
   /**
    * @output {EventEmitter} Emitted when the styles of the radio change.
    */
@@ -86,36 +101,17 @@ export class Radio {
    */
   @Prop({ mutable: true }) value: string;
 
-
   ionViewWillLoad() {
     this.emitStyle();
   }
 
   ionViewDidLoad() {
-    this.group = this.el.closest('ion-radio-group') as any;
-
-    const item = this.el.closest('ion-item') as any;
-
-    if (item) {
-      // register the input inside of the item
-      // reset to the item's id instead of the radiogroup id
-      this.id = 'rb-' + item.registerInput('radio');
-      this.labelId = 'lbl-' + item.id;
-    }
-
-    // if the value is not defined then use it's unique id
-    this.value = !this.value ? this.id : this.value;
+    this.ionRadioDidLoad.emit({ radio: this });
   }
 
   @PropDidChange('checked')
   checkedChanged(val: boolean) {
     this.ionSelect.emit({ checked: val });
-
-    if (this.group) {
-      this.group.value = this.value;
-      this.group.$instance.ionChange.emit(this);
-    }
-
     this.emitStyle();
   }
 
@@ -145,6 +141,7 @@ export class Radio {
 
   toggle() {
     this.checked = !this.checked;
+    this.ionRadioDidToggle.emit({ radio: this });
   }
 
   hostData() {
@@ -180,30 +177,8 @@ export class Radio {
   }
 }
 
-//  constructor() {
-//     if (_group) {
-//       // register with the radiogroup
-//       this.id = 'rb-' + _group.add(this);
-//     }
-
-//     if (_item) {
-//       // register the input inside of the item
-//       // reset to the item's id instead of the radiogroup id
-//       this.id = 'rb-' + _item.registerInput('radio');
-//       this._labelId = 'lbl-' + _item.id;
-//       this._item.setElementClass('item-radio', true);
-//     }
-//   }
-
-//   /**
-//    * @internal
-//    */
-//   ngOnInit() {
-//     if (this._group && isPresent(this._group.value)) {
-//       this.checked = isCheckedProperty(this._group.value, this.value);
-//     }
-
-//     if (this._group && this._group.disabled) {
-//       this.disabled = this._group.disabled;
-//     }
-//   }
\ No newline at end of file
+export interface RadioEvent extends Event {
+  detail: {
+    radio: Radio;
+  }
+}
\ No newline at end of file
diff --git a/packages/core/src/components/radio/test/basic.html b/packages/core/src/components/radio/test/basic.html
index c32cb1b54f..5256c00171 100644
--- a/packages/core/src/components/radio/test/basic.html
+++ b/packages/core/src/components/radio/test/basic.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Ionic Radio</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <script src="/dist/build/ionic.js"></script>
+  <script src="/dist/ionic.js"></script>
 </head>
 <body>
   <ion-app>
@@ -13,47 +13,93 @@
         <ion-title>Radios</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="outer-content">
-      <ion-radio-group>
+    <ion-content class="radio-test outer-content">
+      <ion-radio-group id="fruitRadio">
         <ion-list>
           <ion-list-header>
-            Fruits
+            Fruits (Group w/ values)
           </ion-list-header>
           <ion-item>
             <ion-label>Apple</ion-label>
-            <ion-radio slot="start" name="apple" checked></ion-radio>
-            <ion-icon slot="end" name="ionic"></ion-icon>
+            <ion-radio slot="start" value="apple"></ion-radio>
           </ion-item>
 
           <ion-item>
-            <ion-label>Banana</ion-label>
-            <ion-radio slot="start" name="banana" checked></ion-radio>
+            <ion-label>Grape, checked, disabled</ion-label>
+            <ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
           </ion-item>
 
           <ion-item>
             <ion-label>Cherry</ion-label>
-            <ion-radio slot="start" color="danger" name="cherry"></ion-radio>
+            <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
           </ion-item>
         </ion-list>
       </ion-radio-group>
 
+      <ion-radio-group id="pizzaRadio">
+        <ion-list>
+          <ion-list-header>
+            Extra Pizza Topping (Group w/ no values)
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Pepperoni</ion-label>
+            <ion-radio slot="end" name="pepperoni" checked></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Pineapple</ion-label>
+            <ion-radio slot="end" name="pineapple"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Sausage</ion-label>
+            <ion-radio slot="end" color="danger" name="sausage"></ion-radio>
+          </ion-item>
+        </ion-list>
+      </ion-radio-group>
+
+      <ion-radio-group id="veggiesRadio" allow-empty-selection>
+        <ion-list>
+          <ion-list-header>
+            Veggies (Group w/ allow empty)
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Carrot</ion-label>
+            <ion-radio slot="end" value="carrot"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Tomato</ion-label>
+            <ion-radio slot="end" value="tomato"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Broccoli</ion-label>
+            <ion-radio slot="end" color="danger" value="broccoli" checked></ion-radio>
+          </ion-item>
+        </ion-list>
+      </ion-radio-group>
+
+      <p aria-hidden="true" text-center>
+        <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
+        <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
+        <ion-button onClick="printRadioValues()" outline small>Print Values</ion-button>
+      </p>
+
+      <pre id="valuesCode"></pre>
+
       <ion-list>
         <ion-list-header>
-          Mo Fruits
+          No Radio Group
         </ion-list-header>
-        <ion-item>
-          <ion-label>Grape, checked, disabled</ion-label>
-          <ion-radio slot="start" id="grapeChecked" name="grape" checked disabled></ion-radio>
-        </ion-item>
-
         <ion-item>
           <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-          <ion-radio slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-radio>
+          <ion-radio slot="start" color="secondary"></ion-radio>
         </ion-item>
 
         <ion-item>
           <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
-          <ion-radio slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-radio>
+          <ion-radio slot="start" color="light" checked="true"></ion-radio>
         </ion-item>
 
         <ion-item>
@@ -73,29 +119,11 @@
 
       </ion-list>
 
-
-      <p aria-hidden="true" text-center>
-        <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
-        <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
-        <ion-button onClick="printForm()" outline small>Print Form</ion-button>
-      </p>
-
       <p>
         <ion-radio id="standAloneChecked"></ion-radio>
         Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
       </p>
 
-      <p aria-hidden="true" padding>
-        <code>appleCtrl.value: <span id="appleCtrlValue"></span></code><br>
-        <code>bananaCtrl.value: <span id="bananaCtrlValue"></span></code><br>
-        <code>cherry.value: <span id="cherryCtrlValue"></span></code><br>
-        <code>grape.value: <span id="grapeCtrlValue"></span></code><br>
-        <code>kiwiValue: <spa id="kiwiValue"></span></code><br>
-        <code>strawberryValue: <span id="strawberryValue">y</span></code><br>
-      </p>
-
-      <pre aria-hidden="true" padding id="formResults"></pre>
-
       <ion-item>
         <ion-label>Checkbox / Toggle</ion-label>
         <ion-radio slot="start" id="checked"></ion-radio>
@@ -115,12 +143,30 @@
     </ion-content>
 
     <script>
+      var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
+      printRadioValues();
+
       function printForm(ev) {
         console.log('TODO get working with forms');
       }
 
+      function printRadioValues() {
+        var html = 'Values:<br>';
+
+        for (var i = 0; i < radioValues.length; i++) {
+          var radio = radioValues[i];
+          var ele = document.getElementById(radio);
+          html += '<span>' + radio + ': ' + ele.value + ' </span><br>';
+        }
+
+        var valueEle = document.getElementById('valuesCode');
+        valueEle.innerHTML = html;
+      }
+
       function toggleBoolean(id, prop) {
+        console.log('toggleBoolean', id);
         var ele = document.getElementById(id);
+        console.log('toggleBoolean', ele);
 
         var isTrue = ele[prop] ? false : true;
         ele[prop] = isTrue;
@@ -128,6 +174,14 @@
       }
     </script>
 
+    <style>
+      .radio-test pre {
+        background: #f6f6f6;
+        border: 1px solid #ddd;
+        padding: 15px 10px;
+      }
+    </style>
+
   </ion-app>
 </body>
 </html>
