From b595347f607424884505349c77183a73ad035807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 22 Jun 2026 18:07:31 +0200 Subject: [PATCH] Add invalid states for interactive elements --- components/interactive-elements.html | 79 +++++++++++++++++++ styles/10-components-interactive-elements.css | 6 ++ 2 files changed, 85 insertions(+) diff --git a/components/interactive-elements.html b/components/interactive-elements.html index 54f731a..72e11aa 100644 --- a/components/interactive-elements.html +++ b/components/interactive-elements.html @@ -149,6 +149,46 @@ +
+

form-invalid

+ +
+ Label +
+
+ + +
+
    + + + + + + + + +
  • + Menüpunkt 5 +
    • +
+
+
+ Bitte eine gültige Auswahl treffen. +
+
+
+

Variante aktivierbar

@@ -493,6 +533,19 @@ Option nicht verfügbar + +
+

form-invalid

+
+ + Bitte mindestens eine Option auswählen. +
+
@@ -568,6 +621,32 @@ +
+

form-invalid

+
+ + Bitte eine Option auswählen. +
+
+
Variante ohne Gesamtlabel diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css index 8dde8d5..1a58782 100644 --- a/styles/10-components-interactive-elements.css +++ b/styles/10-components-interactive-elements.css @@ -407,6 +407,12 @@ box-shadow: 0 0 0 1px var(--color-signal-red) inset; } + .sg-pulldown[aria-invalid="true"], + .sg-checkbox-field[aria-invalid="true"], + .sg-radio-field[aria-invalid="true"] { + box-shadow: 0 0 0 1px var(--color-signal-red) inset; + } + .sg-labeled-input-row:has(.sg-input-multi-line) { align-items: flex-start; }