Add validation examples for interactive inputs

components/interactive-elements.html

@@ -330,6 +330,23 @@
         </label>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <label class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-input-validation-stack">
+            <input
+              class="sg-interaction-element sg-input-single-line sg-form-active"
+              type="text"
+              value="Ungültige Eingabe"
+              aria-label="Einzeiliges Eingabefeld mit Validierung"
+              aria-invalid="true"
+            >
+            <span class="sg-form-validation-text">Bitte eine gültige Eingabe machen.</span>
+          </span>
+        </label>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">
@@ -388,6 +405,22 @@
         </label>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <label class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-input-validation-stack">
+            <textarea
+              class="sg-input-multi-line sg-form-active"
+              rows="3"
+              aria-label="Mehrzeiliges Eingabefeld mit Validierung"
+              aria-invalid="true"
+            >Ungültige Eingabe über mehrere Zeilen</textarea>
+            <span class="sg-form-validation-text">Bitte einen längeren Text eingeben.</span>
+          </span>
+        </label>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">

styles/10-components-interactive-elements.css

@@ -377,6 +377,30 @@
       max-width: var(--layout-form-input-field-max-width);
     }
 
+    .sg-input-validation-stack {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      min-width: 0;
+      max-width: var(--layout-form-input-field-max-width);
+    }
+
+    .sg-input-validation-stack .sg-input-single-line,
+    .sg-input-validation-stack .sg-input-multi-line {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .sg-form-validation-text {
+      margin: 0;
+      color: var(--text-vsf-list-card-limit-note);
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-base);
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }