Input invalid state

docs/assets/scripts/docs.js

@@ -68,6 +68,10 @@ searchInput.addEventListener('input', (event) => {
 });
 const focusSearch = () => setTimeout(() => searchInput.focus(), 50);
 
+// Core: Form
+const invalidInput = document.querySelector('#invalid-input');
+invalidInput.setCustomValidity("Invalid field.");
+
 // Component: Toast
 const toast = document.querySelector('#toast');
 const toggleToast = () => toast.classList.toggle('active');

docs/pages/core/form.md

@@ -253,15 +253,12 @@ Buttons can also be created with several `<input>` and `<button` types:
 
 ### Input states
 
-Input fields can be disabled or their value can be valid or invalid on form submit.
+Input fields can be disabled or their value can be invalid on form submit.
 
 <div class="demo">
   <div class="flex flex-col gap-2 max-w-screen-xs">
     <label>Error
-      <input type="text" placeholder="Wrong Input">
-    </label>
-    <label>Valid
-      <input type="text" placeholder="Valid Input">
+      <input type="text" placeholder="Wrong Input" id="invalid-input">
     </label>
     <label>Disabled
       <input type="text" placeholder="Disabled Input" disabled>
@@ -273,9 +270,6 @@ Input fields can be disabled or their value can be valid or invalid on form subm
 <label>Error
   <input type="text" placeholder="Wrong Input">
 </label>
-<label>Valid
-  <input type="text" placeholder="Valid Input">
-</label>
 <label>Disabled
   <input type="text" placeholder="Disabled Input" disabled>
 </label>

src/core/_form.css

@@ -43,6 +43,9 @@ input, textarea, select {
     cursor: not-allowed;
     background-color: var(--color-bg-muted);
   }
+  &:invalid {
+    box-shadow: var(--color-alert) var(--shadow-border);
+  }
 }
 input[type="text"],
 input[type="password"],