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
index cb30894a6..5907a082d 100644
--- a/src/components/radio/Radio.stories.js
+++ b/src/components/radio/Radio.stories.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import Radio from './Radio.js'
+import Radio from './Radio'
 
 const bigPicture = {
   transform: 'scale(5)',
diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
new file mode 100644
index 000000000..b0e06c53c
--- /dev/null
+++ b/src/components/radio/Radio.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+
+interface RadioProps {
+  className?: string
+  label?: React.ReactNode
+  disabled?: boolean
+  checked?: boolean | null
+  onChange?: (checked: boolean) => void
+}
+
+const Radio: React.FC<RadioProps> = ({
+  className = '',
+  label = '',
+  disabled = false,
+  checked = null,
+  onChange = () => {},
+  ...props
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked)
+  }
+
+  return (
+    <label
+      className={`inline-block font-sans ${className} ${
+        !disabled ? 'cursor-pointer' : ''
+      }`}
+      {...props}
+    >
+      <input
+        className='absolute'
+        type='checkbox'
+        checked={checked ?? false}
+        disabled={disabled}
+        onChange={handleChange}
+        aria-checked={checked ?? false}
+        aria-disabled={disabled}
+        role='radio'
+      />
+      <span className='inline-block align-middle rounded-full w-4 h-4 p-1 border-box cursor-pointer'>
+        <span className='block rounded-full w-full h-full opacity-0 bg-aqua' />
+      </span>
+      <span className='align-middle pl-2'>{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..8d4ca2a02 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'
 import ProgressBar from '../../../components/progress-bar/ProgressBar.js'
 import GlyphCopy from '../../../icons/GlyphCopy.js'
 import GlyphTick from '../../../icons/GlyphTick.js'