fix(docs): add example for QField 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.