diff --git a/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
index 1fa794a207..879b1ee9f5 100644
--- a/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
+++ b/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -906,6 +906,8 @@ exports[`Storyshots Sample Form sample 1`] = `
         >
           <div
             data-css-1a26704=""
+            onFocus={[Function]}
+            onKeyDown={[Function]}
             role="radiogroup"
             style={
               Object {
@@ -913,6 +915,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 "width": "100%",
               }
             }
+            tabIndex={0}
           >
             <div
               data-css-xp79s5=""
@@ -921,7 +924,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 data-css-kn3wr0=""
               >
                 <div
-                  data-css-1lxv0yd=""
+                  data-css-1gbdc34=""
                 >
                   <div
                     data-css-1lu7sfl=""
@@ -930,18 +933,19 @@ exports[`Storyshots Sample Form sample 1`] = `
                     <div
                       aria-checked={false}
                       data-css-1wbxh41=""
+                      onFocus={[Function]}
                       role="radio"
                       tabIndex="-1"
                     />
                   </div>
                 </div>
                 <input
-                  data-css-fplhjw=""
+                  checked={false}
+                  data-css-gyrv08=""
                   name="sample"
-                  onBlur={[Function]}
                   onClick={[Function]}
-                  onFocus={[Function]}
                   readOnly={true}
+                  tabIndex="-1"
                   type="radio"
                   value="full"
                 />
@@ -951,11 +955,15 @@ exports[`Storyshots Sample Form sample 1`] = `
                   Full-time employement
                 </div>
               </label>
+            </div>
+            <div
+              data-css-xp79s5=""
+            >
               <label
                 data-css-kn3wr0=""
               >
                 <div
-                  data-css-1lxv0yd=""
+                  data-css-1gbdc34=""
                 >
                   <div
                     data-css-1lu7sfl=""
@@ -964,18 +972,19 @@ exports[`Storyshots Sample Form sample 1`] = `
                     <div
                       aria-checked={false}
                       data-css-1wbxh41=""
+                      onFocus={[Function]}
                       role="radio"
                       tabIndex="-1"
                     />
                   </div>
                 </div>
                 <input
-                  data-css-fplhjw=""
+                  checked={false}
+                  data-css-gyrv08=""
                   name="sample"
-                  onBlur={[Function]}
                   onClick={[Function]}
-                  onFocus={[Function]}
                   readOnly={true}
+                  tabIndex="-1"
                   type="radio"
                   value="part"
                 />
