QField Event propagation for label tag property

docs/src/examples/QField/TagWrapper.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md column" style="max-width: 300px">
+      <q-field label="Custom Component Wrapper" stack-label>
+
+        <template v-slot:control>
+          <div class="self-center full-width no-outline" tabindex="0">{{divText}}</div>
+        </template>
+      </q-field>
+
+      <q-field v-model="labelText" tag="label" label="Form Control Field Wrapper" stack-label clearable>
+        <template v-slot:control="{ id, modelValue, emitValue }">
+          <input :id="id" class="q-field__input" :value="modelValue" @input="e => emitValue(e.target.value)">
+        </template>
+      </q-field>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup () {
+    return {
+      divText: ref('div tag content'),
+      labelText: ref('label tag placeholder')
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/field.md

@@ -74,6 +74,15 @@ The `square` prop only makes sense along with Filled, Outlined and Standout desi
 
 ## Basic features
 
+### Tag Wrapper
+Allowing selection between `label` for form control fields and `div` for custom components with a `tag` property, enhances form functionality, and accessibility.
+
+::: warning
+If using `label`, ensure it is associated with form control fields and link the generated ID to the form field to avoid an accessibility violation.
+:::
+
+<DocExample title="Tag" file="TagWrapper" />
+
 ### Clearable
 As a helper, you can use `clearable` prop so user can reset model to `null` through an appended icon.
 

ui/dev/src/pages/form/field.vue

@@ -10,7 +10,7 @@
 
       <h1>Field wrapper tests</h1>
 
-      <q-field tag="div" model-value="We count this" :dark="dark" :dense="dense" label="Field label" stack-label bottom-slots counter tabindex="0">
+      <q-field model-value="We count this" :dark="dark" :dense="dense" label="Field label" stack-label bottom-slots counter tabindex="0">
         <template v-slot:before>
           <q-icon name="event" />
         </template>
@@ -190,7 +190,7 @@
       <p class="caption">
         Control slot: {{ testValue }}
       </p>
-      <q-field filled v-model="testValue" label="Tree Select - Single" tabindex="0">
+      <q-field tag="label" filled v-model="testValue" label="Tree Select - Single" tabindex="0">
         <template v-slot:control="{ id, floatingLabel, value, emitValue }">
           <input :id="id" :value="value" @input="e => emitValue(e.target.value)" v-show="floatingLabel">
         </template>

ui/dev/src/pages/form/input.vue

@@ -73,7 +73,7 @@
 
       <q-input v-bind="props" v-model="text" required label="Required" placeholder="Write something" color="green" />
 
-      <q-field v-bind="props" v-model="text" required label="Required - Custom input">
+      <q-field tag="label" v-bind="props" v-model="text" required label="Required - Custom input">
         <template v-slot:control="{ id, floatingLabel, modelValue, emitValue }">
           <input :id="id" class="q-field__input" :value="modelValue" @input="e => emitValue(e.target.value)" v-show="floatingLabel">
         </template>

ui/src/components/field/QField.js

@@ -12,16 +12,16 @@ export default createComponent({
 
     tag: {
       type: String,
-      default: 'label'
+      default: 'div'
     }
   },
 
   emits: useFieldEmits,
 
-  setup () {
+  setup (props) {
     return useField(
       useFieldState({
-        requiredForAttr: false,
+        requiredForAttr: props.tag === 'label',
         tagProp: true
       })
     )

ui/src/components/field/QField.json

@@ -20,7 +20,7 @@
 
     "tag": {
       "extends": "tag",
-      "default": "label",
+      "default": "div",
       "examples": [ "div", "label" ],
       "addedIn": "v2.13.1"
     }