manage a hidden template instead since this will come handy when dealing with multiple selection

app/javascript/controllers/combobox_controller.js

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "label", "item", "hiddenField" ]
+  #hiddenField
+
+  static targets = [ "label", "item", "hiddenFieldTemplate" ]
   static values = {
     selectPropertyName: { type: String, default: "aria-checked" },
     defaultValue: String
@@ -30,7 +32,7 @@ export default class extends Controller {
     this.#clearSelection()
     item.setAttribute(this.selectPropertyNameValue, "true")
     this.labelTarget.textContent = this.#selectedLabel
-    this.hiddenFieldTarget.value = item.dataset.comboboxValue
+    this.hiddenField.value = item.dataset.comboboxValue
   }
 
   #clearSelection() {
@@ -38,4 +40,17 @@ export default class extends Controller {
       target.setAttribute(this.selectPropertyNameValue, "false")
     })
   }
+
+  get hiddenField() {
+    if (!this.#hiddenField) {
+      this.#hiddenField = this.#buildHiddenField()
+    }
+    return this.#hiddenField
+  }
+
+  #buildHiddenField() {
+    const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children
+    this.element.appendChild(field)
+    return field
+  }
 }