feat(components): add labels and dual options to radio single-choice

components/interactive-elements.html

@@ -451,14 +451,28 @@
     <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-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>Standard Radio</span>
+              <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>
+        <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>
@@ -466,6 +480,7 @@
               <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">
@@ -480,6 +495,7 @@
               <span>Option 2</span>
             </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">

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);