diff --git a/daily-thought-frontend/src/components/form/BasicField.tsx b/daily-thought-frontend/src/components/form/BasicField.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f099b28e8868e1da3bc820e8086deac041935f9
--- /dev/null
+++ b/daily-thought-frontend/src/components/form/BasicField.tsx
@@ -0,0 +1,43 @@
+import { FC } from "react"
+
+type BasicFieldProps = {
+  name: string,
+  placeholder: string,
+  error?: string | null
+  onChange: (value: string) => void;
+}
+
+const BasicField:FC<BasicFieldProps> = ({
+  name,
+  placeholder,
+  error,
+  onChange
+}) => {
+
+  const handleChange = (value: string) => {
+    onChange(value)
+  }
+
+  return (
+    <div className="mb-3">
+      <label htmlFor={name} className="sr-only">
+        {placeholder}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={name}
+        autoComplete={name}
+        required
+        className={`p-3 relative block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset placeholder:text-gray-400 focus:z-10  sm:text-sm sm:leading-6 ${error ? "ring-c-pink" : "ring-gray-300"}`}
+        placeholder={placeholder}
+        onChange={e => handleChange(e.target.value)}
+      />
+      <p className="text-xs text-c-pink m-1">
+        {error}
+      </p>
+    </div>
+  )
+}
+
+export default BasicField
\ No newline at end of file