WIP

src/Input.jsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./Input.module.css";
+
+export function FieldRow({ children, rightAlign, className, ...rest }) {
+  return (
+    <div
+      className={classNames(
+        styles.fieldRow,
+        { [styles.rightAlign]: rightAlign },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Field({ children, className, ...rest }) {
+  return <div className={classNames(styles.field, className)}>{children}</div>;
+}
+
+export const InputField = forwardRef(
+  ({ id, label, className, ...rest }, ref) => {
+    return (
+      <Field>
+        <input id={id} {...rest} ref={ref} />
+        <label for={id}>{label}</label>
+      </Field>
+    );
+  }
+);
+
+export const Button = forwardRef(({ className, children, ...rest }, ref) => {
+  return (
+    <button
+      className={classNames(styles.button, className)}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});