diff --git a/.storybook/main.js b/.storybook/main.js
index 0d9a922c0b..825c759d01 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -25,6 +25,9 @@ module.exports = {
   core: {
     builder: '@storybook/builder-webpack5',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
   webpackFinal: async (config, {configType}) => {
     config.plugins.push(new webpack.ProvidePlugin({$: 'jquery'}));
     config.module.rules.push({
diff --git a/jsapp/js/components/common/checkbox.stories.tsx b/jsapp/js/components/common/checkbox.stories.tsx
index d7b0ddf8ec..f7bd5c4684 100644
--- a/jsapp/js/components/common/checkbox.stories.tsx
+++ b/jsapp/js/components/common/checkbox.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof Checkbox>;
 
 const Template: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} />
+  <Checkbox {...args} onChange={() => {}} />
 );
 
 export const Primary = Template.bind({});
diff --git a/jsapp/js/components/common/radio.stories.tsx b/jsapp/js/components/common/radio.stories.tsx
index 3c82f0a3e1..7e74467f4f 100644
--- a/jsapp/js/components/common/radio.stories.tsx
+++ b/jsapp/js/components/common/radio.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import type {ComponentStory, ComponentMeta} from '@storybook/react';
 import Radio from './radio';
 import type {RadioOption} from './radio';
@@ -29,9 +29,19 @@ export default {
   argTypes: {},
 } as ComponentMeta<typeof Radio>;
 
-const Template: ComponentStory<typeof Radio> = (args) => (
-  <Radio {...args} options={defaultOptions} />
-);
+const Template: ComponentStory<typeof Radio> = (args) => {
+  const [selected, setSelected] = useState('');
+  return (
+    <Radio
+      {...args}
+      selected={selected}
+      onChange={(newSelectedValue) => setSelected(newSelectedValue)}
+      options={defaultOptions}
+    />
+  );
+};
 
 export const Primary = Template.bind({});
-Primary.args = {title: 'Pick your favourite food'};
+Primary.args = {
+  title: 'Pick your favourite food',
+};
diff --git a/package-lock.json b/package-lock.json
index 4438c3080e..86d7839c83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -139,6 +139,7 @@
         "postcss": "^7.0.30",
         "postcss-loader": "^4.2.0",
         "prettier": "^2.7.1",
+        "react-docgen-typescript-plugin": "^1.0.5",
         "react-hot-loader": "3.1.0",
         "react-refresh": "^0.14.0",
         "replace-in-file": "^6.0.0",
@@ -25769,6 +25770,130 @@
         "typescript": ">= 4.3.x"
       }
     },
+    "node_modules/react-docgen-typescript-plugin": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.5.tgz",
+      "integrity": "sha512-Ds6s2ioyIlH45XSfEVMNwRcDkzuff3xQCPxDFOzTc8GEshy+hksas8RYlmV4JEQREI+OGEGybhMCJk3vFbQZNQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "endent": "^2.0.1",
+        "find-cache-dir": "^3.3.1",
+        "flat-cache": "^3.0.4",
+        "micromatch": "^4.0.2",
+        "react-docgen-typescript": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.x",
+        "webpack": ">= 4"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/react-docgen-typescript-plugin/node_modules/tslib": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==",
+      "dev": true
+    },
     "node_modules/react-docgen/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -50952,6 +51077,98 @@
       "dev": true,
       "requires": {}
     },
+    "react-docgen-typescript-plugin": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.5.tgz",
+      "integrity": "sha512-Ds6s2ioyIlH45XSfEVMNwRcDkzuff3xQCPxDFOzTc8GEshy+hksas8RYlmV4JEQREI+OGEGybhMCJk3vFbQZNQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "endent": "^2.0.1",
+        "find-cache-dir": "^3.3.1",
+        "flat-cache": "^3.0.4",
+        "micromatch": "^4.0.2",
+        "react-docgen-typescript": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+          "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+          "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==",
+          "dev": true
+        }
+      }
+    },
     "react-document-title": {
       "version": "2.0.3",
       "requires": {
diff --git a/package.json b/package.json
index b9fa3e266a..fcb2551b5d 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
     "postcss": "^7.0.30",
     "postcss-loader": "^4.2.0",
     "prettier": "^2.7.1",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-hot-loader": "3.1.0",
     "react-refresh": "^0.14.0",
     "replace-in-file": "^6.0.0",