postgresml · levkk · Apr 9, 2024 · Apr 9, 2024
diff --git a/pgml-dashboard/src/components/inputs/text/input/input.scss b/pgml-dashboard/src/components/inputs/text/input/input.scss
@@ -1,7 +1,13 @@
 div[data-controller="inputs-text-input"] {
+    --bs-danger: #{$peach-shade-100};
+
     span.material-symbols-outlined {
         margin-left: -40px;
         color: #{$slate-shade-100};
+
+        &.is-invalid {
+            color: var(--bs-danger);
+        }
     }
 
     input.form-control {
@@ -12,4 +18,10 @@ div[data-controller="inputs-text-input"] {
     label.form-label {
         font-weight: #{$font-weight-normal};
     }
+
+    p {
+        small {
+            color: var(--bs-danger);
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/input/mod.rs b/pgml-dashboard/src/components/inputs/text/input/mod.rs
@@ -16,6 +16,7 @@ pub struct Input {
     autocomplete: bool,
     value: String,
     required: bool,
+    error: Option<String>,
 }
 
 impl Input {
@@ -38,6 +39,7 @@ impl Input {
             autocomplete: false,
             value: "".to_string(),
             required: false,
+            error: None,
         }
     }
 
@@ -90,6 +92,11 @@ impl Input {
         self.required = true;
         self
     }
+
+    pub fn error(mut self, error: Option<impl ToString>) -> Self {
+        self.error = error.map(|e| e.to_string());
+        self
+    }
 }
 
 component!(Input);
diff --git a/pgml-dashboard/src/components/inputs/text/input/template.html b/pgml-dashboard/src/components/inputs/text/input/template.html
@@ -1,3 +1,9 @@
+<% let (input_classes, icon_classes) = if error.is_some() {
+  ("form-control is-invalid", "material-symbols-outlined is-invalid")
+} else {
+  ("form-control", "material-symbols-outlined")
+};
+%>
 <div data-controller="inputs-text-input">
   <% if let Some(label) = label { %>
     <label class="form-label" for="<%= id %>"><%+ label %></label>
@@ -8,7 +14,7 @@
       id="<%= id %>"
       type="<%= type_ %>"
       name="<%= name %>"
-      class="form-control"
+      class="<%= input_classes %>"
       placeholder="<%= placeholder %>"
       data-action="<%= input_actions %>"
       autocomplete="<%= autocomplete %>"
@@ -20,10 +26,15 @@
 
     <% if let Some(icon) = icon { %>
       <span
-        class="material-symbols-outlined"
+        class="<%= icon_classes %>"
         data-action="<%= icon_actions %>">
         <%= icon %>
       </span>
     <% } %>
   </div>
+  <% if let Some(error) = error { %>
+  <p class="mt-1 mb-0">
+    <small><%= error %></small>
+  </p>
+  <% } %>
 </div>
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
@@ -58,6 +58,16 @@
       .type_("text") %>
   </div>
 
+  <div class="py-5">
+    <%+ Input::new()
+      .label("What is your name?".into())
+      .icon("person")
+      .placeholder("Enter your name")
+      .name("name")
+      .type_("text")
+      .error(Some("Your name is not valid.")) %>
+  </div>
+
   <div class="py-5">
     <%+ Search::new(SearchOptions {
       name: "Model search".into(),