diff --git a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
index 50293c191e9..b6503d18e6d 100644
--- a/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
+++ b/resources/js/components/fieldtypes/CheckboxesFieldtype.vue
@@ -4,6 +4,7 @@
             <Checkbox
                 v-for="(option, index) in options"
                 :disabled="config.disabled"
+                :id="`${id}_${index}`"
                 :key="index"
                 :label="option.label || option.value"
                 :read-only="isReadOnly"
diff --git a/resources/js/components/fieldtypes/RadioFieldtype.vue b/resources/js/components/fieldtypes/RadioFieldtype.vue
index 386ede7013f..dddf9c2e6a0 100644
--- a/resources/js/components/fieldtypes/RadioFieldtype.vue
+++ b/resources/js/components/fieldtypes/RadioFieldtype.vue
@@ -3,6 +3,7 @@
         <Radio
             v-for="(option, index) in options"
             :disabled="config.disabled"
+            :id="`${id}_${index}`"
             :key="index"
             :label="option.label || option.value"
             :read-only="isReadOnly"
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index bb5f8fe5f09..804b6a44727 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 { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
+import { computed, useAttrs, useId } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import { injectCheckboxContext } from './Group.vue';
@@ -10,6 +10,8 @@ defineOptions({ inheritAttrs: false });
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** Optional ID for the checkbox input */
+    id: { type: String, default: () => useId() },
     /** 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 */
@@ -37,8 +39,6 @@ const emit = defineEmits(['update:modelValue', 'keydown']);
 
 const { appearance } = injectCheckboxContext() ?? { appearance: computed(() => 'default') };
 
-const id = useId();
-
 const handleKeydown = (event) => {
     emit('keydown', event);
 
@@ -97,7 +97,7 @@ const conditionalProps = computed(() => {
 
     // Only add aria-describedby if description exists AND it's not a solo checkbox
     if (props.description && !props.solo) {
-        props_obj['aria-describedby'] = `${id}-description`;
+        props_obj['aria-describedby'] = `${props.id}-description`;
     }
 
     if (props.solo && (props.label || props.value)) {
@@ -112,7 +112,7 @@ const conditionalProps = computed(() => {
     <div :class="containerClasses" data-ui-checkbox-item>
         <CheckboxRoot
             :disabled="readOnly || disabled"
-            :id
+            :id="props.id"
             :name="name"
             :value="value"
             v-bind="conditionalProps"
@@ -132,10 +132,10 @@ const conditionalProps = computed(() => {
             </span>
         </CheckboxRoot>
         <div class="flex flex-col" v-if="!solo">
-            <label class="text-sm font-normal antialiased cursor-pointer dark:text-gray-200 before:absolute before:inset-0 before:content-['']" :for="id">
+            <label class="text-sm font-normal antialiased cursor-pointer dark:text-gray-200 before:absolute before:inset-0 before:content-['']" :for="props.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="`${props.id}-description`" class="mt-0.5 block text-xs leading-snug text-gray-500 dark:text-gray-200">{{ description }}</p>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 4c97b488145..5f47e260f89 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -4,6 +4,8 @@ import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 import { injectRadioContext } from './Group.vue';
 
 const props = defineProps({
+    /** Optional ID for the radio button */
+    id: { type: String, default: () => useId() },
     /** Description text to display below the label */
     description: { type: String, default: null },
     disabled: { type: Boolean, default: false },
@@ -15,8 +17,6 @@ const props = defineProps({
 });
 
 const { appearance } = injectRadioContext() ?? { appearance: computed(() => 'default') };
-
-const id = useId();
 </script>
 
 <template>
@@ -26,10 +26,10 @@ const id = useId();
         data-ui-radio-item
     >
         <RadioGroupItem
-            :id
+            :id="props.id"
             :value="value"
             :disabled="readOnly || disabled"
-            :aria-describedby="description ? `${id}-description` : undefined"
+            :aria-describedby="description ? `${props.id}-description` : undefined"
             class="
                 shadow-ui-xs mt-0.5 size-4 cursor-default rounded-full
                 focus:focus-outline border border-gray-400/75 bg-white with-contrast:border-gray-100
@@ -48,10 +48,10 @@ const id = useId();
             />
         </RadioGroupItem>
         <div class="flex flex-col" :class="{ 'opacity-50': disabled }">
-            <label class="text-sm font-normal antialiased cursor-pointer dark:text-gray-200 before:absolute before:inset-0 before:content-['']" :for="id">
+            <label class="text-sm font-normal antialiased cursor-pointer dark:text-gray-200 before:absolute before:inset-0 before:content-['']" :for="props.id">
                 <slot>{{ label || value }}</slot>
             </label>
-            <span v-if="description" :id="`${id}-description`" class="mt-0.5 block text-xs leading-snug text-gray-500">{{ description }}</span>
+            <span v-if="description" :id="`${props.id}-description`" class="mt-0.5 block text-xs leading-snug text-gray-500">{{ description }}</span>
         </div>
     </div>
 </template>