diff --git a/assets/js/src/common/form/radio/_stories/radio.tsx b/assets/js/src/common/form/radio/_stories/radio.tsx
new file mode 100644
index 0000000000..30bf5a5640
--- /dev/null
+++ b/assets/js/src/common/form/radio/_stories/radio.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Radio from '../radio';
+import RadioGroup from '../group';
+import Heading from '../../../typography/heading/heading';
+
+export default {
+  title: 'Form',
+  component: Radio,
+};
+
+const options = [
+  { value: 1, label: 'Group option 1' },
+  { value: 2, label: 'Group option 2' },
+];
+
+export const Radios = () => (
+  <>
+    <Heading level={3}>Inline individual radios</Heading>
+    <div>
+      <Radio
+        onChange={action('radio-individual-1')}
+        name="story"
+        value="1"
+      >
+        Option 1
+      </Radio>
+      <Radio
+        onChange={action('radio-individual-2')}
+        name="story"
+        value="2"
+      >
+        Option 2
+      </Radio>
+    </div>
+    <br />
+
+    <Heading level={3}>Full-width individual radios</Heading>
+    <div>
+      <Radio
+        isFullWidth
+        onChange={action('radio-full-individual-1')}
+        name="story-full"
+        value="1"
+      >
+        Option 1
+      </Radio>
+      <Radio
+        isFullWidth
+        onChange={action('radio-full-individual-2')}
+        name="story-full"
+        value="2"
+      >
+        Option 2
+      </Radio>
+    </div>
+    <br />
+
+    <Heading level={3}>Inline group radios</Heading>
+    <RadioGroup
+      defaultValue={1}
+      name="story-group"
+      onChange={action('radio-group')}
+      options={options}
+    />
+    <br />
+
+    <Heading level={3}>Full-width group radios</Heading>
+    <RadioGroup
+      name="story-group-full"
+      onChange={action('radio-group-full')}
+      options={options}
+      isFullWidth
+    />
+  </>
+);