From f3fdbd6f9936b3b971d8e6992c446ec77c319215 Mon Sep 17 00:00:00 2001
From: Ahmed Jasim <itsahmedjasim@gmail.com>
Date: Tue, 26 Mar 2024 13:00:20 +0300
Subject: [PATCH] fix(docs): add example for QField tag property.

---
 docs/src/examples/QField/TagWrapper.vue | 31 +++++++++++++++++++++++++
 docs/src/pages/vue-components/field.md  |  9 +++++++
 2 files changed, 40 insertions(+)
 create mode 100644 docs/src/examples/QField/TagWrapper.vue

diff --git a/docs/src/examples/QField/TagWrapper.vue b/docs/src/examples/QField/TagWrapper.vue
new file mode 100644
index 00000000000..ec6ef86f999
--- /dev/null
+++ b/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>
diff --git a/docs/src/pages/vue-components/field.md b/docs/src/pages/vue-components/field.md
index 2380b52268f..59ce2c7e039 100644
--- a/docs/src/pages/vue-components/field.md
+++ b/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.