From 5eafb235d3cb1d427776b42c3277e801393b5000 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Jun 2026 15:25:38 +0100
Subject: [PATCH 01/19] Radios - add option for chips

---
 lang/en/fieldtypes.php                        |  1 +
 .../components/fieldtypes/RadioFieldtype.vue  | 10 ++++++-
 resources/js/components/ui/Radio/Group.vue    | 28 ++++++++++++++++---
 resources/js/components/ui/Radio/Item.vue     | 26 +++++++++++++++--
 src/Fieldtypes/Radio.php                      | 14 +++++++---
 5 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/lang/en/fieldtypes.php b/lang/en/fieldtypes.php
index 650448ef7a2..59583eb618d 100644
--- a/lang/en/fieldtypes.php
+++ b/lang/en/fieldtypes.php
@@ -143,6 +143,7 @@
     'picker.category.special.description' => 'These fields are special, each in their own way.',
     'picker.category.structured.description' => 'Fields that store structured data. Some can even nest other fields inside themselves.',
     'picker.category.text.description' => 'Fields that store strings of text, rich content, or both.',
+    'radio.config.appearance' => 'Choose how the radio buttons are displayed.',
     'radio.config.inline' => 'Show the radio buttons in a row.',
     'radio.config.options' => 'Set the array keys and their optional labels.',
     'radio.title' => 'Radio',
diff --git a/resources/js/components/fieldtypes/RadioFieldtype.vue b/resources/js/components/fieldtypes/RadioFieldtype.vue
index 066aee36835..03282aeeafe 100644
--- a/resources/js/components/fieldtypes/RadioFieldtype.vue
+++ b/resources/js/components/fieldtypes/RadioFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <RadioGroup :inline="config.inline" :model-value="value" @update:model-value="update" ref="radio">
+    <RadioGroup :appearance="appearance" :model-value="value" @update:model-value="update" ref="radio">
         <Radio
             v-for="(option, index) in options"
             :disabled="config.disabled"
