From e4a2872b17b83c7e3458f159dec82b942bf56a21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 10:31:30 +0200
Subject: [PATCH] =?UTF-8?q?Checkbox/Radio:=20Pattern-Label=20immer=20als?=
 =?UTF-8?q?=20eigene=20Zeile=20=C3=BCber=20Controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/interactive-elements.html | 46 +++++++++++++---------------
 styleguide.css                       |  7 +++++
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 74587a9..7089000 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -399,7 +399,8 @@
         <span>Standard Checkbox</span>
       </label>
 
-      <div class="sg-activatable-row">
+      <div class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" id="component-checkbox-activatable" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
         <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-checkbox-activatable">
           <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
             <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -407,13 +408,10 @@
             <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
           </span>
         </button>
-        <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" id="component-checkbox-activatable" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
-          <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
-          <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
-            <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
-          </button>
-          <span>Option wählbar</span>
-        </label>
+        <button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
+          <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+        </button>
+        <span>Option wählbar</span>
       </div>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
@@ -447,7 +445,8 @@
         <span>Standard Radio</span>
       </label>
 
-      <div class="sg-activatable-row">
+      <div class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" id="component-radio-activatable" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
+        <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
         <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-radio-activatable">
           <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
             <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -455,23 +454,20 @@
             <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
           </span>
         </button>
-        <label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" id="component-radio-activatable" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
-          <span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
-          <span class="sg-radio-activatable-group__choices">
-            <span class="sg-radio-activatable-group__choice">
-              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen">
-                <span class="sg-radio-field__mark" aria-hidden="true"></span>
-              </button>
-              <span>Option 1</span>
-            </span>
-            <span class="sg-radio-activatable-group__choice">
-              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen">
-                <span class="sg-radio-field__mark" aria-hidden="true"></span>
-              </button>
-              <span>Option 2</span>
-            </span>
+        <span class="sg-radio-activatable-group__choices">
+          <span class="sg-radio-activatable-group__choice">
+            <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen">
+              <span class="sg-radio-field__mark" aria-hidden="true"></span>
+            </button>
+            <span>Option 1</span>
           </span>
-        </label>
+          <span class="sg-radio-activatable-group__choice">
+            <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen">
+              <span class="sg-radio-field__mark" aria-hidden="true"></span>
+            </button>
+            <span>Option 2</span>
+          </span>
+        </span>
       </div>
 
       <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
diff --git a/styleguide.css b/styleguide.css
index 5c93391..cb69f92 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1539,6 +1539,13 @@ section + section {
       align-items: center;
       gap: var(--spacing-small);
       color: var(--text-control-default);
+      flex-wrap: wrap;
+    }
+
+    #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label,
+    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
+      flex: 0 0 100%;
+      margin-bottom: var(--spacing-small);
     }
 
     .sg-checkbox-field-option--inactive-selectable {