From 4bacbfd1abe00addfca6420f5f63d6b3f2ea6049 Mon Sep 17 00:00:00 2001
From: Ethan Girouard <ethan@girouard.com>
Date: Tue, 30 Jun 2026 21:29:20 -0400
Subject: [PATCH] Add FormInput component

---
 src/components/form_input.rs | 33 +++++++++++++++++++++++++++++++++
 src/components/mod.rs        |  1 +
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/form_input.rs

diff --git a/src/components/form_input.rs b/src/components/form_input.rs
new file mode 100644
index 0000000..36c3c11
--- /dev/null
+++ b/src/components/form_input.rs
@@ -0,0 +1,33 @@
+use dioxus::prelude::*;
+
+/// A simple styled input box
+#[component]
+pub fn FormInput(
+    /// The placeholder text and label. When text is entered in the input, the label is shown above
+    /// the input box.
+    label: String,
+    #[props(default)] name: Option<String>,
+    #[props(default)] required: bool,
+    #[props(default)] r#type: String,
+) -> Element {
+    let name = name.unwrap_or(label.to_lowercase());
+
+    rsx! {
+        div {
+            class: "group",
+
+            label {
+                class: "label opacity-0 not-group-has-placeholder-shown:opacity-100 transition-opacity pl-2",
+                {label.clone()}
+            }
+
+            input {
+                class: "input",
+                name,
+                required,
+                r#type,
+                placeholder: label,
+            }
+        }
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 65405b1..4641996 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1 +1,2 @@
 pub mod footer;
+pub mod form_input;