@@ -25,6 +25,14 @@ export default {
     },
 
     computed: {
+        appearance() {
+            if (this.config.appearance) {
+                return this.config.appearance;
+            }
+
+            return this.config.inline ? 'inline' : 'default';
+        },
+
         options() {
             return this.normalizeInputOptions(this.meta.options || this.config.options);
         },
diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index 0fbe8a97146..685d8d6c171 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -1,9 +1,15 @@
 <script setup>
-import { useId } from 'vue';
+import { computed, provide, useId } from 'vue';
 import { RadioGroupRoot } from 'reka-ui';
 
-defineProps({
-    /** When `true`, displays radio buttons horizontally */
+const props = defineProps({
+    /** Controls how the radio group is displayed. Options: `default`, `inline`, `chips` */
+    appearance: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'inline', 'chips'].includes(value),
+    },
+    /** @deprecated Use `appearance="inline"` instead. */
     inline: { type: Boolean, default: false },
     /** The controlled value of the radio group */
     modelValue: { type: String, default: null },
@@ -12,6 +18,16 @@ defineProps({
     required: { type: Boolean, default: false },
 });
 
+const resolvedAppearance = computed(() => {
+    if (props.appearance !== 'default') {
+        return props.appearance;
+    }
+
+    return props.inline ? 'inline' : 'default';
+});
+
+provide('radioAppearance', resolvedAppearance);
+
 const focus = function () {
     console.log('focusing. todo.');
 };
@@ -27,7 +43,11 @@ defineExpose({ focus });
         @update:modelValue="$emit('update:modelValue', $event)"
         :name="name"
         class="relative block w-full space-y-2"
-        :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
+        :class="{
+            'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline',
+            'flex flex-wrap space-y-0 gap-2': resolvedAppearance === 'chips',
+        }"
+        :data-appearance="resolvedAppearance !== 'default' ? resolvedAppearance : undefined"
         data-ui-input
         data-ui-radio-group
     >
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 64ef4c14901..e9e05e471b1 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { RadioGroupIndicator, RadioGroupItem, useId } from 'reka-ui';
+import { computed, inject, useId } from 'vue';
+import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
 const props = defineProps({
     /** Description text to display below the label */
@@ -12,11 +13,32 @@ const props = defineProps({
     value: { type: [String, Number, Boolean], required: true },
 });
 
+const appearance = inject('radioAppearance', computed(() => 'default'));
+const isChips = computed(() => appearance.value === 'chips');
 const id = useId();
+
+const chipClasses = [
+    'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 h-10 text-sm font-medium antialiased cursor-default',
+    'border border-gray-300 bg-linear-to-b from-white to-gray-50 text-gray-900 shadow-ui-xs',
+    'hover:to-gray-100 data-[state=checked]:from-gray-100 data-[state=checked]:to-gray-100 data-[state=checked]:inset-shadow-sm/10',
+    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+    'dark:from-gray-800 dark:to-gray-850 dark:hover:to-gray-800 dark:border-white/10 dark:text-gray-300 dark:shadow-lg',
+    'dark:data-[state=checked]:from-gray-950 dark:data-[state=checked]:to-gray-850 dark:data-[state=checked]:text-white',
+];
 </script>
 
 <template>
-    <div class="flex items-start gap-1.5" data-ui-radio-item>
+    <RadioGroupItem
+        v-if="isChips"
+        :id
+        :value="value"
+        :disabled="readOnly || disabled"
+        :class="chipClasses"
+        data-ui-radio-item
+    >
+        <slot>{{ label || value }}</slot>
+    </RadioGroupItem>
+    <div v-else class="flex items-start gap-1.5" data-ui-radio-item>
         <RadioGroupItem
             :id
             :value="value"
diff --git a/src/Fieldtypes/Radio.php b/src/Fieldtypes/Radio.php
index 3ccc9a22c89..631f2eb38d8 100644
--- a/src/Fieldtypes/Radio.php
+++ b/src/Fieldtypes/Radio.php
@@ -34,10 +34,16 @@ protected function configFieldItems(): array
             [
                 'display' => __('Appearance'),
                 'fields' => [
-                    'inline' => [
-                        'display' => __('Inline'),
-                        'instructions' => __('statamic::fieldtypes.radio.config.inline'),
-                        'type' => 'toggle',
+                    'appearance' => [
+                        'display' => __('Appearance'),
+                        'instructions' => __('statamic::fieldtypes.radio.config.appearance'),
+                        'type' => 'radio',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => __('Default'),
+                            'inline' => __('Inline'),
+                            'chips' => __('Chips'),
+                        ],
                     ],
                 ],
             ],

From 15c4becfead95e44c6f4dae81d33479b37a83b64 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Jun 2026 15:40:21 +0100
Subject: [PATCH 02/19] Radios - style chips

---
 resources/js/components/ui/Radio/Group.vue |  4 ++--
 resources/js/components/ui/Radio/Item.vue  | 25 ++++++----------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index 685d8d6c171..ef1ae97d9a0 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -44,8 +44,8 @@ defineExpose({ focus });
         :name="name"
         class="relative block w-full space-y-2"
         :class="{
-            'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline',
-            'flex flex-wrap space-y-0 gap-2': resolvedAppearance === 'chips',
+            'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline' || resolvedAppearance === 'chips',
+            'gap-x-2!': resolvedAppearance === 'chips',
         }"
         :data-appearance="resolvedAppearance !== 'default' ? resolvedAppearance : undefined"
         data-ui-input
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index e9e05e471b1..a0bc9bea6ee 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -3,6 +3,8 @@ import { computed, inject, useId } from 'vue';
 import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
 const props = defineProps({
+    /** Additional classes applied when the group appearance is `chips` */
+    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-4 shadow-ui-xs rounded-full' },
     /** Description text to display below the label */
     description: { type: String, default: null },
     disabled: { type: Boolean, default: false },
@@ -14,31 +16,16 @@ const props = defineProps({
 });
 
 const appearance = inject('radioAppearance', computed(() => 'default'));
-const isChips = computed(() => appearance.value === 'chips');
-const id = useId();
 
-const chipClasses = [
-    'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 h-10 text-sm font-medium antialiased cursor-default',
-    'border border-gray-300 bg-linear-to-b from-white to-gray-50 text-gray-900 shadow-ui-xs',
-    'hover:to-gray-100 data-[state=checked]:from-gray-100 data-[state=checked]:to-gray-100 data-[state=checked]:inset-shadow-sm/10',
-    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-    'dark:from-gray-800 dark:to-gray-850 dark:hover:to-gray-800 dark:border-white/10 dark:text-gray-300 dark:shadow-lg',
-    'dark:data-[state=checked]:from-gray-950 dark:data-[state=checked]:to-gray-850 dark:data-[state=checked]:text-white',
-];
+const id = useId();
 </script>
 
 <template>
-    <RadioGroupItem
-        v-if="isChips"
-        :id
-        :value="value"
-        :disabled="readOnly || disabled"
-        :class="chipClasses"
+    <div
+        class="flex items-start gap-1.5"
+        :class="appearance === 'chips' ? chipsClass : null"
         data-ui-radio-item
     >
-        <slot>{{ label || value }}</slot>
-    </RadioGroupItem>
-    <div v-else class="flex items-start gap-1.5" data-ui-radio-item>
         <RadioGroupItem
             :id
             :value="value"

From d28c91cfbf5c033060783463db25d4f660a892a5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Jun 2026 15:50:55 +0100
Subject: [PATCH 03/19] Checkboxes - add option for chips

---
 lang/en/fieldtypes.php                        |  1 +
 .../fieldtypes/CheckboxesFieldtype.vue        | 10 ++++++-
 resources/js/components/ui/Checkbox/Group.vue | 29 ++++++++++++++++---
 resources/js/components/ui/Checkbox/Item.vue  | 10 +++++--
 src/Fieldtypes/Checkboxes.php                 | 14 ++++++---
 5 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/lang/en/fieldtypes.php b/lang/en/fieldtypes.php
index 59583eb618d..6725d4dd920 100644
--- a/lang/en/fieldtypes.php
+++ b/lang/en/fieldtypes.php
@@ -49,6 +49,7 @@
     'bard.config.word_count' => 'Show the word count at the bottom of the field.',
     'bard.title' => 'Bard',
     'button_group.title' => 'Button Group',
+    'checkboxes.config.appearance' => 'Choose how the checkboxes are displayed.',
     'checkboxes.config.inline' => 'Show the checkboxes in a row.',
     'checkboxes.config.options' => 'Set the array keys and their optional labels.',
     'checkboxes.title' => 'Checkboxes',
diff --git a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
index 792b9f4d428..e4c72515af8 100644
--- a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
+++ b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CheckboxGroup v-model="values" :inline="config.inline" ref="checkboxes">
+        <CheckboxGroup v-model="values" :appearance="appearance" ref="checkboxes">
             <Checkbox
                 v-for="(option, index) in options"
                 :disabled="config.disabled"
@@ -33,6 +33,14 @@ export default {
     },
 
     computed: {
+        appearance() {
+            if (this.config.appearance) {
+                return this.config.appearance;
+            }
+
+            return this.config.inline ? 'inline' : 'default';
+        },
+
         options() {
             return this.normalizeInputOptions(this.meta.options || this.config.options);
         },
diff --git a/resources/js/components/ui/Checkbox/Group.vue b/resources/js/components/ui/Checkbox/Group.vue
index 69dfda6b733..e3456cbbea2 100644
--- a/resources/js/components/ui/Checkbox/Group.vue
+++ b/resources/js/components/ui/Checkbox/Group.vue
@@ -1,9 +1,15 @@
 <script setup>
-import { useId } from 'vue';
+import { computed, provide, useId } from 'vue';
 import { CheckboxGroupRoot } from 'reka-ui';
 
-defineProps({
-    /** When `true`, displays checkboxes horizontally */
+const props = defineProps({
+    /** Controls how the checkbox group is displayed. Options: `default`, `inline`, `chips` */
+    appearance: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'inline', 'chips'].includes(value),
+    },
+    /** @deprecated Use `appearance="inline"` instead. */
     inline: { type: Boolean, default: false },
     /** The controlled value of the checkbox group */
     modelValue: { type: Array, default: () => [] },
@@ -12,6 +18,16 @@ defineProps({
     required: { type: Boolean, default: false },
 });
 
+const resolvedAppearance = computed(() => {
+    if (props.appearance !== 'default') {
+        return props.appearance;
+    }
+
+    return props.inline ? 'inline' : 'default';
+});
+
+provide('checkboxAppearance', resolvedAppearance);
+
 const focus = function () {
     console.log('focusing. todo.');
 };
@@ -27,8 +43,13 @@ defineExpose({ focus });
         @update:modelValue="$emit('update:modelValue', $event)"
         :name="name"
         class="relative block w-full space-y-2"
-        :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
+        :class="{
+            'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline' || resolvedAppearance === 'chips',
+            'gap-x-2!': resolvedAppearance === 'chips',
+        }"
+        :data-appearance="resolvedAppearance !== 'default' ? resolvedAppearance : undefined"
         data-ui-input
+        data-ui-checkbox-group
     >
         <slot />
     </CheckboxGroupRoot>
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 88c3e956021..b6c10c0f3d5 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { CheckboxIndicator, CheckboxRoot, useId } from 'reka-ui';
-import { computed, useAttrs } from 'vue';
+import { computed, inject, useAttrs } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
@@ -9,6 +9,8 @@ defineOptions({ inheritAttrs: false });
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** Additional classes applied when the group appearance is `chips` */
+    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-4 shadow-ui-xs rounded-full' },
     /** Controls the vertical alignment of the checkbox with its label. Options: `start`, `center` */
     align: { type: String, default: 'start', validator: (value) => ['start', 'center'].includes(value) },
     /** Description text to display below the label */
@@ -34,6 +36,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'keydown']);
 
+const appearance = inject('checkboxAppearance', computed(() => 'default'));
+
 const id = useId();
 
 const handleKeydown = (event) => {
@@ -76,7 +80,7 @@ const containerClasses = computed(() => {
         },
     })({ ...props });
 
-    return twMerge(classes, attrs.class);
+    return twMerge(classes, appearance.value === 'chips' ? props.chipsClass : null, attrs.class);
 });
 
 const conditionalProps = computed(() => {
@@ -104,7 +108,7 @@ const conditionalProps = computed(() => {
 </script>
 
 <template>
-    <div :class="containerClasses">
+    <div :class="containerClasses" data-ui-checkbox-item>
         <CheckboxRoot
             :disabled="readOnly || disabled"
             :id
diff --git a/src/Fieldtypes/Checkboxes.php b/src/Fieldtypes/Checkboxes.php
index 3fc12d2e248..6f837364f41 100644
--- a/src/Fieldtypes/Checkboxes.php
+++ b/src/Fieldtypes/Checkboxes.php
@@ -37,10 +37,16 @@ protected function configFieldItems(): array
             [
                 'display' => __('Appearance'),
                 'fields' => [
-                    'inline' => [
-                        'display' => __('Inline'),
-                        'instructions' => __('statamic::fieldtypes.checkboxes.config.inline'),
-                        'type' => 'toggle',
+                    'appearance' => [
+                        'display' => __('Appearance'),
+                        'instructions' => __('statamic::fieldtypes.checkboxes.config.appearance'),
+                        'type' => 'radio',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => __('Default'),
+                            'inline' => __('Inline'),
+                            'chips' => __('Chips'),
+                        ],
                     ],
                 ],
             ],

From 993bacf58e3a044ce72eca6a1fe50b4e3ee61258 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 1 Jun 2026 16:01:46 +0100
Subject: [PATCH 04/19] Checkboxes - style chips

---
 resources/js/components/ui/Checkbox/Group.vue | 2 +-
 resources/js/components/ui/Checkbox/Item.vue  | 6 +++++-
 resources/js/components/ui/Radio/Group.vue    | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Checkbox/Group.vue b/resources/js/components/ui/Checkbox/Group.vue
index e3456cbbea2..e37627b30df 100644
--- a/resources/js/components/ui/Checkbox/Group.vue
+++ b/resources/js/components/ui/Checkbox/Group.vue
@@ -45,7 +45,7 @@ defineExpose({ focus });
         class="relative block w-full space-y-2"
         :class="{
             'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline' || resolvedAppearance === 'chips',
-            'gap-x-2!': resolvedAppearance === 'chips',
+            'gap-x-2.5!': resolvedAppearance === 'chips',
         }"
         :data-appearance="resolvedAppearance !== 'default' ? resolvedAppearance : undefined"
         data-ui-input
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index b6c10c0f3d5..fce7aab074f 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -10,7 +10,11 @@ const attrs = useAttrs();
 
 const props = defineProps({
     /** Additional classes applied when the group appearance is `chips` */
-    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-4 shadow-ui-xs rounded-full' },
+    chipsClass: {
+        type: String,
+        default:
+            'items-center gap-2 border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-3 shadow-ui-xs rounded-lg [&_button]:mt-0',
+    },
     /** Controls the vertical alignment of the checkbox with its label. Options: `start`, `center` */
     align: { type: String, default: 'start', validator: (value) => ['start', 'center'].includes(value) },
     /** Description text to display below the label */
diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index ef1ae97d9a0..7e8b49e52e0 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -45,7 +45,7 @@ defineExpose({ focus });
         class="relative block w-full space-y-2"
         :class="{
             'flex flex-wrap space-y-0 gap-x-4 gap-y-2': resolvedAppearance === 'inline' || resolvedAppearance === 'chips',
-            'gap-x-2!': resolvedAppearance === 'chips',
+            'gap-x-2.5!': resolvedAppearance === 'chips',
         }"
         :data-appearance="resolvedAppearance !== 'default' ? resolvedAppearance : undefined"
         data-ui-input

From 4734277d08a8666a2ef734a081f0369ec021ac83 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 14:29:08 +0100
Subject: [PATCH 05/19] Give a preview of the chips appearance

---
 .../fieldtypes/ButtonGroupFieldtype.vue       | 16 ++++--
 .../fieldtypes/ControlAppearancePreview.vue   | 49 +++++++++++++++++++
 src/Fieldtypes/Checkboxes.php                 |  4 +-
 src/Fieldtypes/Radio.php                      |  4 +-
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/components/fieldtypes/ControlAppearancePreview.vue

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index f3412db2232..f15e47fe45b 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonGroup overflow="stack" ref="buttonGroup">
+    <ButtonGroup :overflow="config.appearance_previews ? 'gap' : 'stack'" ref="buttonGroup">
         <Button
             v-for="(option, $index) in options"
             ref="button"
@@ -7,24 +7,32 @@
             :key="$index"
             :name="name"
             :read-only="isReadOnly"
-            :text="option.label || option.value"
+            :text="config.appearance_previews ? null : (option.label || option.value)"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
+            :class="config.appearance_previews ? 'min-w-36 justify-start' : null"
             @click="updateSelectedOption(option.value)"
-        />
+        >
+            <div v-if="config.appearance_previews" class="flex w-full flex-col items-start gap-2 py-0.5 text-left">
+                <span class="text-sm font-medium">{{ option.label || option.value }}</span>
+                <ControlAppearancePreview :appearance="option.value" :control="config.control || 'radio'" />
+            </div>
+        </Button>
     </ButtonGroup>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
 import HasInputOptions from './HasInputOptions.js';
+import ControlAppearancePreview from './ControlAppearancePreview.vue';
 import { Button, ButtonGroup } from '@/components/ui';
 
 export default {
     mixins: [Fieldtype, HasInputOptions],
     components: {
         Button,
-        ButtonGroup
+        ButtonGroup,
+        ControlAppearancePreview,
     },
 
     computed: {
diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
new file mode 100644
index 00000000000..8a4b3aac59b
--- /dev/null
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+    appearance: {
+        type: String,
+        required: true,
+        validator: (value) => ['default', 'inline', 'chips'].includes(value),
+    },
+    control: {
+        type: String,
+        default: 'radio',
+        validator: (value) => ['radio', 'checkbox'].includes(value),
+    },
+});
+
+const isRadio = props.control === 'radio';
+const chipClass = isRadio
+    ? 'rounded-full px-2 py-1'
+    : 'items-center rounded-lg px-2 py-1';
+</script>
+
+<template>
+    <div
+        class="pointer-events-none select-none"
+        :class="{
+            'flex flex-col gap-1.5': appearance === 'default',
+            'flex flex-wrap gap-1.5': appearance === 'inline' || appearance === 'chips',
+        }"
+        aria-hidden="true"
+    >
+        <div
+            v-for="selected in [true, false]"
+            :key="selected ? 'on' : 'off'"
+            class="flex items-center gap-1"
+            :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 ${chipClass}` : null"
+        >
+            <div
+                class="shrink-0 border border-gray-400/75 dark:border-gray-500"
+                :class="[
+                    isRadio ? 'size-2 rounded-full' : 'size-2 rounded-sm',
+                    selected ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:bg-gray-300/30' : 'bg-white dark:bg-gray-500',
+                ]"
+            />
+            <div
+                class="h-1 rounded-sm bg-gray-300 dark:bg-gray-600"
+                :class="selected ? 'w-5' : 'w-4'"
+            />
+        </div>
+    </div>
+</template>
diff --git a/src/Fieldtypes/Checkboxes.php b/src/Fieldtypes/Checkboxes.php
index 6f837364f41..6985b15baa4 100644
--- a/src/Fieldtypes/Checkboxes.php
+++ b/src/Fieldtypes/Checkboxes.php
@@ -40,8 +40,10 @@ protected function configFieldItems(): array
                     'appearance' => [
                         'display' => __('Appearance'),
                         'instructions' => __('statamic::fieldtypes.checkboxes.config.appearance'),
-                        'type' => 'radio',
+                        'type' => 'button_group',
                         'default' => 'default',
+                        'appearance_previews' => true,
+                        'control' => 'checkbox',
                         'options' => [
                             'default' => __('Default'),
                             'inline' => __('Inline'),
diff --git a/src/Fieldtypes/Radio.php b/src/Fieldtypes/Radio.php
index 631f2eb38d8..337884d9c2b 100644
--- a/src/Fieldtypes/Radio.php
+++ b/src/Fieldtypes/Radio.php
@@ -37,8 +37,10 @@ protected function configFieldItems(): array
                     'appearance' => [
                         'display' => __('Appearance'),
                         'instructions' => __('statamic::fieldtypes.radio.config.appearance'),
-                        'type' => 'radio',
+                        'type' => 'button_group',
                         'default' => 'default',
+                        'appearance_previews' => true,
+                        'control' => 'radio',
                         'options' => [
                             'default' => __('Default'),
                             'inline' => __('Inline'),

From 29580eda8bbbc4c46af53df88e5efde746e135d8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 14:53:19 +0100
Subject: [PATCH 06/19] Improve

---
 resources/js/components/fieldtypes/ButtonGroupFieldtype.vue   | 2 +-
 .../js/components/fieldtypes/ControlAppearancePreview.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index f15e47fe45b..7bd1345bb91 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -10,7 +10,7 @@
             :text="config.appearance_previews ? null : (option.label || option.value)"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
-            :class="config.appearance_previews ? 'min-w-36 justify-start' : null"
+            :class="config.appearance_previews ? 'min-w-34 h-auto items-start justify-start py-1.5' : null"
             @click="updateSelectedOption(option.value)"
         >
             <div v-if="config.appearance_previews" class="flex w-full flex-col items-start gap-2 py-0.5 text-left">
diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 8a4b3aac59b..7b1e449b409 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -22,7 +22,7 @@ const chipClass = isRadio
     <div
         class="pointer-events-none select-none"
         :class="{
-            'flex flex-col gap-1.5': appearance === 'default',
+            'flex flex-col gap-1.5 pb-0.75': appearance === 'default',
             'flex flex-wrap gap-1.5': appearance === 'inline' || appearance === 'chips',
         }"
         aria-hidden="true"
@@ -31,7 +31,7 @@ const chipClass = isRadio
             v-for="selected in [true, false]"
             :key="selected ? 'on' : 'off'"
             class="flex items-center gap-1"
-            :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 ${chipClass}` : null"
+            :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 bg-white dark:bg-gray-500 ${chipClass}` : null"
         >
             <div
                 class="shrink-0 border border-gray-400/75 dark:border-gray-500"

From 936e4f0ded61ef0cf56aa48b82a7ab66ee1b47da Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 15:03:18 +0100
Subject: [PATCH 07/19] Tweaks

---
 resources/js/components/fieldtypes/ControlAppearancePreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 7b1e449b409..2bdc16c88db 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -34,7 +34,7 @@ const chipClass = isRadio
             :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 bg-white dark:bg-gray-500 ${chipClass}` : null"
         >
             <div
-                class="shrink-0 border border-gray-400/75 dark:border-gray-500"
+                class="shrink-0 border border-gray-500 dark:border-gray-500"
                 :class="[
                     isRadio ? 'size-2 rounded-full' : 'size-2 rounded-sm',
                     selected ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:bg-gray-300/30' : 'bg-white dark:bg-gray-500',

From 431a58415a3662e26770ec7a00bbe579bf0613dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 15:14:43 +0100
Subject: [PATCH 08/19] Make lighter

---
 .../fieldtypes/ButtonGroupFieldtype.vue       | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 7bd1345bb91..c08f9b4e72d 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -10,7 +10,7 @@
             :text="config.appearance_previews ? null : (option.label || option.value)"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
-            :class="config.appearance_previews ? 'min-w-34 h-auto items-start justify-start py-1.5' : null"
+            :class="appearancePreviewButtonClass(option.value)"
             @click="updateSelectedOption(option.value)"
         >
             <div v-if="config.appearance_previews" class="flex w-full flex-col items-start gap-2 py-0.5 text-left">
@@ -49,6 +49,28 @@ export default {
     },
 
     methods: {
+        appearancePreviewButtonClass(optionValue) {
+            if (!this.config.appearance_previews) {
+                return null;
+            }
+
+            const base = 'min-w-34 h-auto items-start justify-start py-1.5';
+
+            if (this.value != optionValue) {
+                return [
+                    base,
+                    'from-white to-white hover:from-white hover:to-white',
+                    'dark:from-gray-900 dark:to-gray-900  dark:hover:from-gray-900 dark:hover:to-gray-900',
+                ];
+            }
+
+            return [
+                base,
+                'from-gray-150 to-gray-50',
+                'dark:from-gray-800 dark:to-gray-850',
+            ];
+        },
+
         updateSelectedOption(newValue) {
             this.update(this.value == newValue && this.config.clearable ? null : newValue);
         },

From d82e30be926326e78e96b09e5aeb484a400e8db3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 15:18:19 +0100
Subject: [PATCH 09/19] Fix regular button groups broken in
 4734277d08a8666a2ef734a081f0369ec021ac83

---
 .../fieldtypes/ButtonGroupFieldtype.vue       | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index c08f9b4e72d..cdaaab9ccde 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -1,23 +1,34 @@
 <template>
     <ButtonGroup :overflow="config.appearance_previews ? 'gap' : 'stack'" ref="buttonGroup">
-        <Button
-            v-for="(option, $index) in options"
-            ref="button"
-            :disabled="config.disabled"
-            :key="$index"
-            :name="name"
-            :read-only="isReadOnly"
-            :text="config.appearance_previews ? null : (option.label || option.value)"
-            :value="option.value"
-            :variant="value == option.value ? 'pressed' : 'default'"
-            :class="appearancePreviewButtonClass(option.value)"
-            @click="updateSelectedOption(option.value)"
-        >
-            <div v-if="config.appearance_previews" class="flex w-full flex-col items-start gap-2 py-0.5 text-left">
-                <span class="text-sm font-medium">{{ option.label || option.value }}</span>
-                <ControlAppearancePreview :appearance="option.value" :control="config.control || 'radio'" />
-            </div>
-        </Button>
+        <template v-for="(option, $index) in options" :key="$index">
+            <Button
+                v-if="config.appearance_previews"
+                ref="button"
+                :disabled="config.disabled"
+                :name="name"
+                :read-only="isReadOnly"
+                :value="option.value"
+                :variant="value == option.value ? 'pressed' : 'default'"
+                :class="appearancePreviewButtonClass(option.value)"
+                @click="updateSelectedOption(option.value)"
+            >
+                <div class="flex w-full flex-col items-start gap-2 py-0.5 text-left">
+                    <span class="text-sm font-medium">{{ option.label || option.value }}</span>
+                    <ControlAppearancePreview :appearance="option.value" :control="config.control || 'radio'" />
+                </div>
+            </Button>
+            <Button
+                v-else
+                ref="button"
+                :disabled="config.disabled"
+                :name="name"
+                :read-only="isReadOnly"
+                :text="option.label || option.value"
+                :value="option.value"
+                :variant="value == option.value ? 'pressed' : 'default'"
+                @click="updateSelectedOption(option.value)"
+            />
+        </template>
     </ButtonGroup>
 </template>
 

From 4868796f08b20ced5930e6d406cd792853f84b6b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 15:27:01 +0100
Subject: [PATCH 10/19] Correct "pressed" value of button group in dark mode so
 it doesn't feel oddly flat

---
 resources/js/components/ui/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 175a1ebf3d1..65e17d859b6 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -68,7 +68,7 @@ const buttonClasses = computed(() => {
                 subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200 [&_svg]:opacity-35',
                 pressed: [
                     'bg-linear-to-b from-gray-200 to-gray-150 text-gray-900 border border-gray-300 inset-shadow-sm/10',
-                    'dark:from-black dark:to-black dark:text-white dark:border-gray-700/80',
+                    'dark:from-gray-950 dark:to-gray-900 dark:text-white dark:border-gray-700/80',
                 ],
             },
             size: {

From 211cd6f700089517737bb2fb354a42ff492a7d69 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 15:42:17 +0100
Subject: [PATCH 11/19] Radio appearance - improve dark mode

---
 .../js/components/fieldtypes/ButtonGroupFieldtype.vue     | 6 +++---
 .../js/components/fieldtypes/ControlAppearancePreview.vue | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index cdaaab9ccde..5eca4d30b07 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -71,14 +71,14 @@ export default {
                 return [
                     base,
                     'from-white to-white hover:from-white hover:to-white',
-                    'dark:from-gray-900 dark:to-gray-900  dark:hover:from-gray-900 dark:hover:to-gray-900',
+                    'dark:from-gray-850 dark:to-gray-850 dark:hover:from-gray-950 dark:hover:to-gray-900',
                 ];
             }
 
             return [
                 base,
-                'from-gray-150 to-gray-50',
-                'dark:from-gray-800 dark:to-gray-850',
+                'from-gray-150 to-gray-50 border-gray-300',
+                'dark:from-gray-925 dark:to-gray-900 dark:border-gray-700/80',
             ];
         },
 
diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 2bdc16c88db..1aafded22eb 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -31,18 +31,18 @@ const chipClass = isRadio
             v-for="selected in [true, false]"
             :key="selected ? 'on' : 'off'"
             class="flex items-center gap-1"
-            :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 bg-white dark:bg-gray-500 ${chipClass}` : null"
+            :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 ${chipClass}` : null"
         >
             <div
-                class="shrink-0 border border-gray-500 dark:border-gray-500"
+                class="shrink-0 border border-gray-500 bg-white dark:border-none dark:bg-gray-500"
                 :class="[
                     isRadio ? 'size-2 rounded-full' : 'size-2 rounded-sm',
-                    selected ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:bg-gray-300/30' : 'bg-white dark:bg-gray-500',
+                    selected ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:border-none dark:bg-gray-300' : null,
                 ]"
             />
             <div
                 class="h-1 rounded-sm bg-gray-300 dark:bg-gray-600"
-                :class="selected ? 'w-5' : 'w-4'"
+                :class="[selected ? 'w-5 dark:bg-gray-500' : 'w-4 dark:bg-gray-700']"
             />
         </div>
     </div>

From d407ca5dbeed4412a9c7312d4d4d24b11907f6a6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 16:05:00 +0100
Subject: [PATCH 12/19] Radio appearance - improve dark mode hover

---
 .../components/fieldtypes/ButtonGroupFieldtype.vue |  4 ++--
 .../fieldtypes/ControlAppearancePreview.vue        | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 5eca4d30b07..83e412cab26 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -70,8 +70,8 @@ export default {
             if (this.value != optionValue) {
                 return [
                     base,
-                    'from-white to-white hover:from-white hover:to-white',
-                    'dark:from-gray-850 dark:to-gray-850 dark:hover:from-gray-950 dark:hover:to-gray-900',
+                    'from-white to-white hover:from-white hover:to-gray-50',
+                    'dark:from-gray-850 dark:to-gray-850 dark:hover:from-gray-800 dark:hover:to-gray-850',
                 ];
             }
 
diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 1aafded22eb..40f105412c2 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -34,12 +34,20 @@ const chipClass = isRadio
             :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 ${chipClass}` : null"
         >
             <div
-                class="shrink-0 border border-gray-500 bg-white dark:border-none dark:bg-gray-500"
+                class="relative flex shrink-0 items-center justify-center border"
                 :class="[
                     isRadio ? 'size-2 rounded-full' : 'size-2 rounded-sm',
-                    selected ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:border-none dark:bg-gray-300' : null,
+                    selected
+                        ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:border-none dark:bg-gray-300'
+                        : 'border-gray-400/75 bg-white dark:border-none dark:bg-gray-500',
                 ]"
-            />
+            >
+                <div
+                    v-if="selected"
+                    class="bg-ui-accent-bg/10 dark:bg-ui-accent-bg"
+                    :class="isRadio ? 'size-1 rounded-full' : 'size-1 rounded-sm'"
+                />
+            </div>
             <div
                 class="h-1 rounded-sm bg-gray-300 dark:bg-gray-600"
                 :class="[selected ? 'w-5 dark:bg-gray-500' : 'w-4 dark:bg-gray-700']"

From a0b1eaff98b5797ed2e509b2a63da16bbc30a9c2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 16:19:46 +0100
Subject: [PATCH 13/19] Radio appearance - improve to make it look more like a
 radio

---
 .../fieldtypes/ControlAppearancePreview.vue   | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 40f105412c2..9ae9583afa3 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -34,19 +34,41 @@ const chipClass = isRadio
             :class="appearance === 'chips' ? `border border-gray-300 shadow-ui-xs dark:border-gray-700 ${chipClass}` : null"
         >
             <div
-                class="relative flex shrink-0 items-center justify-center border"
-                :class="[
-                    isRadio ? 'size-2 rounded-full' : 'size-2 rounded-sm',
+                v-if="isRadio"
+                class="relative flex size-2 shrink-0 items-center justify-center rounded-full border shadow-ui-xs"
+                :class="
                     selected
-                        ? 'border-ui-accent-bg bg-ui-accent-bg/15 dark:border-none dark:bg-gray-300'
-                        : 'border-gray-400/75 bg-white dark:border-none dark:bg-gray-500',
-                ]"
+                        ? 'border-ui-accent-bg bg-white dark:bg-gray-300'
+                        : 'border-gray-400/75 bg-white dark:border-none dark:bg-gray-500'
+                "
             >
-                <div
+                <div v-if="selected" class="size-1 rounded-full bg-ui-accent-bg" />
+            </div>
+            <div
+                v-else
+                class="flex size-2 shrink-0 items-center justify-center rounded-sm border shadow-ui-xs"
+                :class="
+                    selected
+                        ? 'border-ui-accent-bg bg-ui-accent-bg dark:border-none'
+                        : 'border-gray-400/75 bg-white dark:border-none dark:bg-gray-500'
+                "
+            >
+                <svg
                     v-if="selected"
-                    class="bg-ui-accent-bg/10 dark:bg-ui-accent-bg"
-                    :class="isRadio ? 'size-1 rounded-full' : 'size-1 rounded-sm'"
-                />
+                    viewBox="0 0 10 8"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="size-1.5 shrink-0 text-white"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M9 1L3.5 6.5L1 4"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
             </div>
             <div
                 class="h-1 rounded-sm bg-gray-300 dark:bg-gray-600"

From 89a514686a5a28e20981f9000214c88b56613101 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 16:53:41 +0100
Subject: [PATCH 14/19] Radio appearance - improve for dark mode

---
 resources/js/components/ui/Radio/Item.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index a0bc9bea6ee..3c16226ebae 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -32,16 +32,18 @@ const id = useId();
             :disabled="readOnly || disabled"
             class="
                 shadow-ui-xs mt-0.5 size-4 cursor-default rounded-full
-                focus:focus-outline border border-gray-400/75 dark:border-none with-contrast:border-gray-100 bg-white outline-hidden
+                focus:focus-outline border border-gray-400/75 bg-white with-contrast:border-gray-100
                 data-[state=checked]:border-ui-accent-bg data-[disabled]:opacity-50
-                dark:bg-gray-500 dark:data-[state=checked]:border-none dark:data-[state=checked]:bg-gray-300
+                dark:border-gray-700 dark:bg-gray-500
+                dark:data-[state=checked]:border-ui-accent-bg dark:data-[state=checked]:bg-ui-accent-bg
             "
         >
             <RadioGroupIndicator
                 class="
                     relative flex h-full w-full items-center justify-center rounded-[50%]
-                    border border-ui-accent-bg after:block after:h-[0.5rem] after:w-[0.5rem] after:rounded-[50%]
-                    after:bg-ui-accent-bg after:content-[''] dark:border-none
+                    border border-ui-accent-bg after:block after:h-2 after:w-2 after:rounded-[50%]
+                    after:bg-ui-accent-bg after:content-['']
+                    dark:border-none dark:after:bg-white
                 "
             />
         </RadioGroupItem>

From 9f579e2cf3842ffc394f1b9471be451a18f8e9a1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 17:18:15 +0100
Subject: [PATCH 15/19] Checkbox appearance - fix up

---
 .../js/components/fieldtypes/ControlAppearancePreview.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 9ae9583afa3..96eedcb5f7e 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 const isRadio = props.control === 'radio';
 const chipClass = isRadio
     ? 'rounded-full px-2 py-1'
-    : 'items-center rounded-lg px-2 py-1';
+    : 'items-center rounded-sm px-2 py-1';
 </script>
 
 <template>
@@ -46,7 +46,7 @@ const chipClass = isRadio
             </div>
             <div
                 v-else
-                class="flex size-2 shrink-0 items-center justify-center rounded-sm border shadow-ui-xs"
+                class="flex size-2 shrink-0 items-center justify-center rounded-[2px] border shadow-ui-xs"
                 :class="
                     selected
                         ? 'border-ui-accent-bg bg-ui-accent-bg dark:border-none'
@@ -58,7 +58,7 @@ const chipClass = isRadio
                     viewBox="0 0 10 8"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    class="size-1.5 shrink-0 text-white"
+                    class="size-1.5 shrink-0 !text-white !opacity-100"
                     aria-hidden="true"
                 >
                     <path
@@ -71,7 +71,7 @@ const chipClass = isRadio
                 </svg>
             </div>
             <div
-                class="h-1 rounded-sm bg-gray-300 dark:bg-gray-600"
+                class="h-1 rounded-[2px] bg-gray-300 dark:bg-gray-600"
                 :class="[selected ? 'w-5 dark:bg-gray-500' : 'w-4 dark:bg-gray-700']"
             />
         </div>

From ca27715ef44c56e3459692662e3325e60e903b53 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 18:20:53 +0100
Subject: [PATCH 16/19] Balance chip previews a bit

---
 .../js/components/fieldtypes/ControlAppearancePreview.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index 96eedcb5f7e..a88c0eeb2a5 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const isRadio = props.control === 'radio';
 const chipClass = isRadio
-    ? 'rounded-full px-2 py-1'
-    : 'items-center rounded-sm px-2 py-1';
+    ? 'rounded-full px-1.5 pe-2 py-1'
+    : 'items-center rounded-sm px-1.5 pe-2 py-1';
 </script>
 
 <template>

From 5e34d9557bdd24a89658b656ad8f852c4376693c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 18:31:28 +0100
Subject: [PATCH 17/19] Add chip background

---
 .../js/components/fieldtypes/ControlAppearancePreview.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/ControlAppearancePreview.vue b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
index a88c0eeb2a5..4993477fd55 100644
--- a/resources/js/components/fieldtypes/ControlAppearancePreview.vue
+++ b/resources/js/components/fieldtypes/ControlAppearancePreview.vue
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const isRadio = props.control === 'radio';
 const chipClass = isRadio
-    ? 'rounded-full px-1.5 pe-2 py-1'
-    : 'items-center rounded-sm px-1.5 pe-2 py-1';
+    ? 'rounded-full px-1.5 pe-2 py-1 bg-white dark:bg-gray-850'
+    : 'items-center rounded-sm px-1.5 pe-2 py-1 bg-white dark:bg-gray-850';
 </script>
 
 <template>

From 976a86cf5f9be37ec120a4f19ee4d5adf14c6674 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 2 Jun 2026 23:58:39 +0100
Subject: [PATCH 18/19] Tighten up padding a touch

---
 resources/js/components/ui/Checkbox/Item.vue | 2 +-
 resources/js/components/ui/Radio/Item.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index fce7aab074f..58666842e8b 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -13,7 +13,7 @@ const props = defineProps({
     chipsClass: {
         type: String,
         default:
-            'items-center gap-2 border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-3 shadow-ui-xs rounded-lg [&_button]:mt-0',
+            'items-center gap-2 border border-gray-300 dark:border-gray-700 mb-0 p-2 py-1.75 pe-3 shadow-ui-xs rounded-lg [&_button]:mt-0',
     },
     /** Controls the vertical alignment of the checkbox with its label. Options: `start`, `center` */
     align: { type: String, default: 'start', validator: (value) => ['start', 'center'].includes(value) },
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 3c16226ebae..05796e95c06 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -4,7 +4,7 @@ import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
 const props = defineProps({
     /** Additional classes applied when the group appearance is `chips` */
-    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 pe-4 shadow-ui-xs rounded-full' },
+    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 py-1.75 pe-4 shadow-ui-xs rounded-full' },
     /** Description text to display below the label */
     description: { type: String, default: null },
     disabled: { type: Boolean, default: false },

From 90613c4eada671818d11385f9b1422208241b7a2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 3 Jun 2026 10:09:48 +0100
Subject: [PATCH 19/19] =?UTF-8?q?Polish=20=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/ui/Checkbox/Item.vue | 2 +-
 resources/js/components/ui/Radio/Item.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 58666842e8b..1f07815ce2c 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -13,7 +13,7 @@ const props = defineProps({
     chipsClass: {
         type: String,
         default:
-            'items-center gap-2 border border-gray-300 dark:border-gray-700 mb-0 p-2 py-1.75 pe-3 shadow-ui-xs rounded-lg [&_button]:mt-0',
+            'items-center gap-2 border border-gray-300 dark:border-gray-700 mb-0 p-2 py-2 pe-3 shadow-ui-xs rounded-xl [&_button]:mt-0',
     },
     /** Controls the vertical alignment of the checkbox with its label. Options: `start`, `center` */
     align: { type: String, default: 'start', validator: (value) => ['start', 'center'].includes(value) },
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 05796e95c06..f818a6bb306 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -4,7 +4,7 @@ import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
 const props = defineProps({
     /** Additional classes applied when the group appearance is `chips` */
-    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 py-1.75 pe-4 shadow-ui-xs rounded-full' },
+    chipsClass: { type: String, default: 'border border-gray-300 dark:border-gray-700 mb-0 p-2 py-2 pe-4 shadow-ui-xs rounded-full' },
     /** Description text to display below the label */
     description: { type: String, default: null },
     disabled: { type: Boolean, default: false },