diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
deleted file mode 100644
index 96020aaa8..000000000
--- a/src/components/radio/Radio.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import './Radio.css'
-
-const Radio = ({ className, label, disabled, checked, onChange, ...props }) => {
-  className = `Radio dib sans-serif ${className}`
-  if (!disabled) {
-    className += ' pointer'
-  }
-
-  const change = (event) => {
-    onChange(event.target.checked)
-  }
-
-  return (
-    <label className={className} {...props}>
-      <input className='absolute' type='checkbox' checked={checked} disabled={disabled} onChange={change} />
-      <span className='dib v-mid br-100 w1 h1 pa1 border-box pointer'>
-        <span className='db br-100 w-100 h-100 o-0 bg-aqua'/>
-      </span>
-      <span className='v-mid pl2'>
-        {label}
-      </span>
-    </label>
-  )
-}
-
-Radio.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.node,
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func
-}
-
-Radio.defaultProps = {
-  className: '',
-  label: '',
-  disabled: false,
-  checked: null,
-  onChange: () => {}
-}
-
-export default Radio
diff --git a/src/components/radio/Radio.stories.js b/src/components/radio/Radio.stories.js
deleted file mode 100644
index cb30894a6..000000000
--- a/src/components/radio/Radio.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import { action } from '@storybook/addon-actions'
-import Radio from './Radio.js'
-
-const bigPicture = {
-  transform: 'scale(5)',
-  transformOrigin: 'top left'
-}
-
-/**
- * @type {import('@storybook/react').Meta}
- */
-export default {
-  title: 'Radio',
-  component: Radio
-}
-
-/**
- * @type {import('@storybook/react').StoryFn}
- */
-export const Default = () => (
-    <div>
-        <Radio className="ma2" label="Click me!" onChange={action('Checked')} />
-    </div>
-)
-
-/**
- * @type {import('@storybook/react').StoryFn}
- */
-export const Disabled = () => (
-    <div>
-        <Radio label="Click me!" className="ma2" disabled onChange={action('Checked')} />
-    </div>
-)
-
-/**
- * @type {import('@storybook/react').StoryFn}
- */
-export const Big = () => (
-    <div>
-        <Radio style={bigPicture} label="Click me!" className="ma2" onChange={action('Checked')} />
-    </div>
-)
diff --git a/src/components/radio/Radio.stories.tsx b/src/components/radio/Radio.stories.tsx
new file mode 100644
index 000000000..eb325847c
--- /dev/null
+++ b/src/components/radio/Radio.stories.tsx
@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react'
+import Radio from './Radio.js'
+
+const bigPicture = {
+  transform: 'scale(5)',
+  transformOrigin: 'top left'
+}
+
+const meta: Meta<typeof Radio> = {
+  title: 'Radio',
+  component: Radio
+}
+
+export default meta
+
+export const Default: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio className='ma2' label='Click me!' onChange={action('Checked')} />
+  </div>
+)
+
+export const Disabled: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio label='Click me!' className='ma2' disabled onChange={action('Checked')} />
+  </div>
+)
+
+export const Big: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio style={bigPicture} label='Click me!' className='ma2' onChange={action('Checked')} />
+  </div>
+)
diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
new file mode 100644
index 000000000..652fcfd2d
--- /dev/null
+++ b/src/components/radio/Radio.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import './Radio.css'
+
+interface RadioProps {
+  className?: string
+  label?: React.ReactNode
+  disabled?: boolean
+  checked?: boolean
+  onChange: (checked: boolean) => void
+  [x: string]: any
+}
+
+const Radio: React.FC<RadioProps> = ({ className = '', label = '', disabled = false, checked = false, onChange, ...props }) => {
+  let combinedClassName = `Radio dib sans-serif ${className}`
+  if (!disabled) {
+    combinedClassName += ' pointer'
+  }
+
+  const change = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked)
+  }
+
+  return (
+    <label className={combinedClassName} {...props}>
+      <input className='absolute' type='checkbox' checked={checked} disabled={disabled} onChange={change} />
+      <span className='dib v-mid br-100 w1 h1 pa1 border-box pointer'>
+        <span className='db br-100 w-100 h-100 o-0 bg-aqua'/>
+      </span>
+      <span className='v-mid pl2'>
+        {label}
+      </span>
+    </label>
+  )
+}
+
+export default Radio
diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js
index 79349a82b..f39a807ce 100644
--- a/src/files/modals/publish-modal/PublishModal.js
+++ b/src/files/modals/publish-modal/PublishModal.js
@@ -6,7 +6,7 @@ import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import Icon from '../../../icons/StrokeSpeaker.js'
 import { connect } from 'redux-bundler-react'
-import Radio from '../../../components/radio/Radio.js'
+import Radio from '../../../components/radio/Radio.tsx'
 import ProgressBar from '../../../components/progress-bar/ProgressBar.js'
 import GlyphCopy from '../../../icons/GlyphCopy.js'
 import GlyphTick from '../../../icons/GlyphTick.js'