From 542ed5bb36a87ec73d6003f92d0a85b44a3130ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 11 Jun 2026 11:15:19 +0200
Subject: [PATCH] Add validation examples for interactive inputs

---
 components/interactive-elements.html          | 33 +++++++++++++++++++
 styles/10-components-interactive-elements.css | 24 ++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 2e294ca..15b6d08 100644
--- a/components/interactive-elements.html
+++ b/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">
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 9c89d3f..80176fe 100644
--- a/styles/10-components-interactive-elements.css
+++ b/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;
     }