From 17dfbf324a8f4af70079093e7df719656759dcde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 07:20:17 +0200
Subject: [PATCH] feat(components): add labels and dual options to radio
 single-choice

---
 components/interactive-elements.html | 62 +++++++++++++++++-----------
 styleguide.css                       | 34 +++++++++++++++
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index a1d1008..08da3aa 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -451,33 +451,49 @@
     <div class="sg-form-preview-area sg-checkbox-field-list">
       <label class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
         <span class="sg-state-example__label sg-table-label">Komponente normal</span>
-        <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Standard Radio">
-          <span class="sg-radio-field__mark" aria-hidden="true"></span>
-        </button>
-        <span>Standard Radio</span>
+        <span class="sg-radio-field-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-radio-activatable-group__choices">
+            <span class="sg-radio-activatable-group__choice">
+              <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen">
+                <span class="sg-radio-field__mark" aria-hidden="true"></span>
+              </button>
+              <span>Radio 1</span>
+            </span>
+            <span class="sg-radio-activatable-group__choice">
+              <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 2 wählen">
+                <span class="sg-radio-field__mark" aria-hidden="true"></span>
+              </button>
+              <span>Radio 2</span>
+            </span>
+          </span>
+        </span>
       </label>
 
       <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>
-            <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
-            <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
-          </span>
-        </button>
-        <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 class="sg-radio-field-row">
+          <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>
+              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+              <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+            </span>
+          </button>
+          <span class="sg-label">Label</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>
         </span>
       </div>
diff --git a/styleguide.css b/styleguide.css
index 6f2b351..73201cc 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1673,6 +1673,40 @@ section + section {
       gap: var(--spacing-small);
     }
 
+    #component-radio-field .sg-checkbox-field-option {
+      display: grid;
+      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
+      align-items: center;
+      column-gap: var(--spacing-small);
+      width: 100%;
+    }
+
+    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
+      grid-column: 1;
+      margin-bottom: 0;
+    }
+
+    #component-radio-field .sg-radio-field-row {
+      grid-column: 2;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small);
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+
+    @media (max-width: 48rem) {
+      #component-radio-field .sg-checkbox-field-option {
+        grid-template-columns: 1fr;
+        align-items: start;
+      }
+
+      #component-radio-field .sg-checkbox-field-option .sg-state-example__label,
+      #component-radio-field .sg-radio-field-row {
+        grid-column: 1;
+      }
+    }
+
     .sg-checkbox-field-option--disabled {
       color: var(--text-control-disabled);
       opacity: var(--disabled-opacity);