diff --git a/src/components/radio/radio-button.js b/src/components/radio/radio-button.js
index e69de29bb2..dfbadb67db 100644
--- a/src/components/radio/radio-button.js
+++ b/src/components/radio/radio-button.js
@@ -0,0 +1,37 @@
+import {NgElement, Component, Template} from 'angular2/angular2'
+import {ComponentConfig} from 'ionic2/config/component-config';
+
+export let RadioConfig = new ComponentConfig('radio');
+
+@Component({
+  selector: 'ion-radio',
+  services: [RadioConfig]
+})
+@Template({
+  inline: `
+    <div class="item-content">
+
+      <div class="item-title">
+        <content></content>
+      </div>
+
+      <div class="item-media media-radio">
+        <icon class="radio-off"></icon>
+        <icon class="ion-ios-checkmark-empty radio-on"></icon>
+      </div>
+
+    </div>
+  `
+})
+export class RadioButton {
+  constructor(
+    configFactory: RadioConfig,
+    element: NgElement
+  ) {
+    this.domElement = element.domElement
+    this.domElement.classList.add('item')
+    this.domElement.setAttribute('aria-checked', true)
+
+    configFactory.create(this)
+  }
+}
diff --git a/src/components/radio/radio-group.js b/src/components/radio/radio-group.js
index e69de29bb2..5b9c080170 100644
--- a/src/components/radio/radio-group.js
+++ b/src/components/radio/radio-group.js
@@ -0,0 +1,33 @@
+import {NgElement, Component, Template} from 'angular2/angular2'
+import {ComponentConfig} from 'ionic2/config/component-config';
+
+export let RadioConfig = new ComponentConfig('radio');
+
+@Component({
+  selector: 'ion-radio-group',
+  services: [RadioConfig]
+})
+@Template({
+  inline: `
+    <header class="list-header">
+      <content select="ion-list-header"></content>
+    </header>
+    <div class="list-content radio-group radio-group-ios">
+      <content></content>
+    </div>
+    <footer class="list-footer">
+      <content select="ion-list-footer"></content>
+    </footer>
+  `
+})
+export class RadioGroup {
+  constructor(
+    configFactory: RadioConfig,
+    element: NgElement
+  ) {
+    this.domElement = element.domElement
+    this.domElement.classList.add('list')
+    this.domElement.classList.add('list-ios')
+    configFactory.create(this)
+  }
+}
diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html
index 34542ddfb4..ae97195982 100644
--- a/src/components/radio/test/basic/main.html
+++ b/src/components/radio/test/basic/main.html
@@ -5,68 +5,24 @@
 
     <div class="content" style="background: #efeff4">
 
-      <div class="list list-ios">
+      <ion-radio-group>
 
-        <div class="list-header">
+        <ion-list-header>
           Radio Group
-        </div>
+        </ion-list-header>
 
-        <div class="list-content radio-group radio-group-ios"
-             role="radiogroup"
-             aria-activedescendant="radio_1"
-             aria-invalid="false">
+        <ion-radio>
+          Star Wars
+        </ion-radio>
 
-          <div class="item radio"
-               role="radio"
-               id="radio_1"
-               value="Apple"
-               aria-checked="true"
-               aria-label="Star Wars">
+        <ion-radio>
+          Star Trek
+        </ion-radio>
 
-            <div class="item-content">
-
-              <div class="item-title">
-                Star Wars
-              </div>
-
-              <div class="item-media media-radio">
-                <icon class="radio-off"></icon>
-                <icon class="ion-ios-checkmark-empty radio-on"></icon>
-              </div>
-
-            </div>
-
-          </div>
-
-          <div class="item radio"
-               role="radio"
-               id="radio_2"
-               value="Banana"
-               aria-checked="false"
-               aria-label="Star Trek">
-
-            <div class="item-content">
-
-              <div class="item-title">
-                Star Trek
-              </div>
-
-              <div class="item-media media-radio">
-                <icon class="radio-off"></icon>
-                <icon class="ion-ios-checkmark-empty radio-on"></icon>
-              </div>
-
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
+      </ion-radio-group>
 
     </div>
 
   </div>
 
 </div>
-
diff --git a/src/components/radio/test/basic/main.js b/src/components/radio/test/basic/main.js
index d0bbf22754..8d9dcf83a5 100644
--- a/src/components/radio/test/basic/main.js
+++ b/src/components/radio/test/basic/main.js
@@ -2,11 +2,15 @@ import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
 import {View} from 'ionic2/components/view/view';
 import {Content} from 'ionic2/components/content/content';
+import {Icon} from 'ionic2/components/icon/icon';
+import {RadioGroup} from 'ionic2/components/radio/radio-group';
+import {RadioButton} from 'ionic2/components/radio/radio-button';
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
   url: 'main.html',
-  directives: [View, Content]
+  directives: [View, Content, RadioGroup, RadioButton]
 })
 class IonicApp {
   constructor() {