From 7b9917825142ed2cb361a7009e6e3a28fdce6e85 Mon Sep 17 00:00:00 2001
From: Jan Willem Rigters <janwillem@steets.nl>
Date: Wed, 12 Aug 2026 14:51:50 +0200
Subject: [PATCH] Ability to set an id for the checkboxes and being unique

---
 resources/js/components/fieldtypes/CheckboxesFieldtype.vue | 1 +
 resources/js/components/ui/Checkbox/Item.vue               | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

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/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index bb5f8fe5f09..fb3ce8f87bd 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -16,6 +16,7 @@ const props = defineProps({
     description: { type: String, default: null },
     /** When `true`, disables the checkbox */
     disabled: { type: Boolean, default: false },
+    id: { type: String, default: null },
     /** When `true`, displays the checkbox in an indeterminate state (shows a dash) */
     indeterminate: { type: Boolean, default: false },
     /** Label text to display next to the checkbox */
@@ -37,7 +38,7 @@ const emit = defineEmits(['update:modelValue', 'keydown']);
 
 const { appearance } = injectCheckboxContext() ?? { appearance: computed(() => 'default') };
 
-const id = useId();
+const id = useId(props.id);
 
 const handleKeydown = (event) => {
     emit('keydown', event);