diff --git a/web/components/radio.css b/web/components/radio.css
new file mode 100644
--- /dev/null
+++ b/web/components/radio.css
@@ -0,0 +1,25 @@
+.radio {
+  appearance: none;
+  background-color: transparent;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--radio-border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.radio::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  background-color: var(--radio-color);
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
diff --git a/web/components/radio.react.js b/web/components/radio.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/radio.react.js
@@ -0,0 +1,15 @@
+// @flow
+import * as React from 'react';
+
+import css from './radio.css';
+
+type Props = {
+  +checked: boolean,
+};
+
+function Radio(props: Props): React.Node {
+  const { checked } = props;
+  return <input className={css.radio} type="radio" checked={checked} />;
+}
+
+export default Radio;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -159,4 +159,6 @@
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
+  --radio-border: var(--shades-black-70);
+  --radio-color: var(--shades-white-60);
 }