Add FormInput component

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,
+            }
+        }
+    }
+}