From e7c43e7a47cb5ff9b44c114291c33d2e8d4768d4 Mon Sep 17 00:00:00 2001
From: Ethan Girouard <ethan@girouard.com>
Date: Wed, 8 Jul 2026 20:44:38 -0400
Subject: [PATCH] Allow icon in form input component

Misc style adjustments
---
 src/components/form_input.rs | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/form_input.rs b/src/components/form_input.rs
index 36c3c11..09836e8 100644
--- a/src/components/form_input.rs
+++ b/src/components/form_input.rs
@@ -9,24 +9,30 @@ pub fn FormInput(
     #[props(default)] name: Option<String>,
     #[props(default)] required: bool,
     #[props(default)] r#type: String,
+    children: Element,
 ) -> Element {
     let name = name.unwrap_or(label.to_lowercase());
 
     rsx! {
         div {
-            class: "group",
+            class: "group/field",
 
-            label {
-                class: "label opacity-0 not-group-has-placeholder-shown:opacity-100 transition-opacity pl-2",
+            p {
+                class: "opacity-0 not-group-has-placeholder-shown/field:opacity-70 transition-opacity pl-2",
                 {label.clone()}
             }
 
-            input {
-                class: "input",
-                name,
-                required,
-                r#type,
-                placeholder: label,
+            label {
+                class: "input w-full",
+
+                {children}
+
+                input {
+                    name,
+                    required,
+                    r#type,
+                    placeholder: label,
+                }
             }
         }
     }