diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 1477f7ddead..f785315e6d9 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -5,6 +5,11 @@
     .bard-fieldtype:not(.form-group, .grid-cell, [data-ui-input-group]) {
         @apply relative rounded-lg border outline-hidden dark:border-gray-700 with-contrast:border-gray-500;
     }
+
+    /* Match ui Input / Textarea read-only: dashed outer border (same :not scope as default border). */
+    .bard-fieldtype:not(.form-group, .grid-cell, [data-ui-input-group]):has(.bard-editor.mode\:read-only) {
+        @apply border-dashed;
+    }
 }
 /* BARD / EDITOR
 =================================================== */
@@ -51,8 +56,9 @@
 /* BARD / MODES
 =================================================== */
 @layer ui {
+    /* Match ui Input / Textarea read-only: neutral surface (dashed border on .bard-fieldtype above). */
     .bard-editor.mode\:read-only .ProseMirror {
-        @apply bg-gray-300 text-gray-700 dark:bg-gray-600 dark:text-gray-100;
+        @apply bg-white text-gray-925 dark:bg-gray-900 dark:text-gray-300;
     }
 
     .bard-editor.mode\:minimal .ProseMirror {
diff --git a/resources/js/components/fields/WidthSelector.vue b/resources/js/components/fields/WidthSelector.vue
index da07abae1af..1bd1c581f9d 100644
--- a/resources/js/components/fields/WidthSelector.vue
+++ b/resources/js/components/fields/WidthSelector.vue
@@ -7,6 +7,8 @@ const props = defineProps({
     initialWidths: Array,
     size: { type: String, default: 'base' },
     variant: { type: String, default: 'default' },
+    /** When `true`, the value cannot be changed (read-only, same pattern as other CP controls). */
+    readOnly: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:model-value'])
@@ -16,14 +18,35 @@ const hoveringOver = ref(null)
 const widths = ref(props.initialWidths ?? [25, 33, 50, 66, 75, 100])
 
 const selected = computed(() => {
+    if (props.readOnly) {
+        return props.modelValue
+    }
     if (isHovering.value) {
         return hoveringOver.value
     }
     return props.modelValue
 })
 
+const readOnlyChromeClass =
+    'data-readonly:border-dashed! data-readonly:border-gray-300 data-readonly:with-contrast:border-gray-100 data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:border-gray-600!'
+
+function handleMouseEnter() {
+    if (props.readOnly) return
+    isHovering.value = true
+}
+
+function handleMouseLeave() {
+    isHovering.value = false
+    hoveringOver.value = null
+}
+
+function handleSegmentClick(width) {
+    if (props.readOnly) return
+    emit('update:model-value', width)
+}
+
 const wrapperClasses = cva({
-    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer',
+    base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer data-readonly:cursor-default',
     variants: {
         size: {
             base: 'h-6 w-14 text-xs rounded-md',
@@ -54,18 +77,28 @@ const sizerClasses = cva({
 </script>
 
 <template>
-    <div :class="wrapperClasses" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
-        <div class="flex w-full">
+    <div
+        :class="[wrapperClasses, readOnly ? readOnlyChromeClass : '']"
+        :data-readonly="readOnly ? true : undefined"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+    >
+        <div class="flex w-full" :class="{ 'pointer-events-none': readOnly }">
             <div
                 v-for="width in widths"
                 :key="width"
                 @mouseenter.stop="hoveringOver = width"
-                @click="$emit('update:model-value', width)"
+                @click="handleSegmentClick(width)"
                 :class="sizerClasses"
                 :data-state="selected >= width ? 'selected' : 'unselected'"
                 :data-last="selected === width && width !== 100"
             />
         </div>
-        <div class="pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center font-medium text-gray-900 dark:text-gray-300">{{ selected }}%</div>
+        <div
+            class="pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center font-medium text-gray-900 transition-opacity dark:text-gray-300"
+            :class="{ 'opacity-60': readOnly }"
+        >
+            {{ selected }}%
+        </div>
     </div>
 </template>
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 17cf585429a..d9272d9d9ad 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -1,5 +1,13 @@
 <template>
     <div>
+        <div
+            v-if="showReadOnlyEmpty"
+            class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+            data-array-readonly-empty
+        >
+            {{ __('None') }}
+        </div>
+        <template v-else>
         <ui-input-group v-if="isSingle">
             <ui-input-group-prepend>
                 <select
@@ -90,6 +98,7 @@
         <div class="flex gap-2">
             <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
         </div>
+        </template>
 
         <confirmation-modal
             :open="deleting !== false"
@@ -195,6 +204,10 @@ export default {
                 .filter(Boolean)
                 .join(', ');
         },
+
+        showReadOnlyEmpty() {
+            return this.isReadOnly && this.valueCount === 0 && !this.isSingle;
+        },
     },
 
     methods: {
diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index f3412db2232..076da546e6b 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -3,10 +3,9 @@
         <Button
             v-for="(option, $index) in options"
             ref="button"
-            :disabled="config.disabled"
+            :disabled="config.disabled || isReadOnly"
             :key="$index"
             :name="name"
-            :read-only="isReadOnly"
             :text="option.label || option.value"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
@@ -42,6 +41,7 @@ export default {
 
     methods: {
         updateSelectedOption(newValue) {
+            if (this.isReadOnly) return;
             this.update(this.value == newValue && this.config.clearable ? null : newValue);
         },
 
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 9360c1585c1..28727088bfb 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -4,7 +4,7 @@
         :color-mode="config.color_mode"
         :rulers="config.rulers"
         :disabled="config.disabled"
-        :read-only="config.read_only"
+        :read-only="isReadOnly"
         :key-map="config.key_map"
         :tab-size="config.indent_size"
         :indent-type="config.indent_type"
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index 557a55a175a..984b8c22f15 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -1,8 +1,11 @@
 <template>
-    <div class="flex items-center">
-        <!-- <div class="input-group w-auto" :class="{ 'max-w-[130px]': config.allow_any }"> -->
-        <div class="flex items-center rounded-full relative border shadow-ui-sm with-contrast:border-gray-500">
+    <div class="flex w-full min-w-0 items-center">
+        <div
+            class="flex items-center rounded-full relative border shadow-ui-sm with-contrast:border-gray-500"
+            :class="{ 'border-dashed border-gray-300 dark:border-gray-700 dark:with-contrast:border-gray-600': isReadOnly }"
+        >
             <ui-popover
+                v-if="!isReadOnly"
                 ref="colorPopover"
                 name="swatches"
                 direction="bottom"
@@ -12,10 +15,13 @@
                 @update:open="popoverOpen = $event"
             >
                 <template #trigger>
-                    <button type="button" class="cursor-pointer size-9 border rounded-full flex items-center justify-center with-contrast:border-gray-500" :aria-label="__('Pick Color')">
+                    <button
+                        type="button"
+                        class="cursor-pointer size-9 border rounded-full flex items-center justify-center with-contrast:border-gray-500"
+                        :aria-label="__('Pick Color')"
+                    >
                         <div
                             class="size-8 rounded-full"
-                            :class="{ 'cursor-not-allowed': isReadOnly }"
                             :style="{ 'background-color': customColor || value }"
                         />
                     </button>
@@ -57,8 +63,29 @@
                 </template>
             </ui-popover>
 
+            <div
+                v-else-if="hasColorSelected"
+                class="pointer-events-none flex size-9 shrink-0 items-center justify-center rounded-full border border-transparent"
+                role="img"
+                :aria-label="__('Color')"
+            >
+                <div
+                    class="size-8 rounded-full"
+                    :style="{ 'background-color': customColor || value }"
+                />
+            </div>
+
+            <div
+                v-else
+                class="pointer-events-none flex h-9 min-h-9 shrink-0 items-center justify-center rounded-full bg-gray-50 px-4 text-sm text-gray-400 dark:bg-gray-900 dark:text-gray-400"
+                role="status"
+                data-color-readonly-empty
+            >
+                {{ __('None') }}
+            </div>
+
             <input
-                v-if="config.allow_any"
+                v-if="config.allow_any && (!isReadOnly || hasColorSelected)"
                 class="font-mono text-sm px-2 w-24 outline-none"
                 maxlength="7"
                 type="text"
@@ -69,7 +96,7 @@
             />
         </div>
 
-        <ui-button v-if="value" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" />
+        <ui-button v-if="value && !isReadOnly" icon="x" :aria-label="__('Reset')" @click="resetColor" round inset size="sm" variant="ghost" class="ms-1" />
     </div>
 </template>
 
@@ -98,6 +125,14 @@ export default {
     },
 
     computed: {
+        hasColorSelected() {
+            const v = this.value;
+            if (v == null || v === false) return false;
+            if (typeof v === 'string' && v.trim() === '') return false;
+
+            return true;
+        },
+
         replicatorPreview() {
             if (!this.showFieldPreviews) return;
 
diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index 0f0f1742f9f..1c7b0475da0 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,5 +1,13 @@
 <template>
     <div class="datetime min-w-[145px]">
+        <div
+            v-if="isReadOnly && !hasDate && !isInline"
+            class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+            data-date-readonly-empty
+        >
+            {{ __('None') }}
+        </div>
+
         <Button :text="__('Add Date')" icon="calendar" v-if="!isReadOnly && !isInline && !hasDate" @click="addDate" />
 
         <Component
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index c6ee19b8aa3..39249fffb2b 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -64,6 +64,7 @@ export default {
                 this.readOnly ||
                 this.config.visibility === 'read_only' ||
                 this.config.visibility === 'computed' ||
+                this.config.read_only === true ||
                 false
             );
         },
diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index 0b48bf99c7b..73d6f076203 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -2,7 +2,7 @@
     <div class="flex gap-2 sm:gap-3">
         <!-- Link type selector -->
         <div class="w-fit">
-            <Select :options v-model="option"  />
+            <Select :options v-model="option" :read-only="isReadOnly" />
         </div>
 
         <div class="flex-1 flex">
@@ -14,6 +14,7 @@
                 :config="meta.entry.config"
                 :meta="meta.entry.meta"
                 :value="selectedEntries"
+                :read-only="isReadOnly"
                 @update:meta="meta.entry.meta = $event"
                 @update:value="entriesSelected"
                 button-size="base"
@@ -28,6 +29,7 @@
                 ref="assets"
                 handle="asset"
                 :value="selectedAssets"
+                :read-only="isReadOnly"
                 :config="meta.asset.config"
                 :meta="meta.asset.meta"
                 @update:value="assetsSelected"
@@ -102,22 +104,22 @@ export default {
             if (this.metaChanging) return;
 
             if (option === null) {
-                this.update(null);
+                if (!this.isReadOnly) this.update(null);
             } else if (option === 'url') {
-                this.updateDebounced(this.urlValue);
+                if (!this.isReadOnly) this.updateDebounced(this.urlValue);
             } else if (option === 'first-child') {
-                this.update('@child');
+                if (!this.isReadOnly) this.update('@child');
             } else if (option === 'entry') {
                 if (this.entryValue) {
-                    this.update(this.entryValue);
-                } else {
-                    setTimeout(() => this.$refs.entries.linkExistingItem(), 0);
+                    if (!this.isReadOnly) this.update(this.entryValue);
+                } else if (!this.isReadOnly) {
+                    setTimeout(() => this.$refs.entries?.linkExistingItem(), 0);
                 }
             } else if (option === 'asset') {
                 if (this.assetValue) {
-                    this.update(this.assetValue);
-                } else {
-                    setTimeout(() => this.$refs.assets.openSelector(), 0);
+                    if (!this.isReadOnly) this.update(this.assetValue);
+                } else if (!this.isReadOnly) {
+                    setTimeout(() => this.$refs.assets?.openSelector(), 0);
                 }
             }
 
@@ -126,6 +128,7 @@ export default {
 
         urlValue(url) {
             if (this.metaChanging) return;
+            if (this.isReadOnly) return;
             this.syncUrlDebounced(url);
         },
 
@@ -158,12 +161,14 @@ export default {
         },
 
         entriesSelected(entries) {
+            if (this.isReadOnly) return;
             this.selectedEntries = entries;
             this.update(this.entryValue);
             this.updateMeta({ ...this.meta, initialSelectedEntries: entries });
         },
 
         assetsSelected(assets) {
+            if (this.isReadOnly) return;
             this.selectedAssets = assets;
             this.update(this.assetValue);
             this.updateMeta({ ...this.meta, initialSelectedAssets: assets });
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index e93fedcdd85..b5b9a8e7b0a 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -1,5 +1,12 @@
 <template>
     <div>
+        <div
+            v-if="isReadOnly && data.length === 0"
+            class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+            data-list-readonly-empty
+        >
+            {{ __('None') }}
+        </div>
         <table class="table-contained" v-if="data.length > 0">
             <sortable-list
                 v-model="data"
diff --git a/resources/js/components/fieldtypes/RangeFieldtype.vue b/resources/js/components/fieldtypes/RangeFieldtype.vue
index 7aecbb5101d..6355d556cbe 100644
--- a/resources/js/components/fieldtypes/RangeFieldtype.vue
+++ b/resources/js/components/fieldtypes/RangeFieldtype.vue
@@ -1,16 +1,24 @@
 <template>
-    <div class="flex items-center gap-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-2 @lg:px-4 @lg:py-3 with-contrast:border with-contrast:border-gray-500">
+    <div
+        class="
+            flex items-center gap-2 rounded-lg bg-gray-50 p-2 @lg:px-4 @lg:py-3 dark:bg-gray-800
+            with-contrast:border with-contrast:border-gray-500
+            data-readonly:border data-readonly:border-dashed! data-readonly:border-gray-300 data-readonly:with-contrast:border-gray-100
+            data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:border-gray-600!
+            data-readonly:dark:bg-gray-900
+        "
+        :data-readonly="isReadOnly ? true : undefined"
+    >
         <ui-subheading size="lg" v-if="config.prepend" :text="__(config.prepend)" class="whitespace-nowrap" />
         <input
-            class="min-w-0 flex-1 w-full"
+            class="min-w-0 flex-1 w-full disabled:opacity-60"
             type="range"
             v-model="val"
-            :disabled="config.disabled"
+            :disabled="config.disabled || isReadOnly"
             :id="fieldId"
             :max="config.max"
             :min="config.min"
             :name="name"
-            :read-only="isReadOnly"
             :step="config.step"
             :width="config.width"
         />
@@ -64,6 +72,7 @@ export default {
             this.val = value;
         },
         val(value) {
+            if (this.isReadOnly) return;
             this.updateDebounced(value);
         },
     },
diff --git a/resources/js/components/fieldtypes/RevealerFieldtype.vue b/resources/js/components/fieldtypes/RevealerFieldtype.vue
index 3da598ebdd2..8055dbcb07c 100644
--- a/resources/js/components/fieldtypes/RevealerFieldtype.vue
+++ b/resources/js/components/fieldtypes/RevealerFieldtype.vue
@@ -1,17 +1,23 @@
 <template>
     <div>
         <div class="flex items-center gap-2" v-if="isToggleMode">
-            <Switch :model-value="isRevealed" @update:model-value="update" :read-only="isReadOnly" :id="id" />
+            <Switch
+                :model-value="isRevealed"
+                :disabled="config.disabled || isReadOnly"
+                :id="id"
+                @update:model-value="onToggleUpdate"
+            />
             <Heading v-if="config.input_label" v-html="$markdown(__(config.input_label), { openLinksInNewTabs: true })" />
         </div>
         <Button
             v-else
             icon="eye-closed"
-            @click="buttonReveal"
-            :read-only="isReadOnly"
-            :disabled="config.disabled"
+            :disabled="config.disabled || isReadOnly"
             :text="config.input_label || __('Show Fields')"
             :v-tooltip="__(config.instructions)"
+            :data-readonly="isReadOnly ? true : undefined"
+            :class="isReadOnly ? revealerReadOnlyButtonClass : undefined"
+            @click="buttonReveal"
         />
     </div>
 </template>
@@ -31,6 +37,10 @@ const isRevealed = computed(() => props.value);
 const isToggleMode = computed(() => data_get(props.config, 'mode') === 'toggle');
 const fieldPath = computed(() => props.fieldPathPrefix ? `${props.fieldPathPrefix}.${props.handle}` : props.handle);
 
+/** Dashed read-only aesthetic on the control (matches radio/checkbox field controls). */
+const revealerReadOnlyButtonClass =
+    'data-readonly:border-dashed! data-readonly:border-gray-300 data-readonly:with-contrast:border-gray-100 data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:border-gray-600!';
+
 onMounted(() => setRevealerField(fieldPath.value));
 onBeforeUnmount(() => unsetRevealerField(fieldPath.value));
 
@@ -39,6 +49,11 @@ watch(fieldPath, (fieldPath, oldFieldPath) => {
     nextTick(() => setRevealerField(fieldPath));
 });
 
+function onToggleUpdate(value) {
+    if (isReadOnly.value) return;
+    update(value);
+}
+
 function buttonReveal() {
     if (isReadOnly.value) return;
 
diff --git a/resources/js/components/fieldtypes/TimeFieldtype.vue b/resources/js/components/fieldtypes/TimeFieldtype.vue
index 5a6c28b6f84..5fe83267a88 100644
--- a/resources/js/components/fieldtypes/TimeFieldtype.vue
+++ b/resources/js/components/fieldtypes/TimeFieldtype.vue
@@ -1,34 +1,44 @@
 <template>
-	<Button :text="__('Set Time')" icon="fieldtype-time" v-if="!isReadOnly && !config.disabled && !hasTime" @click="addTime" />
+    <div class="min-w-[145px]">
+        <div
+            v-if="isReadOnly && !hasTime"
+            class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+            data-time-readonly-empty
+        >
+            {{ __('None') }}
+        </div>
 
-    <TimePicker
-	    v-if="hasTime"
-        ref="time"
-        :model-value="timePickerValue"
-        :granularity="useSeconds ? 'second' : 'minute'"
-        :disabled="config.disabled"
-        :read-only="isReadOnly"
-        @update:model-value="timePickerUpdated"
-    />
+        <Button :text="__('Set Time')" icon="fieldtype-time" v-if="!isReadOnly && !config.disabled && !hasTime" @click="addTime" />
+
+        <TimePicker
+            v-if="hasTime"
+            ref="time"
+            :model-value="timePickerValue"
+            :granularity="useSeconds ? 'second' : 'minute'"
+            :disabled="config.disabled"
+            :read-only="isReadOnly"
+            @update:model-value="timePickerUpdated"
+        />
+    </div>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import {Button, TimePicker} from '@/components/ui';
+import { Button, TimePicker } from '@/components/ui';
 import { parseTime } from '@internationalized/date';
 
 export default {
     mixins: [Fieldtype],
 
     components: {
-	    Button,
+        Button,
         TimePicker,
     },
 
     computed: {
-	    hasTime() {
-		    return !!(this.config.required || this.value);
-	    },
+        hasTime() {
+            return !!(this.config.required || this.value);
+        },
 
         useSeconds() {
             return this.config.seconds_enabled;
@@ -56,14 +66,14 @@ export default {
             this.update(value);
         },
 
-	    addTime() {
-		    const date = new Date();
-		    const hours = String(date.getHours()).padStart(2, '0');
-		    const minutes = String(date.getMinutes()).padStart(2, '0');
-		    const seconds = String(date.getSeconds()).padStart(2, '0');
+        addTime() {
+            const date = new Date();
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
 
-		    this.update(this.useSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`);
-	    },
+            this.update(this.useSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`);
+        },
     },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 848a08d4fbf..afc4c1647e9 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -1,16 +1,23 @@
 <template>
-    <div class="flex flex-col space-y-3 p-1.5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-700 rounded-xl">
+    <div
+        class="
+            flex flex-col space-y-3 rounded-xl border border-gray-300 bg-gray-100 p-1.5 dark:border-gray-700 dark:bg-gray-900
+            data-readonly:border-dashed! data-readonly:border-gray-300 data-readonly:with-contrast:border-gray-100
+            data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:border-gray-600!
+        "
+        :data-readonly="isReadOnly ? true : undefined"
+    >
         <ui-input-group>
             <ui-input-group-prepend :text="__('URL')" />
             <ui-input
                 :model-value="value"
-                :isReadOnly="isReadOnly"
+                :read-only="isReadOnly"
                 :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
                 :aria-label="__('Video URL')"
-                @update:model-value="update"
+                @update:model-value="onInputUpdate"
                 @focus="$emit('focus')"
                 @blur="$emit('blur')"
-                input-class="border-s-0"
+                input-class="border-s-0 read-only:border-solid"
             />
         </ui-input-group>
         <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
@@ -32,6 +39,13 @@ import Fieldtype from './Fieldtype.vue';
 export default {
     mixins: [Fieldtype],
 
+    methods: {
+        onInputUpdate(value) {
+            if (this.isReadOnly) return;
+            this.update(value);
+        },
+    },
+
     data() {
         return {
             isVisible: false,
diff --git a/resources/js/components/fieldtypes/WidthFieldtype.vue b/resources/js/components/fieldtypes/WidthFieldtype.vue
index d192ebbac4b..19f79225f5a 100644
--- a/resources/js/components/fieldtypes/WidthFieldtype.vue
+++ b/resources/js/components/fieldtypes/WidthFieldtype.vue
@@ -2,6 +2,7 @@
     <width-selector
         :name="name"
         :model-value="value"
+        :read-only="isReadOnly"
         @update:model-value="updateDebounced"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 170ef3f7662..6592a91a741 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -155,7 +155,8 @@ import Paragraph from '@tiptap/extension-paragraph';
 import Strike from '@tiptap/extension-strike';
 import Subscript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
-import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { BardTable as Table } from './BardTable.js';
 import Text from '@tiptap/extension-text';
 import TextAlign from '@tiptap/extension-text-align';
 import Typography from '@tiptap/extension-typography';
diff --git a/resources/js/components/fieldtypes/bard/BardTable.js b/resources/js/components/fieldtypes/bard/BardTable.js
new file mode 100644
index 00000000000..676d20296ff
--- /dev/null
+++ b/resources/js/components/fieldtypes/bard/BardTable.js
@@ -0,0 +1,31 @@
+import { Table as TableBase } from '@tiptap/extension-table';
+import { columnResizing, tableEditing } from '@tiptap/pm/tables';
+
+/**
+ * TipTap's Table extension only registers columnResizing when `resizable && editor.isEditable`,
+ * so read-only Bard loses the tableWrapper node view and tables render as bare <table> nodes.
+ * Mount columnResizing whenever `resizable` is true so DOM matches editable mode; resize
+ * interaction is already inactive when the editor is not editable.
+ */
+export const BardTable = TableBase.extend({
+    addProseMirrorPlugins() {
+        const isResizable = this.options.resizable;
+
+        return [
+            ...(isResizable
+                ? [
+                      columnResizing({
+                          handleWidth: this.options.handleWidth,
+                          cellMinWidth: this.options.cellMinWidth,
+                          defaultCellMinWidth: this.options.cellMinWidth,
+                          View: this.options.View,
+                          lastColumnResizable: this.options.lastColumnResizable,
+                      }),
+                  ]
+                : []),
+            tableEditing({
+                allowTableNodeSelection: this.options.allowTableNodeSelection,
+            }),
+        ];
+    },
+});
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 0ce7b2c4dd6..b9592f31a81 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -18,7 +18,7 @@
         >
             <div ref="content" hidden />
             <header
-                class="group/header animate-border-color show-focus-within flex items-center rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
+                class="group/header animate-border-color show-focus-within flex items-center rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 read-only:dark:!bg-transparent hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
                 :class="{
                     'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed && hasFields
                 }"
diff --git a/resources/js/components/fieldtypes/fieldtype.js b/resources/js/components/fieldtypes/fieldtype.js
index 5422675d6dc..14822c68ce2 100644
--- a/resources/js/components/fieldtypes/fieldtype.js
+++ b/resources/js/components/fieldtypes/fieldtype.js
@@ -21,6 +21,7 @@ const use = function(emit, props) {
             props.readOnly ||
             props.config.visibility === 'read_only' ||
             props.config.visibility === 'computed' ||
+            props.config.read_only === true ||
             false
         );
     });
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index e1a6df9ce2d..c8a6b1e275c 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -15,7 +15,16 @@
                     <ui-error-message v-if="hasExcessRows" :text="__('Max Rows') + ': ' + maxRows" />
                     <ui-error-message v-else-if="hasNotEnoughRows" :text="__('Min Rows') + ': ' + minRows" />
 
+                    <div
+                        v-if="isReadOnly && (!value || value.length === 0)"
+                        class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+                        data-grid-readonly-empty
+                    >
+                        {{ __('None') }}
+                    </div>
+
                     <component
+                        v-if="(value && value.length > 0) || !isReadOnly"
                         :is="component"
                         :fields="fields"
                         :rows="value"
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 4145a83a725..24ecbf1fc07 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -3,7 +3,11 @@
         <set-picker :enabled="enabled" :sets="groups" align="start" :loading-set="loadingSet" @added="addSet">
             <template #trigger>
                 <div class="inline-flex relative pt-2" :class="{ 'pt-6': showConnector }">
-                    <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
+                    <div
+                        v-if="showConnector"
+                        class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-dashed z-0 dark:bg-gray-850"
+                        :class="readOnly ? 'border-gray-300 dark:border-gray-700/35' : 'border-gray-400 dark:border-gray-600'"
+                    />
                     <Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative" />
                 </div>
             </template>
@@ -17,12 +21,15 @@
             >
                 <div
                     v-if="showConnector"
-                    class="absolute group-focus-within:opacity-0 transition-opacity group-focus-within:transition-none delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
-                    :class="{
-                        'group-hover:opacity-0': enabled,
-                        'h-[65%] top-[30%] opacity-60': isFirst,
-                        'h-full opacity-100': !isFirst,
-                    }"
+                    class="absolute group-focus-within:opacity-0 transition-opacity group-focus-within:transition-none delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-dashed z-0 dark:bg-gray-850"
+                    :class="[
+                        readOnly ? 'border-gray-300 dark:border-gray-700/35' : 'border-gray-400 dark:border-gray-600',
+                        {
+                            'group-hover:opacity-0': enabled,
+                            'h-[65%] top-[30%] opacity-60': isFirst,
+                            'h-full opacity-100': !isFirst,
+                        },
+                    ]"
                 />
                 <button
                     v-if="enabled"
@@ -56,6 +63,7 @@ const props = defineProps({
     variant: { type: String, default: 'button' },
     isFirst: { type: Boolean, default: false },
     loadingSet: { type: String, default: null },
+    readOnly: { type: Boolean, default: false },
 });
 
 const label = computed(() => props.label ? __(props.label) : __('Add Set'));
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 085eafa56f7..150d4e2e2a7 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -59,6 +59,7 @@
                                             :sets="setConfigs"
                                             :index="index"
                                             :enabled="canAddSet"
+                                            :read-only="isReadOnly"
                                             :is-first="index === 0"
                                             :show-connector="!(index === 0 && config.hide_display)"
                                             :loading-set="loadingSet"
@@ -77,6 +78,7 @@
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
+                            :read-only="isReadOnly"
                             :loading-set="loadingSet"
                             @added="addSet"
                         />
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 3e48b0fb8f6..68607b27cf6 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -132,7 +132,9 @@ reveal.use(rootEl, () => emit('expanded'));
             data-replicator-set
             class="relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm dark:[&_[data-ui-switch]]:border-gray-600 dark:[&_[data-ui-switch]]:border-1"
             :class="{
-                'border-red-500': hasError
+                'border-red-500': hasError,
+                'border-dashed border-gray-300 dark:border-gray-600': readOnly && !hasError,
+                'border-dashed': readOnly && hasError,
             }"
             :data-collapsed="collapsed ?? undefined"
             :data-error="hasError ?? undefined"
@@ -141,7 +143,7 @@ reveal.use(rootEl, () => emit('expanded'));
             :data-type="config.handle"
         >
             <header
-                class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
+                class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 read-only:dark:!bg-transparent hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md"
                 :class="{
                     'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed && hasFields
                 }"
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index d94bfcf690d..d46afb5f0d6 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -1,7 +1,12 @@
 <template>
     <div
-        class="shadow-ui-sm relative z-(--z-index-above) flex w-full h-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 [&:has(.cursor-grab)]:px-1.5 py-1.5 mb-1.5 last:mb-0 text-base dark:border-gray-700 dark:with-contrast:border-gray-500 dark:bg-gray-900"
-        :class="{ invalid: item.invalid }"
+        class="shadow-ui-sm relative z-(--z-index-above) flex w-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 [&:has(.cursor-grab)]:px-1.5 py-1.5 mb-1.5 last:mb-0 text-base dark:border-gray-700 dark:with-contrast:border-gray-500 dark:bg-gray-900"
+        :class="{
+            'h-full': !readOnlyFormRow,
+            'h-10 min-h-10 shrink-0 py-0': readOnlyFormRow,
+            invalid: item.invalid,
+            'border-dashed': readOnlyEntriesRow,
+        }"
     >
         <ui-icon name="handles" class="item-move sortable-handle size-4 cursor-grab text-gray-300 dark:text-gray-700" v-if="sortable" />
         <div class="flex flex-1 items-center line-clamp-1 text-sm text-gray-600 dark:text-gray-300">
@@ -104,6 +109,20 @@ export default {
         };
     },
 
+    computed: {
+        /** Entries + Form relationship fieldtypes: dashed row when read-only (row = item selected). */
+        readOnlyEntriesRow() {
+            return (
+                this.readOnly &&
+                ['entries', 'form'].includes(this.config?.type)
+            );
+        },
+
+        readOnlyFormRow() {
+            return this.readOnly && this.config?.type === 'form';
+        },
+    },
+
     methods: {
         edit() {
             if (!this.editable) return;
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 7d010f0c4eb..2d73f630f2d 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="relationship-input @container w-full" :class="{ 'relationship-input-empty': items.length == 0 }">
         <RelationshipSelectField
-            v-if="!initializing && usesSelectField"
+            v-if="showSelectDropdown"
             :config="config"
             :items="items"
             :multiple="maxItems > 1"
@@ -19,10 +19,18 @@
         <Icon v-if="initializing" name="loading" />
 
         <template v-if="shouldShowSelectedItems">
+            <div
+                v-if="readOnly && items.length === 0 && !usesSelectField"
+                class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+                data-relationship-readonly-empty
+            >
+                {{ __('None') }}
+            </div>
             <div
                 v-if="items.length"
                 ref="items"
-                :class="{ 'mt-2': usesSelectField && items.length }"
+                class="relationship-input-items h-full"
+                :class="{ 'mt-2': showSelectDropdown && items.length }"
             >
                 <component
                     :is="itemComponent"
@@ -31,7 +39,7 @@
                     :item="item"
                     :config="config"
                     :status-icon="statusIcons"
-                    :editable="canEdit && (item.editable || item.editable === undefined)"
+                    :editable="!readOnly && canEdit && (item.editable || item.editable === undefined)"
                     :sortable="!readOnly && canReorder"
                     :read-only="readOnly"
                     :form-component="formComponent"
@@ -180,6 +188,14 @@ export default {
     },
 
     computed: {
+        /** Select combobox: hidden in read-only single-select when items render below (avoids double height). */
+        showSelectDropdown() {
+            if (this.initializing || !this.usesSelectField) return false;
+            if (this.readOnly && this.maxItems === 1 && this.items.length > 0) return false;
+
+            return true;
+        },
+
         icon() {
             if (this.config.type === 'taxonomies') {
                 return 'add-tag';
@@ -251,7 +267,9 @@ export default {
         shouldShowSelectedItems() {
             if (this.initializing) return false;
 
-            if (this.usesSelectField && this.maxItems === 1) return false;
+            // Hide duplicate stack under single-select combobox while editing; keep it in read-only
+            // so the selected item(s) stay visible when the combobox is disabled.
+            if (this.usesSelectField && this.maxItems === 1 && !this.readOnly) return false;
 
             return true;
         },
@@ -319,9 +337,10 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-	    openSelector() {
-			this.isSelecting = true;
-	    },
+        openSelector() {
+            if (this.readOnly) return;
+            this.isSelecting = true;
+        },
 
         selectionsUpdated(selections) {
             this.getDataForSelections(selections).then(() => {
@@ -402,11 +421,13 @@ export default {
         },
 
         itemCreated(item) {
+            if (this.readOnly) return;
             this.$emit('item-data-updated', [...this.data, item]);
             this.update([...this.value, item.id]);
         },
 
         selectFieldSelected(selectedItemData) {
+            if (this.readOnly) return;
             this.$emit('item-data-updated', selectedItemData);
             this.update(selectedItemData.map((item) => item.id));
         },
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index ffe66b49924..a78fee6f66f 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -1,41 +1,37 @@
 <template>
-    <div>
-        <Combobox
-            searchable
-            :disabled="config.disabled"
-            :ignore-filter="typeahead"
-            :max-selections="maxSelections"
-            :model-value="items.map((item) => item.id)"
-            :multiple
-            :options
-            :placeholder="__(config.placeholder) || __('Choose...')"
-            :read-only="readOnly"
-            :taggable="isTaggable"
-            :close-on-select="isTaggable"
-            option-label="title"
-            option-value="id"
-            @update:modelValue="itemsSelected"
-            @search="search"
-        >
-            <template #option="{ title, hint, status }">
-                <div class="flex w-full text-left items-center gap-2">
-                    <StatusIndicator v-if="status" :status="status" />
-                    <div v-text="title" class="truncate grow" />
-                    <ui-badge v-if="hint" size="sm" v-text="hint" />
-                </div>
-            </template>
-            <template #no-options>
-                <div v-text="noOptionsText" />
-            </template>
-            <template #selected-option>
-                <span v-if="items.length === 1" v-text="items[0].title" class="truncate"></span>
-            </template>
-            <template #selected-options>
-                <!-- We don't want to display the selected options here. The RelationshipInput component does that for us. -->
-                <div></div>
-            </template>
-        </Combobox>
-    </div>
+    <Combobox
+        searchable
+        :disabled="config.disabled"
+        :ignore-filter="typeahead"
+        :max-selections="maxSelections"
+        :model-value="items.map((item) => item.id)"
+        :multiple
+        :options
+        :placeholder="__(config.placeholder) || __('Choose...')"
+        :read-only="readOnly"
+        :taggable="isTaggable"
+        :close-on-select="isTaggable"
+        option-label="title"
+        option-value="id"
+        @update:modelValue="itemsSelected"
+        @search="search"
+    >
+        <template #option="{ title, hint, status }">
+            <div class="flex w-full text-left items-center gap-2">
+                <StatusIndicator v-if="status" :status="status" />
+                <div v-text="title" class="truncate grow" />
+                <ui-badge v-if="hint" size="sm" v-text="hint" />
+            </div>
+        </template>
+        <template #no-options>
+            <div v-text="noOptionsText" />
+        </template>
+        <template #selected-option>
+            <span v-if="items.length === 1" v-text="items[0].title" class="truncate"></span>
+        </template>
+        <!-- Override default selected-options (badges) so RelationshipInput lists rows below -->
+        <template #selected-options></template>
+    </Combobox>
 </template>
 
 <script>
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 175a1ebf3d1..9cc041fc29a 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -69,6 +69,7 @@ const buttonClasses = computed(() => {
                 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:disabled:from-gray-950/50 dark:disabled:to-gray-950/50'
                 ],
             },
             size: {
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 88c3e956021..37ea02d5614 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -47,27 +47,34 @@ const handleKeydown = (event) => {
 const checkboxClasses = computed(() => {
     return cva({
         base: [
-            'shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 with-contrast:border-gray-500 bg-white',
-            'dark:bg-gray-500 dark:border-gray-900',
+            'group shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 with-contrast:border-gray-100 bg-white outline-hidden focus:focus-outline',
+            'dark:bg-gray-500 dark:border-none',
             'data-[state=checked]:border-ui-accent-bg data-[state=checked]:bg-ui-accent-bg',
             'data-[state=indeterminate]:border-ui-accent-bg data-[state=indeterminate]:bg-ui-accent-bg',
-            'dark:border-none',
-            'dark:data-[disabled]:bg-ui-accent-bg/60 dark:data-[disabled]:border-ui-accent-bg/70',
-            'dark:data-[disabled]:text-gray-400 dark:data-[disabled]:cursor-not-allowed',
-            'shrink-0'
+            'dark:disabled:data-[state=checked]:border-none dark:disabled:data-[state=checked]:bg-gray-300',
+            'dark:disabled:data-[state=indeterminate]:border-none dark:disabled:data-[state=indeterminate]:bg-gray-300',
+            'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+            'shrink-0',
         ],
         variants: {
             size: {
                 sm: 'size-3.75',
                 base: 'size-4',
             },
+            readOnly: {
+                true: [
+                    'data-readonly:border-dashed! data-readonly:border-gray-500/90 data-readonly:with-contrast:border-gray-100',
+                    'data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:bg-gray-900',
+                ],
+                false: '',
+            },
         },
     })({ ...props });
 });
 
 const containerClasses = computed(() => {
     const classes = cva({
-        base: 'flex gap-2',
+        base: 'flex gap-1.5',
         variants: {
             align: {
                 start: 'items-start',
@@ -107,6 +114,7 @@ const conditionalProps = computed(() => {
     <div :class="containerClasses">
         <CheckboxRoot
             :disabled="readOnly || disabled"
+            :data-readonly="readOnly ? true : undefined"
             :id
             :name="name"
             :value="value"
@@ -116,7 +124,9 @@ const conditionalProps = computed(() => {
             :class="checkboxClasses"
             :tabindex="attrs.tabindex"
         >
-            <CheckboxIndicator class="relative flex h-full w-full items-center justify-center text-white">
+            <CheckboxIndicator
+                class="relative flex h-full w-full items-center justify-center text-white group-disabled:dark:group-data-[state=checked]:text-gray-900 group-disabled:dark:group-data-[state=indeterminate]:text-gray-900"
+            >
                 <!-- Checkmark icon for checked state -->
                 <svg v-if="!indeterminate" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-2.5 shrink-0" aria-hidden="true"><path d="M9 1L3.5 6.5L1 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
                 <!-- Dash icon for indeterminate state -->
@@ -127,10 +137,16 @@ const conditionalProps = computed(() => {
             </span>
         </CheckboxRoot>
         <div class="flex flex-col" v-if="!solo">
-            <label class="text-sm font-normal antialiased dark:text-gray-200" :for="id">
+            <label
+                class="text-sm font-normal antialiased dark:text-gray-200"
+                :class="{ 'opacity-50': disabled }"
+                :for="id"
+            >
                 <slot>{{ label || value }}</slot>
             </label>
-            <p v-if="description" :id="`${id}-description`" class="mt-0.5 block text-xs leading-snug text-gray-500 dark:text-gray-200">{{ description }}</p>
+            <p v-if="description" :id="`${id}-description`" class="mt-0.5 block text-xs leading-snug text-gray-500">
+                {{ description }}
+            </p>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index dc11c2b1f75..8278e859b5f 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -178,9 +178,12 @@ function initVisibilityObserver() {
 }
 
 watch(
-    () => props.disabled,
-    (value) => {
-        codemirror.value?.setOption('readOnly', value ? 'nocursor' : false);
+    () => [props.disabled, props.readOnly],
+    () => {
+        codemirror.value?.setOption(
+            'readOnly',
+            props.disabled || props.readOnly ? 'nocursor' : false,
+        );
     },
     { immediate: true },
 );
@@ -315,7 +318,14 @@ watch(
                     <span v-else v-text="modeLabel" class="font-mono text-xs text-gray-700 dark:text-gray-300" />
                 </div>
             </div>
-            <div ref="codemirrorElement" class="font-mono text-xs border border-gray-300 dark:border dark:border-gray-700 dark:bg-gray-900 rounded-lg [&_.CodeMirror]:rounded-lg" :class="{ 'dark:border-t-0 rounded-t-none [&_.CodeMirror]:rounded-t-none': showToolbar }"></div>
+            <div
+                ref="codemirrorElement"
+                class="font-mono text-xs border border-gray-300 dark:border dark:border-gray-700 dark:bg-gray-900 rounded-lg [&_.CodeMirror]:rounded-lg"
+                :class="{
+                    'dark:border-t-0 rounded-t-none [&_.CodeMirror]:rounded-t-none': showToolbar,
+                    'border-dashed with-contrast:border-gray-500 dark:border-gray-700': readOnly,
+                }"
+            ></div>
         </div>
     </portal>
 </template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 6918e403ae3..70bbe539638 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -173,7 +173,12 @@ const isReadOnly = computed(() => {
 
     if (isTrackingOriginValues.value && isSyncable.value && !isLocalizable.value) return true;
 
-    return isLocked.value || props.config.visibility === 'read_only' || false;
+    return (
+        isLocked.value ||
+        props.config.visibility === 'read_only' ||
+        props.config.read_only === true ||
+        false
+    );
 });
 
 const lockedBy = computed(() => fieldLocks.value[handle] ?? null);
@@ -270,7 +275,13 @@ const fieldtypeComponentEvents = computed(() => ({
             <div class="text-xs text-red-600" v-if="!fieldtypeComponentExists && fieldtypeComponent !== 'spacer-fieldtype'">
                 Component <code v-text="fieldtypeComponent"></code> does not exist.
             </div>
-            <div :dir="direction" v-if="fieldtypeComponentExists" @focusin="focused" @focusout="blurred" :class="{ 'pointer-events-none select-none': isLocked }">
+            <div
+                :dir="direction"
+                v-if="fieldtypeComponentExists"
+                @focusin="focused"
+                @focusout="blurred"
+                :class="{ 'pointer-events-none select-none': isLocked }"
+            >
                 <Component
                     ref="fieldtype"
                     :is="fieldtypeComponent"
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 64ef4c14901..b3560230977 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -21,11 +21,14 @@ const id = useId();
             :id
             :value="value"
             :disabled="readOnly || disabled"
+            :data-readonly="readOnly ? true : undefined"
             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
                 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
+                data-readonly:border-dashed! data-readonly:border-gray-500/90 data-readonly:with-contrast:border-gray-100
+                data-readonly:dark:border! data-readonly:dark:border-dashed! data-readonly:dark:bg-gray-900
             "
         >
             <RadioGroupIndicator