diff --git a/contents/components/radio-buttons.html b/contents/components/radio-buttons.html
index 44da2f8f1..f1d9bde96 100644
--- a/contents/components/radio-buttons.html
+++ b/contents/components/radio-buttons.html
@@ -139,15 +139,30 @@ <h3>Selected / Unselected</h3>
   <div class="cf nr2 nl2 mb3">
     <div class="fl-ns w-50-ns ph2">
       <img src="../images/components/radio-buttons/radiobutton-states.svg" alt="Example of a selected and an unselected radio button." id="showImage" style="height:202px;">
-      <iframe class="db w-100" height="202.5" src="https://designakt.github.io/PDS/components/radio-buttons/behavior.html" allowfullscreen="allowfullscreen" frameborder="0" id="showExample" style="display: none; margin-bottom: 15px;"></iframe>
-      <small class="db grey-50 mb3 mb0-ns">
-         <a href="#" onclick="document.getElementById('showImage').style.display='block';
-                              document.getElementById('showExample').style.display='none';
-                              return false;">Image</a> /
-         <a href="#" onclick="document.getElementById('showImage').style.display='none';
-                              document.getElementById('showExample').style.display='block';
-                              return false;">Interactive example</a> (Currently only renders correctly in Firefox.)
-      </small>
+      <div class='interactive'>
+        <div id="select-unselect-example" class="interactive-example" style="display: none;">
+          <div class="container-demo">
+            <div class="radiobutton-wrapper">
+              <div class="group-radio-buttons">
+                <input name="group1" class="track-clicks" id="radio-01" checked="" type="radio">
+                <label for="radio-01">Show browsing history</label>
+              </div>
+              <div class="group-radio-buttons">
+                <input name="group1" class="track-clicks" id="radio-02" type="radio">
+                <label for="radio-02">Show bookmarks</label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <small class="db grey-50 mb3 mb0-ns">
+          <a href="#" class="image-toggle" onclick="document.getElementById('showImage').style.display='block';
+                                                    document.getElementById('select-unselect-example').style.display='none';
+                                                    return false;">Image</a> /
+          <a href="#" class="interactive-toggle" onclick="document.getElementById('showImage').style.display='none';
+                                                          document.getElementById('select-unselect-example').style.display='block';
+                                                          return false;">Interactive example</a> (Currently only renders correctly in Firefox.)
+        </small>
+      </div>
     </div>
     <div class="fl-ns w-50-ns ph2">
       <h4 class="mb2">Selected:</h4>
diff --git a/images/components/checkboxes/radio-16.svg b/images/components/checkboxes/radio-16.svg
new file mode 100644
index 000000000..a50854628
--- /dev/null
+++ b/images/components/checkboxes/radio-16.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="4" fill="#fff"/>
+</svg>
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index 3d61bba45..4615e5bc0 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -8,7 +8,7 @@ require('../../node_modules/highlight.js/styles/color-brewer.css');
 const React = require('react');
 const { connect } = require('react-redux');
 const ReactDOM = require('react-dom');
-const { getPage } = require('./utilities.js');
+const { getPage, sendEvent } = require('./utilities.js');
 
 const Editor = React.createClass({
   displayName: 'Editor',
@@ -39,6 +39,7 @@ const Editor = React.createClass({
   componentDidUpdate: function(prevProps) {
     if (prevProps.text !== this.props.text) {
       this.addIds();
+      this.addInteractionEvents();
       const page = this.props.page;
       let title = `${page.title} | Photon Design System`;
       if(page.category !== page.title) {
@@ -61,6 +62,22 @@ const Editor = React.createClass({
     }
   },
 
+  addInteractionEvents: function() {
+    let node = ReactDOM.findDOMNode(this);
+    let interactiveElements = Array.from(node.querySelectorAll('.interactive'));
+    interactiveElements.forEach(element => {
+      element.addEventListener('click', e => {
+        if (e.target.classList.contains('interactive-toggle')) {
+          sendEvent('click', 'interactive-toggle', window.location.pathname);
+        } else if (e.target.classList.contains('image-toggle')) {
+          sendEvent('click', 'image-toggle', window.location.pathname);
+        } else if (e.target.classList.contains ('track-clicks')) {
+          sendEvent('click', 'interaction-with-demo', e.target.closest('div[id]').id);
+        }
+      });
+    });
+  },
+
   addIds: function () {
     let node = ReactDOM.findDOMNode(this);
     let headings = Array.from(node.querySelectorAll('h1,h2,h3,h4'));
diff --git a/src/components/utilities.js b/src/components/utilities.js
index cb9a5d167..bea1a7069 100644
--- a/src/components/utilities.js
+++ b/src/components/utilities.js
@@ -51,7 +51,7 @@ function getSiblingPages(page, pages) {
   var current_index = shown_pages.indexOf(page);
   var previous_page = shown_pages[current_index - 1] || shown_pages[shown_pages.length - 1];
   var next_page = shown_pages[current_index + 1] || shown_pages[0];
-  return { previous_page, next_page }
+  return { previous_page, next_page };
 }
 
 function sendPageview(url, hash) {
diff --git a/src/styles/page.scss b/src/styles/page.scss
index b6c05003c..a72082b83 100644
--- a/src/styles/page.scss
+++ b/src/styles/page.scss
@@ -440,3 +440,83 @@ div[data-tabs] input[type="radio"]:checked + label {
 div[data-tabs] input[type="radio"]:checked + label + div[data-tab] {
   display: block;
 }
+
+/* Interactive checkbox */
+.interactive-example {
+  background-color: var(--grey-10);
+  height: 202.5px; // same height as images
+  margin-bottom: 15px;
+  outline: 1px solid rgba(12, 12, 13, .1);
+  outline-offset: -1px;
+  width: 100%;
+}
+
+.container-demo {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.radiobutton-wrapper {
+  margin: 0 auto;
+  padding: 20px;
+  width: -moz-fit-content;
+}
+
+.group-radio-buttons {
+  align-items: center;
+  display: flex;
+  margin-bottom: 6px;
+}
+
+input[type="radio"]:checked {
+  background-color: var(--blue-60);
+  background-image: url("../../images/components/checkboxes/radio-16.svg");
+  background-size: 16px;
+  border: none;
+}
+
+input[type="radio"] {
+  -moz-appearance: none;
+  background-color: var(--grey-90-a10);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 4px;
+  border: 1px solid var(--grey-90-a30);
+  border-radius: 100%;
+  font-size: 14px;
+  height: 16px;
+  margin-right: 4px;
+  width: 16px;
+}
+
+input[type="radio"] + label {
+  flex: 1 1 auto;
+  font-size: 14px;
+}
+
+input[type="radio"]:hover {
+  background-color: var(--grey-90-a20);
+}
+
+input[type="radio"]:hover:active {
+  background-color: var(--grey-90-a30);
+}
+
+input[type="radio"]:focus {
+  animation: none;
+  border: 0;
+  box-shadow:
+    0 0 0 1px var(--blue-50) inset,
+    0 0 0 1px var(--blue-50),
+    0 0 0 4px var(--blue-50-a30);
+}
+
+input[type="radio"]:checked:hover {
+  background-color: var(--blue-70);
+}
+
+input[type="radio"]:checked:hover:active {
+  background-color: var(--blue-80);
+}