diff --git a/packages/radio/src/css/index.js b/packages/radio/src/css/index.js
index 3975a04c79..eff413d599 100644
--- a/packages/radio/src/css/index.js
+++ b/packages/radio/src/css/index.js
@@ -54,8 +54,7 @@ export default {
 
   '.psds-radio-button__circle-outer': {
     width: '16px',
-    marginRight: layout.spacingSmall,
-    pointerEvents: 'none'
+    marginRight: layout.spacingSmall
   },
 
   '.psds-radio-button__circle': {
@@ -88,12 +87,7 @@ export default {
   },
 
   '.psds-radio-button__input': {
-    opacity: 0,
-    width: 0,
-    height: 0,
-    '&:focus': {
-      outline: 'none'
-    }
+    display: 'none'
   },
 
   '.psds-radio-button__label': {
diff --git a/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
index ff385c2d7f..21dc2af67f 100644
--- a/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
+++ b/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -1,149 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Radio controlled 1`] = `
-<div
-  style={
-    Object {
-      "padding": "24px",
-    }
-  }
->
-  <div>
-    <div
-      style={
-        Object {
-          "color": "rgba(255, 255, 255, 0.95)",
-        }
-      }
-    >
-      Selected: 
-      red
-      <br />
-      <button
-        onClick={[Function]}
-      >
-        blue
-      </button>
-    </div>
-    <div
-      data-css-1a26704=""
-      role="radiogroup"
-    >
-      <div
-        data-css-xp79s5=""
-      >
-        <label
-          data-css-kn3wr0=""
-        >
-          <div
-            data-css-1lxv0yd=""
-          >
-            <div
-              data-css-1lu7sfl=""
-              data-css-iwspcj=""
-            >
-              <div
-                aria-checked={true}
-                data-css-1olif27=""
-                role="radio"
-                tabIndex="-1"
-              >
-                <div
-                  data-css-ppl1jg=""
-                />
-              </div>
-            </div>
-          </div>
-          <input
-            data-css-fplhjw=""
-            name="controlled"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            readOnly={true}
-            type="radio"
-            value="red"
-          />
-          <div
-            data-css-nrxvu5=""
-          >
-            Red
-          </div>
-        </label>
-        <label
-          data-css-kn3wr0=""
-        >
-          <div
-            data-css-1lxv0yd=""
-          >
-            <div
-              data-css-1lu7sfl=""
-              data-css-iwspcj=""
-            >
-              <div
-                aria-checked={false}
-                data-css-1wbxh41=""
-                role="radio"
-                tabIndex="-1"
-              />
-            </div>
-          </div>
-          <input
-            data-css-fplhjw=""
-            name="controlled"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            readOnly={true}
-            type="radio"
-            value="green"
-          />
-          <div
-            data-css-nrxvu5=""
-          >
-            Green
-          </div>
-        </label>
-        <label
-          data-css-kn3wr0=""
-        >
-          <div
-            data-css-1lxv0yd=""
-          >
-            <div
-              data-css-1lu7sfl=""
-              data-css-iwspcj=""
-            >
-              <div
-                aria-checked={false}
-                data-css-1wbxh41=""
-                role="radio"
-                tabIndex="-1"
-              />
-            </div>
-          </div>
-          <input
-            data-css-fplhjw=""
-            name="controlled"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            readOnly={true}
-            type="radio"
-            value="blue"
-          />
-          <div
-            data-css-nrxvu5=""
-          >
-            Blue
-          </div>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Radio default 1`] = `
 <div
   style={
@@ -154,7 +10,10 @@ exports[`Storyshots Radio default 1`] = `
 >
   <div
     data-css-1a26704=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-xp79s5=""
@@ -163,7 +22,7 @@ exports[`Storyshots Radio default 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -172,18 +31,18 @@ exports[`Storyshots Radio default 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="default"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -193,11 +52,15 @@ exports[`Storyshots Radio default 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -206,18 +69,18 @@ exports[`Storyshots Radio default 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="default"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -227,11 +90,15 @@ exports[`Storyshots Radio default 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -240,18 +107,18 @@ exports[`Storyshots Radio default 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="default"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -276,7 +143,10 @@ exports[`Storyshots Radio disabled & error 1`] = `
 >
   <div
     data-css-sz0dtt=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-xp79s5=""
@@ -285,7 +155,7 @@ exports[`Storyshots Radio disabled & error 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -294,18 +164,18 @@ exports[`Storyshots Radio disabled & error 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled & error"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -315,11 +185,15 @@ exports[`Storyshots Radio disabled & error 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -328,6 +202,7 @@ exports[`Storyshots Radio disabled & error 1`] = `
             <div
               aria-checked={true}
               data-css-1olif27=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             >
@@ -338,12 +213,11 @@ exports[`Storyshots Radio disabled & error 1`] = `
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled & error"
-          onBlur={[Function]}
+          checked={true}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -353,11 +227,15 @@ exports[`Storyshots Radio disabled & error 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -366,18 +244,18 @@ exports[`Storyshots Radio disabled & error 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled & error"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -402,7 +280,10 @@ exports[`Storyshots Radio disabled 1`] = `
 >
   <div
     data-css-sz0dtt=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-xp79s5=""
@@ -411,7 +292,7 @@ exports[`Storyshots Radio disabled 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -420,18 +301,18 @@ exports[`Storyshots Radio disabled 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -441,11 +322,15 @@ exports[`Storyshots Radio disabled 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -454,6 +339,7 @@ exports[`Storyshots Radio disabled 1`] = `
             <div
               aria-checked={true}
               data-css-1olif27=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             >
@@ -464,12 +350,11 @@ exports[`Storyshots Radio disabled 1`] = `
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled"
-          onBlur={[Function]}
+          checked={true}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -479,11 +364,15 @@ exports[`Storyshots Radio disabled 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -492,18 +381,18 @@ exports[`Storyshots Radio disabled 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={null}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="disabled"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={null}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -528,7 +417,10 @@ exports[`Storyshots Radio error 1`] = `
 >
   <div
     data-css-1a26704=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-xp79s5=""
@@ -537,7 +429,7 @@ exports[`Storyshots Radio error 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -546,18 +438,18 @@ exports[`Storyshots Radio error 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="error"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -567,11 +459,15 @@ exports[`Storyshots Radio error 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -580,6 +476,7 @@ exports[`Storyshots Radio error 1`] = `
             <div
               aria-checked={true}
               data-css-1olif27=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             >
@@ -590,12 +487,11 @@ exports[`Storyshots Radio error 1`] = `
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="error"
-          onBlur={[Function]}
+          checked={true}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -605,11 +501,15 @@ exports[`Storyshots Radio error 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-iwspcj=""
@@ -618,18 +518,18 @@ exports[`Storyshots Radio error 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="error"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -654,7 +554,10 @@ exports[`Storyshots Radio labels 1`] = `
 >
   <div
     data-css-1a26704=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-dysqqm=""
@@ -668,7 +571,7 @@ exports[`Storyshots Radio labels 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -677,18 +580,18 @@ exports[`Storyshots Radio labels 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="labels"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -698,11 +601,15 @@ exports[`Storyshots Radio labels 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -711,6 +618,7 @@ exports[`Storyshots Radio labels 1`] = `
             <div
               aria-checked={true}
               data-css-1olif27=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             >
@@ -721,12 +629,11 @@ exports[`Storyshots Radio labels 1`] = `
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="labels"
-          onBlur={[Function]}
+          checked={true}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -736,11 +643,15 @@ exports[`Storyshots Radio labels 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -749,18 +660,18 @@ exports[`Storyshots Radio labels 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="labels"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -790,7 +701,10 @@ exports[`Storyshots Radio one selected 1`] = `
 >
   <div
     data-css-1a26704=""
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="radiogroup"
+    tabIndex={0}
   >
     <div
       data-css-xp79s5=""
@@ -799,7 +713,7 @@ exports[`Storyshots Radio one selected 1`] = `
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -808,18 +722,18 @@ exports[`Storyshots Radio one selected 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="one selected"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="red"
         />
@@ -829,11 +743,15 @@ exports[`Storyshots Radio one selected 1`] = `
           Red
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -842,6 +760,7 @@ exports[`Storyshots Radio one selected 1`] = `
             <div
               aria-checked={true}
               data-css-1olif27=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             >
@@ -852,12 +771,11 @@ exports[`Storyshots Radio one selected 1`] = `
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="one selected"
-          onBlur={[Function]}
+          checked={true}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="green"
         />
@@ -867,11 +785,15 @@ exports[`Storyshots Radio one selected 1`] = `
           Green
         </div>
       </label>
+    </div>
+    <div
+      data-css-xp79s5=""
+    >
       <label
         data-css-kn3wr0=""
       >
         <div
-          data-css-1lxv0yd=""
+          data-css-1gbdc34=""
         >
           <div
             data-css-1lu7sfl=""
@@ -880,18 +802,18 @@ exports[`Storyshots Radio one selected 1`] = `
             <div
               aria-checked={false}
               data-css-1wbxh41=""
+              onFocus={[Function]}
               role="radio"
               tabIndex="-1"
             />
           </div>
         </div>
         <input
-          data-css-fplhjw=""
-          name="one selected"
-          onBlur={[Function]}
+          checked={false}
+          data-css-gyrv08=""
           onClick={[Function]}
-          onFocus={[Function]}
           readOnly={true}
+          tabIndex="-1"
           type="radio"
           value="blue"
         />
@@ -905,3 +827,153 @@ exports[`Storyshots Radio one selected 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots Radio state demo 1`] = `
+<div
+  style={
+    Object {
+      "padding": "24px",
+    }
+  }
+>
+  <div>
+    <div
+      style={
+        Object {
+          "color": "rgba(255, 255, 255, 0.95)",
+        }
+      }
+    >
+      Selected: 
+      red
+    </div>
+    <div
+      data-css-1a26704=""
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onSelect={[Function]}
+      role="radiogroup"
+      tabIndex={0}
+    >
+      <div
+        data-css-xp79s5=""
+      >
+        <label
+          data-css-kn3wr0=""
+        >
+          <div
+            data-css-1gbdc34=""
+          >
+            <div
+              data-css-1lu7sfl=""
+              data-css-iwspcj=""
+            >
+              <div
+                aria-checked={true}
+                data-css-1olif27=""
+                onFocus={[Function]}
+                role="radio"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-ppl1jg=""
+                />
+              </div>
+            </div>
+          </div>
+          <input
+            checked={true}
+            data-css-gyrv08=""
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex="-1"
+            type="radio"
+            value="red"
+          />
+          <div
+            data-css-nrxvu5=""
+          >
+            Red
+          </div>
+        </label>
+      </div>
+      <div
+        data-css-xp79s5=""
+      >
+        <label
+          data-css-kn3wr0=""
+        >
+          <div
+            data-css-1gbdc34=""
+          >
+            <div
+              data-css-1lu7sfl=""
+              data-css-iwspcj=""
+            >
+              <div
+                aria-checked={false}
+                data-css-1wbxh41=""
+                onFocus={[Function]}
+                role="radio"
+                tabIndex="-1"
+              />
+            </div>
+          </div>
+          <input
+            checked={false}
+            data-css-gyrv08=""
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex="-1"
+            type="radio"
+            value="green"
+          />
+          <div
+            data-css-nrxvu5=""
+          >
+            Green
+          </div>
+        </label>
+      </div>
+      <div
+        data-css-xp79s5=""
+      >
+        <label
+          data-css-kn3wr0=""
+        >
+          <div
+            data-css-1gbdc34=""
+          >
+            <div
+              data-css-1lu7sfl=""
+              data-css-iwspcj=""
+            >
+              <div
+                aria-checked={false}
+                data-css-1wbxh41=""
+                onFocus={[Function]}
+                role="radio"
+                tabIndex="-1"
+              />
+            </div>
+          </div>
+          <input
+            checked={false}
+            data-css-gyrv08=""
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex="-1"
+            type="radio"
+            value="blue"
+          />
+          <div
+            data-css-nrxvu5=""
+          >
+            Blue
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/radio/src/react/__specs__/index.spec.js b/packages/radio/src/react/__specs__/index.spec.js
index d7329efdb8..348f0d2d2d 100644
--- a/packages/radio/src/react/__specs__/index.spec.js
+++ b/packages/radio/src/react/__specs__/index.spec.js
@@ -9,7 +9,7 @@ describe('Radio', () => {
     const button = React.createRef()
 
     render(
-      <Radio.Group ref={group} name="forwards refs">
+      <Radio.Group ref={group}>
         <Radio.Button value="red" label="Red" />
         <Radio.Button ref={button} value="green" label="Green" />
         <Radio.Button value="blue" label="Blue" />
@@ -19,16 +19,16 @@ describe('Radio', () => {
     expect(group.current).not.toBeNull()
     expect(button.current).not.toBeNull()
   })
-  it('controlled: fires event once', () => {
+  it('fires event once', () => {
     const spy = jest.fn()
     const { container } = render(
-      <Radio.Group onChange={spy} value="green" name="fires event once">
+      <Radio.Group onSelect={spy}>
         <Radio.Button value="red" label="Red" />
         <Radio.Button value="green" label="Green" />
         <Radio.Button value="blue" label="Blue" />
       </Radio.Group>
     )
-    const radio = container.querySelector('input')
+    const radio = container.querySelector('label')
     fireEvent.click(radio)
     expect(spy).toHaveBeenCalledTimes(1)
   })
diff --git a/packages/radio/src/react/__stories__/index.story.js b/packages/radio/src/react/__stories__/index.story.js
index 5225d068d7..93bf70dc63 100644
--- a/packages/radio/src/react/__stories__/index.story.js
+++ b/packages/radio/src/react/__stories__/index.story.js
@@ -11,14 +11,14 @@ const PaddingDecorator = storyFn => (
 storiesOf('Radio', module)
   .addDecorator(PaddingDecorator)
   .add('default', _ => (
-    <Radio.Group name="default">
+    <Radio.Group>
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
       <Radio.Button value="blue" label="Blue" />
     </Radio.Group>
   ))
   .add('one selected', _ => (
-    <Radio.Group value="green" name="one selected">
+    <Radio.Group value="green">
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
       <Radio.Button value="blue" label="Blue" />
@@ -29,7 +29,6 @@ storiesOf('Radio', module)
       value="green"
       label="Colors"
       subLabel="These colors are very primary"
-      name="labels"
     >
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
@@ -37,31 +36,31 @@ storiesOf('Radio', module)
     </Radio.Group>
   ))
   .add('error', _ => (
-    <Radio.Group value="green" error name="error">
+    <Radio.Group value="green" error>
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
       <Radio.Button value="blue" label="Blue" />
     </Radio.Group>
   ))
   .add('disabled', _ => (
-    <Radio.Group value="green" disabled name="disabled">
+    <Radio.Group value="green" disabled>
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
       <Radio.Button value="blue" label="Blue" />
     </Radio.Group>
   ))
   .add('disabled & error', _ => (
-    <Radio.Group value="green" disabled error name="disabled & error">
+    <Radio.Group value="green" disabled error>
       <Radio.Button value="red" label="Red" />
       <Radio.Button value="green" label="Green" />
       <Radio.Button value="blue" label="Blue" />
     </Radio.Group>
   ))
-  .add('controlled', _ => {
+  .add('state demo', _ => {
     function StateDemo() {
       const [value, setValue] = React.useState('red')
 
-      function handleChange(evt, nextValue) {
+      function handleSelect(evt, nextValue) {
         setValue(nextValue)
       }
 
@@ -69,10 +68,8 @@ storiesOf('Radio', module)
         <div>
           <div style={{ color: core.colorsTextIcon.highOnDark }}>
             Selected: {value}
-            <br />
-            <button onClick={() => handleChange(1, 'blue')}>blue</button>
           </div>
-          <Radio.Group value={value} onChange={handleChange} name="controlled">
+          <Radio.Group value={value} onSelect={handleSelect}>
             <Radio.Button value="red" label="Red" />
             <Radio.Button value="green" label="Green" />
             <Radio.Button value="blue" label="Blue" />
diff --git a/packages/radio/src/react/button.js b/packages/radio/src/react/button.js
index dfdb4c46e9..beb025ac1a 100644
--- a/packages/radio/src/react/button.js
+++ b/packages/radio/src/react/button.js
@@ -1,24 +1,24 @@
 import { compose, css } from 'glamor'
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React from 'react'
 
 import filterReactProps from '@pluralsight/ps-design-system-filter-react-props'
 import Halo from '@pluralsight/ps-design-system-halo'
 import { useTheme } from '@pluralsight/ps-design-system-theme'
-import { combineFns } from '@pluralsight/ps-design-system-util'
-import { useRadioContext } from './context.js'
+
 import stylesheet from '../css/index.js'
 
 const styles = {
   button: () => css(stylesheet['.psds-radio-button']),
-  circle: (themeName, checked) =>
+  circle: (themeName, { checked }) =>
     compose(
       css(stylesheet['.psds-radio-button__circle']),
       css(stylesheet[`.psds-radio-button__circle.psds-theme--${themeName}`]),
       checked && css(stylesheet['.psds-radio-button__circle--checked'])
     ),
   circleOuter: () => css(stylesheet['.psds-radio-button__circle-outer']),
-  circleInner: () => css(stylesheet['.psds-radio-button__circle-inner']),
+  circleInner: (themeName, { checked }) =>
+    css(stylesheet['.psds-radio-button__circle-inner']),
   halo: () => css(stylesheet['.psds-radio-button__halo']),
   input: () => css(stylesheet['.psds-radio-button__input']),
   label: themeName =>
@@ -28,80 +28,86 @@ const styles = {
     )
 }
 
-const isChecked = (a, b) => a === b
-
-const Button = React.forwardRef(({ value, label, ...props }, forwardedRef) => {
+const Button = React.forwardRef((props, forwardedRef) => {
   const themeName = useTheme()
-  const { checkedValue, onChange, disabled, error, name } = useRadioContext()
+
   const ref = React.useRef()
   React.useImperativeHandle(forwardedRef, () => ref.current)
 
   const circleRef = React.useRef()
-  const [isFocused, setFocus] = useState(false)
 
-  const handleFocus = e => {
-    if (disabled) return
-    combineFns(() => setFocus(true), props.onFocus)(e)
-  }
-  const handleBlur = e => {
-    if (disabled) return
-    combineFns(props.onFocus, () => setFocus(false))(e)
-  }
-  function handleClick(e) {
-    const value = e.target.value
-    combineFns(onChange, props.onClick)(e, value)
-    ref.current.focus()
+  function handleClick(evt) {
+    const value = evt.target.value
+    props._onClick(evt, value)
+
+    if (isFunction(props.onClick)) props.onClick(evt, value)
+    props._onFocus(evt, value)
+
+    circleRef.current.focus()
   }
-  const checked = isChecked(value, checkedValue)
+
+  const { _disabled, _error, _isFocused, _onFocus, _name } = props
+
   return (
-    <label {...styles.button()}>
+    <label {...styles.button(themeName, props)}>
       <div {...styles.circleOuter()}>
         <Halo
-          error={error}
+          error={_error}
           inline
           shape={Halo.shapes.pill}
-          visibleOnFocus={!disabled}
-          visible={isFocused}
+          visibleOnFocus={!_disabled}
+          visible={_isFocused}
           {...styles.halo()}
         >
           <div
             role="radio"
-            aria-checked={checked}
+            aria-checked={props.checked}
             tabIndex="-1"
+            onFocus={_disabled ? null : _ => _onFocus(props.value)}
             ref={circleRef}
-            {...styles.circle(themeName, checked)}
+            {...styles.circle(themeName, props)}
           >
-            {checked && <div {...styles.circleInner()} />}
+            {props.checked && <div {...styles.circleInner(themeName, props)} />}
           </div>
         </Halo>
       </div>
 
       <input
         {...filterReactProps(props, { tagName: 'input' })}
-        onClick={disabled ? null : handleClick}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        onClick={_disabled ? null : handleClick}
+        tabIndex="-1"
         type="radio"
         readOnly
-        name={name}
+        name={_name}
         ref={ref}
-        value={value}
         {...styles.input()}
       />
 
-      <div {...styles.label(themeName)}>{label}</div>
+      <div {...styles.label(themeName)}>{props.label}</div>
     </label>
   )
 })
 
-Button.displayName = 'Radio.Button'
-
 Button.propTypes = {
+  _disabled: PropTypes.bool,
+  _error: PropTypes.bool,
+  _isFocused: PropTypes.bool,
+  _name: PropTypes.string,
+  _onClick: PropTypes.func,
+  _onFocus: PropTypes.func,
+
+  checked: PropTypes.bool,
   label: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
   onClick: PropTypes.func,
-  onFocus: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 }
 
+Button.defaultProps = {
+  checked: false
+}
+
 export default Button
+
+function isFunction(fn) {
+  return typeof fn === 'function'
+}
diff --git a/packages/radio/src/react/group.js b/packages/radio/src/react/group.js
index 0038da682b..a956e28271 100644
--- a/packages/radio/src/react/group.js
+++ b/packages/radio/src/react/group.js
@@ -3,13 +3,12 @@ import { useTheme } from '@pluralsight/ps-design-system-theme'
 import { css } from 'glamor'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { RadioContext } from './context.js'
 
 import stylesheet from '../css/index.js'
 
 const styles = {
   buttonContainer: _ => css(stylesheet['.psds-radio-group__button-container']),
-  group: disabled =>
+  group: ({ disabled }) =>
     css(
       stylesheet['.psds-radio-group'],
       disabled && stylesheet['.psds-radio-group--disabled']
@@ -26,73 +25,134 @@ const styles = {
     )
 }
 
-const useValue = ({ value, onChange }) => {
-  const [_value, setValue] = React.useState(value)
-  return {
-    ...(value !== undefined && onChange !== undefined
-      ? { checkedValue: value, onChange }
-      : { checkedValue: _value, onChange: (evt, val) => setValue(val) })
+const Group = React.forwardRef((props, forwardedRef) => {
+  const ref = React.useRef()
+  const themeName = useTheme()
+  React.useImperativeHandle(forwardedRef, () => ref.current)
+
+  const buttons = React.useMemo(_ => React.Children.toArray(props.children), [
+    props.children
+  ])
+
+  const [value, setValue] = React.useState(props.value)
+  const [focusValue, setFocusValue] = React.useState()
+
+  React.useEffect(() => {
+    setValue(value)
+  }, [props.value, value])
+
+  const handleKeyDown = combineFns(evt => {
+    if (props.disabled) return
+
+    if (evt.key === 'Enter' || evt.key === ' ') {
+      const nextValue = focusValue
+      setValue(nextValue)
+
+      if (isFunction(props.onSelect)) props.onSelect(evt, nextValue)
+    } else if (evt.key === 'ArrowDown') {
+      handleKeyboardNav(evt, 1)
+    } else if (evt.key === 'ArrowUp') {
+      handleKeyboardNav(evt, -1)
+    } else if (evt.key === 'Tab') {
+      setFocusValue(null)
+    }
+  }, props.onKeyDown)
+
+  function handleKeyboardNav(evt, indexDelta) {
+    evt.stopPropagation()
+    evt.preventDefault()
+
+    const focusIndex = buttons.findIndex(b => b.props.value === focusValue)
+    const newFocusIndex =
+      focusIndex + indexDelta > buttons.length - 1
+        ? focusIndex
+        : focusIndex + indexDelta < 0
+        ? 0
+        : focusIndex + indexDelta
+
+    const nextFocusValue = buttons[newFocusIndex].props.value
+    setFocusValue(nextFocusValue)
   }
-}
 
-const Group = React.forwardRef(
-  (
-    {
-      children,
-      disabled,
-      error,
-      label,
-      name,
-      onChange,
-      subLabel,
-      value,
-      ...rest
-    },
-    ref
-  ) => {
-    const themeName = useTheme()
-    return (
-      <div
-        {...styles.group(disabled)}
-        {...filterReactProps(rest)}
-        ref={ref}
-        role="radiogroup"
-      >
-        {label && <div {...styles.label(themeName)}>{label}</div>}
-        <div {...styles.buttonContainer()}>
-          <RadioContext.Provider
-            value={{
-              disabled,
-              error,
-              name,
-              ...useValue({ value, onChange })
-            }}
-          >
-            {children}
-          </RadioContext.Provider>
-        </div>
-        {subLabel && <div {...styles.subLabel(themeName)}>{subLabel}</div>}
-      </div>
-    )
+  function handleButtonFocus(evt, focusValue) {
+    setFocusValue(focusValue)
   }
-)
 
-Group.displayName = 'Radio.Group'
+  const handleFocus = combineFns(evt => {
+    if (props.disabled || focusValue) return
+
+    const defaultFocusValue = buttons[0].props.value
+    setFocusValue(defaultFocusValue)
+  }, props.onFocus)
+
+  const handleSelect = combineFns((vt, nextValue) => {
+    setFocusValue(nextValue)
+    setValue(nextValue)
+  }, props.onSelect)
+
+  return (
+    <div
+      {...styles.group(props)}
+      {...filterReactProps(props)}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      role="radiogroup"
+    >
+      {props.label && <div {...styles.label(themeName)}>{props.label}</div>}
+
+      {React.Children.map(props.children, (child, i) => {
+        const childValue = child.props.value
+
+        return (
+          <div {...styles.buttonContainer()}>
+            {React.cloneElement(child, {
+              _disabled: props.disabled,
+              _error: props.error,
+              _isFocused: childValue === focusValue,
+              _name: props.name,
+              _onClick: handleSelect,
+              _onFocus: handleButtonFocus,
+
+              checked: value === childValue,
+              tabIndex: i === 0 && childValue > -1 ? childValue : 0
+            })}
+          </div>
+        )
+      })}
+
+      {props.subLabel && (
+        <div {...styles.subLabel(themeName)}>{props.subLabel}</div>
+      )}
+    </div>
+  )
+})
 
 Group.propTypes = {
   children: PropTypes.node, // TODO: children only Radio.Button
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   label: PropTypes.node,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
+  name: PropTypes.string,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSelect: PropTypes.func,
   subLabel: PropTypes.node,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }
 
 Group.defaultProps = {
   disabled: false,
-  error: false
+  error: false,
+  tabIndex: 0
 }
 
 export default Group
+
+function combineFns(...fns) {
+  return (...args) => fns.filter(isFunction).forEach(fn => fn(...args))
+}
+
+function isFunction(fn) {
+  return typeof fn === 'function'
+}