1 files changed, 77 insertions, 0 deletions

diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
new file mode 100644
index 000000000..594ea70e4
--- /dev/null
+++ b/src/components/ui/Radio.tsx
@@ -0,0 +1,77 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+import classnames from 'classnames';
+
+type Props = {
+  field: typeof Field;
+  className: string;
+  focus: boolean;
+  showLabel: boolean;
+};
+
+@observer
+class Radio extends Component<Props> {
+  static defaultProps = {
+    focus: false,
+    showLabel: true,
+  };
+
+  inputElement = null;
+
+  componentDidMount() {
+    if (this.props.focus) {
+      this.focus();
+    }
+  }
+
+  focus() {
+    // @ts-expect-error Object is possibly 'null'.
+    this.inputElement.focus();
+  }
+
+  render() {
+    const { field, className, showLabel } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.name}>
+            {field.label}
+          </label>
+        )}
+        <div className="franz-form__radio-wrapper">
+          {field.options.map(type => (
+            <label
+              key={type.value}
+              htmlFor={`${field.id}-${type.value}`}
+              className={classnames({
+                'franz-form__radio': true,
+                'is-selected': field.value === type.value,
+              })}
+            >
+              <input
+                id={`${field.id}-${type.value}`}
+                type="radio"
+                name="type"
+                value={type.value}
+                onChange={field.onChange}
+                checked={field.value === type.value}
+              />
+              {type.label}
+            </label>
+          ))}
+        </div>
+        {field.error && <div className="franz-form__error">{field.error}</div>}
+      </div>
+    );
+  }
+}
+
+export default Radio;