diff --git a/web/components/checkbox.css b/web/components/checkbox.css
new file mode 100644
--- /dev/null
+++ b/web/components/checkbox.css
@@ -0,0 +1,25 @@
+.checkbox {
+  appearance: none;
+  background-color: transparent;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--radio-border);
+  border-radius: 3.6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border-radius: 2.4px;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  background-color: var(--radio-color);
+}
+
+.checkbox:checked::before {
+  transform: scale(1);
+}
diff --git a/web/components/checkbox.react.js b/web/components/checkbox.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/checkbox.react.js
@@ -0,0 +1,23 @@
+// @flow
+import * as React from 'react';
+
+import css from './checkbox.css';
+
+type Props = {
+  +checked: boolean,
+  +readOnly?: boolean,
+};
+
+function Checkbox(props: Props): React.Node {
+  const { checked, readOnly = true } = props;
+  return (
+    <input
+      className={css.checkbox}
+      type="checkbox"
+      checked={checked}
+      readOnly={readOnly}
+    />
+  );
+}
+
+export default Checkbox;
diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css
--- a/web/components/enum-settings-option.css
+++ b/web/components/enum-settings-option.css
@@ -3,6 +3,7 @@
   padding: 16px 32px 16px 16px;
   align-items: center;
   border-radius: 8px;
+  cursor: pointer;
 }
 
 div.optionContainerSelected {
@@ -13,6 +14,18 @@
   margin-right: 24px;
 }
 
+div.optionIconTop {
+  align-self: flex-start;
+}
+
+div.optionIconCenter {
+  align-self: center;
+}
+
+div.optionIconBottom {
+  align-self: flex-end;
+}
+
 div.optionContent {
   display: flex;
   flex-direction: column;
diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js
--- a/web/components/enum-settings-option.react.js
+++ b/web/components/enum-settings-option.react.js
@@ -3,15 +3,27 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
+import Checkbox from './checkbox.react';
 import EnumSettingsOptionInfo from './enum-settings-option-info.react.js';
 import css from './enum-settings-option.css';
 import Radio from './radio.react';
 
+const iconPositionClassnames = {
+  top: css.optionIconTop,
+  center: css.optionIconCenter,
+  bottom: css.optionIconBottom,
+};
+
+type InputType = 'radio' | 'checkbox';
+type IconPosition = $Keys<typeof iconPositionClassnames>;
+
 type Props = {
   +selected: boolean,
   +onSelect: () => void,
   +icon: React.Node,
   +title: string,
+  +type?: InputType,
+  +iconPosition?: IconPosition,
   +statements: $ReadOnlyArray<{
     +statement: string,
     +isStatementValid: boolean,
@@ -20,7 +32,15 @@
 };
 
 function EnumSettingsOption(props: Props): React.Node {
-  const { icon, title, statements, selected, onSelect } = props;
+  const {
+    icon,
+    title,
+    statements,
+    selected,
+    onSelect,
+    type = 'radio',
+    iconPosition = 'center',
+  } = props;
 
   const descriptionItems = React.useMemo(
     () =>
@@ -39,6 +59,16 @@
     [selected, statements],
   );
 
+  const inputIcon = React.useMemo(
+    () =>
+      type === 'checkbox' ? (
+        <Checkbox checked={selected} />
+      ) : (
+        <Radio checked={selected} />
+      ),
+    [type, selected],
+  );
+
   const optionContainerClasses = React.useMemo(
     () =>
       classnames(css.optionContainer, {
@@ -46,14 +76,20 @@
       }),
     [selected],
   );
+
+  const optionIconClasses = React.useMemo(
+    () => classnames(css.optionIcon, iconPositionClassnames[iconPosition]),
+    [iconPosition],
+  );
+
   return (
     <div className={optionContainerClasses} onClick={onSelect}>
-      <div className={css.optionIcon}>{icon}</div>
+      <div className={optionIconClasses}>{icon}</div>
       <div className={css.optionContent}>
         <div className={css.optionTitle}>{title}</div>
         <div className={css.optionDescription}>{descriptionItems}</div>
       </div>
-      <Radio checked={selected} />
+      {inputIcon}
     </div>
   );
 }