From 0f517fd6332f382d2e5ad6cf23bdfdf4f9ac110a Mon Sep 17 00:00:00 2001
From: Stuart Romanek <stuart@apostrophecms.com>
Date: Thu, 23 Oct 2025 15:26:28 -0400
Subject: [PATCH 1/2] buttony radios

---
 .../ui/apos/components/AposInputRadio.vue     | 175 ++++++++++++++----
 .../ui/ui/apos/scss/global/_inputs.scss       |  21 +++
 2 files changed, 159 insertions(+), 37 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
index d59c5df719..279380f47b 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
@@ -7,45 +7,68 @@
     :modifiers="modifiers"
   >
     <template #body>
-      <label
-        v-for="{label, value, tooltip} in choices"
-        :key="value"
-        class="apos-choice-label"
-        :for="getChoiceId(uid, value)"
-        :class="{'apos-choice-label--disabled': field.readOnly}"
+      <div
+        class="apos-radio-wrapper"
+        :class="{'apos-radio-wrapper--buttons': field.buttons }"
       >
-        <input
-          :id="getChoiceId(uid, value)"
-          type="radio"
-          class="apos-sr-only apos-input--choice apos-input--radio"
-          :value="JSON.stringify(value)"
-          :name="field.name"
-          :checked="next === value"
-          tabindex="1"
-          :disabled="field.readOnly"
-          @change="change($event.target.value)"
+        <component
+          :is="field.buttons ? 'button' : 'label'"
+          v-for="{label, value, tooltip, icon} in choices"
+          :key="value"
+          v-apos-tooltip="(field.buttons && !!tooltip) ? $t(tooltip) : null"
+          class="apos-choice-label"
+          :for="getChoiceId(uid, value)"
+          :class="[
+            { 'apos-choice-label--disabled': field.readOnly },
+            { 'apos-choice-label--checked': next === value }
+          ]"
+          tabindex="0"
+          @click="next = value"
+          @keydown.space="next = value"
         >
-        <span
-          class="apos-input-indicator"
-          aria-hidden="true"
-        >
-          <component
-            :is="`${next === value ? 'check-bold-icon' : 'span'}`"
-            v-if="next === value"
-            :size="8"
-          />
-        </span>
-        <span class="apos-choice-label-text">
-          {{ $t(label) }}
-          <AposIndicator
-            v-if="tooltip"
-            class="apos-choice-label-info"
-            :tooltip="tooltip"
-            :icon-size="14"
-            icon="information-icon"
-          />
-        </span>
-      </label>
+          <input
+            :id="getChoiceId(uid, value)"
+            type="radio"
+            class="apos-sr-only apos-input--choice apos-input--radio"
+            :value="JSON.stringify(value)"
+            :name="field.name"
+            :checked="next === value"
+            tabindex="0"
+            :disabled="field.readOnly"
+            @change="change($event.target.value)"
+          >
+          <span
+            v-if="!field.buttons"
+            class="apos-input-indicator"
+            aria-hidden="true"
+          >
+            <component
+              :is="`${next === value ? 'check-bold-icon' : 'span'}`"
+              v-if="next === value"
+              :size="8"
+            />
+          </span>
+          <span
+            v-if="icon"
+            class="apos-choice-label-icon"
+          >
+            <AposIndicator
+              :icon-size="14"
+              :icon="icon"
+            />
+          </span>
+          <span class="apos-choice-label-text">
+            {{ $t(label) }}
+            <AposIndicator
+              v-if="tooltip && !field.buttons"
+              class="apos-choice-label-info"
+              :tooltip="$t(tooltip)"
+              :icon-size="14"
+              icon="information-icon"
+            />
+          </span>
+        </component>
+      </div>
     </template>
   </AposInputWrapper>
 </template>
@@ -69,4 +92,82 @@ export default {
     position: relative;
     top: 3px;
   }
+
+  .apos-choice-label + .apos-choice-label {
+    margin: unset;
+  }
+
+  .apos-radio-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    gap: $spacing-base;
+  }
+
+  button.apos-choice-label {
+    @include apos-button-reset();
+    &:focus,
+    &:active {
+      outline-offset: -1px;
+    }
+  }
+
+  .apos-choice-label {
+    &:focus,
+    &:active {
+      outline: 1px solid var(--a-primary);
+    }
+  }
+
+  .apos-radio-wrapper--buttons {
+    flex-direction: row;
+    gap: 0;
+
+    .apos-choice-label-icon {
+      margin-left: 0;
+    }
+
+    .apos-choice-label:first-of-type {
+      border-radius: var(--a-border-radius) 0 0 var(--a-border-radius);
+      border-left: 1px solid var(--a-base-8);
+    }
+
+    .apos-choice-label:last-of-type {
+      border-radius: 0 var(--a-border-radius) var(--a-border-radius) 0;
+      border-right: 1px solid var(--a-base-8);
+    }
+
+    .apos-choice-label + .apos-choice-label {
+      &::before {
+        content: '';
+        position: absolute;
+        left: -0.5px;
+        height: 50%;
+        width: 1px;
+        background-color: var(--a-base-7);
+      }
+    }
+
+    .apos-choice-label--checked + .apos-choice-label::before,
+    .apos-choice-label--checked::before {
+      display: none;
+    }
+
+    .apos-choice-label {
+      position: relative;
+      height: 34px;
+      border-top: 1px solid var(--a-base-8);
+      border-bottom: 1px solid var(--a-base-8);
+      background-color: var(--a-base-9);
+      padding: 0 $spacing-base;
+
+      &:hover,
+      &--checked {
+        background-color: var(--a-base-8);
+
+        .apos-choice-label-icon {
+          color: var(--a-black);
+        }
+      }
+    }
+    }
 </style>
diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index 27db38bb0d..ceb8846df5 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -147,6 +147,18 @@
     font-size: var(--a-type-smaller);
   }
 
+  &.apos-field--radio {
+    .apos-radio-wrapper--buttons {
+      width: 100%;
+
+      .apos-choice-label {
+        flex: 1;
+        height: 27px;
+        place-content: center;
+      }
+    }
+  }
+
   &.apos-field--relationship {
     .apos-input-relationship__button {
       top: 1px;
@@ -311,6 +323,11 @@
   display: flex;
 }
 
+.apos-choice-label-icon {
+  margin-left: $spacing-half;
+  line-height: 0;
+}
+
 .apos-choice-label-text {
   @include type-base;
 
@@ -319,6 +336,10 @@
   }
 }
 
+.apos-choice-label-icon + .apos-choice-label-text {
+  margin-left: $spacing-half;
+}
+
 .apos-input-indicator {
   @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);
 

From ab52bccbf4d830f382a5db7e3190093ecbd7a3d7 Mon Sep 17 00:00:00 2001
From: Stuart Romanek <stuart@apostrophecms.com>
Date: Thu, 23 Oct 2025 15:53:20 -0400
Subject: [PATCH 2/2] buttons go

---
 .../ui/apos/components/AposInputRadio.vue     | 30 +++++++++----------
 .../ui/ui/apos/scss/global/_inputs.scss       | 10 +++----
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
index 279380f47b..d84f4d7f33 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRadio.vue
@@ -11,11 +11,11 @@
         class="apos-radio-wrapper"
         :class="{'apos-radio-wrapper--buttons': field.buttons }"
       >
-        <component
-          :is="field.buttons ? 'button' : 'label'"
+        <label
           v-for="{label, value, tooltip, icon} in choices"
           :key="value"
           v-apos-tooltip="(field.buttons && !!tooltip) ? $t(tooltip) : null"
+          :aria-label="label"
           class="apos-choice-label"
           :for="getChoiceId(uid, value)"
           :class="[
@@ -23,7 +23,6 @@
             { 'apos-choice-label--checked': next === value }
           ]"
           tabindex="0"
-          @click="next = value"
           @keydown.space="next = value"
         >
           <input
@@ -57,7 +56,10 @@
               :icon="icon"
             />
           </span>
-          <span class="apos-choice-label-text">
+          <span
+            v-if="label"
+            class="apos-choice-label-text"
+          >
             {{ $t(label) }}
             <AposIndicator
               v-if="tooltip && !field.buttons"
@@ -67,7 +69,7 @@
               icon="information-icon"
             />
           </span>
-        </component>
+        </label>
       </div>
     </template>
   </AposInputWrapper>
@@ -103,14 +105,6 @@ export default {
     gap: $spacing-base;
   }
 
-  button.apos-choice-label {
-    @include apos-button-reset();
-    &:focus,
-    &:active {
-      outline-offset: -1px;
-    }
-  }
-
   .apos-choice-label {
     &:focus,
     &:active {
@@ -141,8 +135,8 @@ export default {
         content: '';
         position: absolute;
         left: -0.5px;
-        height: 50%;
         width: 1px;
+        height: 50%;
         background-color: var(--a-base-7);
       }
     }
@@ -155,15 +149,21 @@ export default {
     .apos-choice-label {
       position: relative;
       height: 34px;
+      padding: 0 $spacing-base;
       border-top: 1px solid var(--a-base-8);
       border-bottom: 1px solid var(--a-base-8);
       background-color: var(--a-base-9);
-      padding: 0 $spacing-base;
+
+      &:focus,
+      &:active {
+        outline-offset: -1px;
+      }
 
       &:hover,
       &--checked {
         background-color: var(--a-base-8);
 
+        // stylelint-disable max-nesting-depth
         .apos-choice-label-icon {
           color: var(--a-black);
         }
diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index ceb8846df5..fcf95ea25d 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -150,12 +150,12 @@
   &.apos-field--radio {
     .apos-radio-wrapper--buttons {
       width: 100%;
+    }
 
-      .apos-choice-label {
-        flex: 1;
-        height: 27px;
-        place-content: center;
-      }
+    .apos-radio-wrapper--buttons .apos-choice-label {
+      flex: 1;
+      height: 27px;
+      place-content: center;
     }
   }