From f76b40cb0681572c480c1629a95449839f08e724 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 20 Mar 2023 13:38:06 +0300
Subject: [PATCH] Form validation example updates

---
 doc/chips/form/VeeValidateDoc.vue            |  8 +++---
 doc/inputswitch/form/VeeValidateDoc.vue      |  8 +++---
 doc/knob/form/VeeValidateDoc.vue             |  8 +++---
 doc/listbox/form/VeeValidateDoc.vue          | 28 ++++++++++----------
 doc/multiselect/form/VeeValidateDoc.vue      | 22 +++++++--------
 doc/password/form/VeeValidateDoc.vue         |  1 -
 doc/radiobutton/form/VeeValidateDoc.vue      |  8 +++---
 doc/selectbutton/form/VeeValidateDoc.vue     |  8 +++---
 doc/textarea/form/VeeValidateDoc.vue         | 22 +++++++--------
 doc/togglebutton/form/VeeValidateDoc.vue     | 24 ++++++++---------
 doc/treeselect/form/VeeValidateDoc.vue       | 20 ++++++--------
 doc/tristatecheckbox/form/VeeValidateDoc.vue | 16 +++++------
 pages/inputswitch/index.vue                  |  6 ++---
 pages/knob/index.vue                         |  6 ++---
 pages/listbox/index.vue                      |  6 ++---
 pages/multiselect/index.vue                  |  6 ++---
 pages/password/index.vue                     |  6 ++---
 pages/radiobutton/index.vue                  |  6 ++---
 pages/selectbutton/index.vue                 |  6 ++---
 pages/textarea/index.vue                     |  6 ++---
 pages/togglebutton/index.vue                 |  6 ++---
 pages/treeselect/index.vue                   |  6 ++---
 pages/tristatecheckbox/index.vue             |  6 ++---
 23 files changed, 117 insertions(+), 122 deletions(-)

diff --git a/doc/chips/form/VeeValidateDoc.vue b/doc/chips/form/VeeValidateDoc.vue
index b8fae3f64..cafb23cf1 100644
--- a/doc/chips/form/VeeValidateDoc.vue
+++ b/doc/chips/form/VeeValidateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
@@ -44,7 +44,7 @@ export default {
             code: {
                 basic: `
 <template>
-    <div class="card">
+    <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
@@ -55,7 +55,7 @@ export default {
 </template>`,
                 options: `
 <template>
-    <div class="card">
+    <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
@@ -96,7 +96,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/inputswitch/form/VeeValidateDoc.vue
index 0f00748b4..fd48189f9 100644
--- a/doc/inputswitch/form/VeeValidateDoc.vue
+++ b/doc/inputswitch/form/VeeValidateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" aria-describedby="text-error" />
+            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -48,7 +48,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" aria-describedby="text-error" />
+            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -59,7 +59,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" aria-describedby="text-error" />
+            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -101,7 +101,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" aria-describedby="text-error" />
+            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
index c84751bba..e6ba912f7 100644
--- a/doc/knob/form/VeeValidateDoc.vue
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -3,7 +3,7 @@
         <p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Knob v-model="value" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
@@ -24,7 +24,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'The value must be greater than zero.';
             }
 
             return true;
@@ -76,7 +76,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'The value must be greater than zero.';
             }
 
             return true;
@@ -115,7 +115,7 @@ const toast = useToast();
 
 function validateField(value) {
     if (!value) {
-        return 'Value is required.';
+        return 'The value must be greater than zero.';
     }
 
     return true;
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
index 41f8ed58c..d59948245 100644
--- a/doc/listbox/form/VeeValidateDoc.vue
+++ b/doc/listbox/form/VeeValidateDoc.vue
@@ -3,8 +3,8 @@
         <p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
-            <Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -24,7 +24,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'City is required.';
             }
 
             return true;
@@ -52,9 +52,9 @@ export default {
                 basic: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
-            <Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -63,9 +63,9 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
-            <Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -84,7 +84,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'City is required.';
             }
 
             return true;
@@ -115,9 +115,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2 w-full md:w-20rem">
-            <Listbox v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -142,7 +142,7 @@ const cities = [
 
 function validateField(value) {
     if (!value) {
-        return 'Value is required.';
+        return 'City is required.';
     }
 
     return true;
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
index 0370a5d96..49235c17f 100644
--- a/doc/multiselect/form/VeeValidateDoc.vue
+++ b/doc/multiselect/form/VeeValidateDoc.vue
@@ -3,8 +3,8 @@
         <p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2">
-            <MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -24,7 +24,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'City is required.';
             }
 
             return true;
@@ -58,8 +58,8 @@ export default {
                 basic: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2">
-            <MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -69,8 +69,8 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2">
-            <MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -90,7 +90,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Value is required.';
+                return 'City is required.';
             }
 
             return true;
@@ -127,8 +127,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column gap-2">
-            <MultiSelect v-model="value" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -154,7 +154,7 @@ const cities = [
 
 function validateField(value) {
     if (!value) {
-        return 'Value is required.';
+        return 'City is required.';
     }
 
     return true;
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
index ee19cfff7..1997e4d40 100644
--- a/doc/password/form/VeeValidateDoc.vue
+++ b/doc/password/form/VeeValidateDoc.vue
@@ -6,7 +6,6 @@
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
             <Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
index fc3b08f01..15942643e 100644
--- a/doc/radiobutton/form/VeeValidateDoc.vue
+++ b/doc/radiobutton/form/VeeValidateDoc.vue
@@ -24,7 +24,7 @@
                 </div>
             </div>
 
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
@@ -83,7 +83,7 @@ export default {
             </div>
         </div>
 
-        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
@@ -111,7 +111,7 @@ export default {
                 </div>
             </div>
 
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -170,7 +170,7 @@ export default {
                 </div>
             </div>
 
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
index 21861a03f..54a3e80d4 100644
--- a/doc/selectbutton/form/VeeValidateDoc.vue
+++ b/doc/selectbutton/form/VeeValidateDoc.vue
@@ -6,7 +6,7 @@
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
             <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
@@ -48,7 +48,7 @@ export default {
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
         <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
-        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
     <Toast />
@@ -59,7 +59,7 @@ export default {
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
             <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -105,7 +105,7 @@ export default {
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
             <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
index fe1a0b44a..4b23d2420 100644
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-                <label for="value">Name - Surname</label>
+                <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
+                <label for="value">Description</label>
             </span>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
@@ -26,7 +26,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Name - Surname is required.';
+                return 'Description is required.';
             }
 
             return true;
@@ -48,8 +48,8 @@ export default {
 <div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <span class="p-float-label">
-            <Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <label for="value">Name - Surname</label>
+            <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
+            <label for="value">Description</label>
         </span>
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
@@ -61,8 +61,8 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-                <label for="value">Name - Surname</label>
+                <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
+                <label for="value">Description</label>
             </span>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
@@ -82,7 +82,7 @@ export default {
 
         function validateField(value) {
             if (!value) {
-                return 'Name - Surname is required.';
+                return 'Description is required.';
             }
 
             return true;
@@ -104,8 +104,8 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <Textarea id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-                <label for="value">Name - Surname</label>
+                <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
+                <label for="value">Description</label>
             </span>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
@@ -124,7 +124,7 @@ const toast = useToast();
 
 function validateField(value) {
     if (!value) {
-        return 'Name - Surname is required.';
+        return 'Description is required.';
     }
 
     return true;
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
index 28885ce2d..864d0873f 100644
--- a/doc/togglebutton/form/VeeValidateDoc.vue
+++ b/doc/togglebutton/form/VeeValidateDoc.vue
@@ -3,9 +3,9 @@
         <p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
-            <ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
@@ -44,18 +44,18 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
-        <ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+    <form @submit="onSubmit" class="flex flex-column gap-2">
+        <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
-            <ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -94,9 +94,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
-            <ToggleButton v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
index a22bee122..31a11229f 100644
--- a/doc/treeselect/form/VeeValidateDoc.vue
+++ b/doc/treeselect/form/VeeValidateDoc.vue
@@ -4,9 +4,8 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
-            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
-
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
@@ -47,9 +46,8 @@ export default {
                 basic: `
 <div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
-        <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
-
-        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
@@ -57,9 +55,8 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
-            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
-
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -107,9 +104,8 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
-            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" />
-
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
diff --git a/doc/tristatecheckbox/form/VeeValidateDoc.vue b/doc/tristatecheckbox/form/VeeValidateDoc.vue
index cd552b090..cb451ec12 100644
--- a/doc/tristatecheckbox/form/VeeValidateDoc.vue
+++ b/doc/tristatecheckbox/form/VeeValidateDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <div class="my-2">* I've read and accept the terms & conditions.</div>
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <div>* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
     </div>
@@ -47,8 +47,8 @@ export default {
 <div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-        <div class="my-2">* I've read and accept the terms & conditions.</div>
-        <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+        <div>* I've read and accept the terms & conditions.</div>
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
@@ -57,8 +57,8 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <div class="my-2">* I've read and accept the terms & conditions.</div>
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <div>* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
@@ -98,8 +98,8 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
-            <div class="my-2">* I've read and accept the terms & conditions.</div>
-            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <div>* I've read and accept the terms & conditions.</div>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
         <Toast />
diff --git a/pages/inputswitch/index.vue b/pages/inputswitch/index.vue
index 4c6a3562c..a6c7ebaf4 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/inputswitch/index.vue
@@ -6,11 +6,11 @@
 import AccessibilityDoc from '@/doc/inputswitch/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputswitch/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputswitch/DisabledDoc.vue';
+import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/inputswitch/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputswitch/InvalidDoc.vue';
 import PreselectionDoc from '@/doc/inputswitch/PreselectionDoc.vue';
 import StyleDoc from '@/doc/inputswitch/StyleDoc.vue';
-import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -47,8 +47,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/knob/index.vue b/pages/knob/index.vue
index f1e1a10a2..00e95441f 100644
--- a/pages/knob/index.vue
+++ b/pages/knob/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/knob/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/knob/BasicDoc.vue';
 import ColorDoc from '@/doc/knob/ColorDoc.vue';
 import DisabledDoc from '@/doc/knob/DisabledDoc.vue';
+import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/knob/ImportDoc.vue';
 import MinMaxDoc from '@/doc/knob/MinMaxDoc.vue';
 import ReactiveDoc from '@/doc/knob/ReactiveDoc.vue';
@@ -16,7 +17,6 @@ import StepDoc from '@/doc/knob/StepDoc.vue';
 import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
 import StyleDoc from '@/doc/knob/StyleDoc.vue';
 import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
-import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
 export default {
     data() {
         return {
@@ -82,8 +82,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index cb8b7bd76..768a01692 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc';
 import BasicDoc from '@/doc/listbox/BasicDoc';
 import DisabledDoc from '@/doc/listbox/DisabledDoc';
 import FilterDoc from '@/doc/listbox/FilterDoc';
+import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
 import GroupDoc from '@/doc/listbox/GroupDoc';
 import ImportDoc from '@/doc/listbox/ImportDoc';
 import InvalidDoc from '@/doc/listbox/InvalidDoc';
@@ -14,7 +15,6 @@ import MultipleDoc from '@/doc/listbox/MultipleDoc';
 import StyleDoc from '@/doc/listbox/StyleDoc';
 import TemplateDoc from '@/doc/listbox/TemplateDoc';
 import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc';
-import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
 export default {
     data() {
         return {
@@ -70,8 +70,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index 1ad441684..81c25eb62 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -9,6 +9,7 @@ import ChipsDoc from '@/doc/multiselect/ChipsDoc';
 import DisabledDoc from '@/doc/multiselect/DisabledDoc';
 import FilterDoc from '@/doc/multiselect/FilterDoc';
 import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
 import GroupDoc from '@/doc/multiselect/GroupDoc';
 import ImportDoc from '@/doc/multiselect/ImportDoc';
 import InvalidDoc from '@/doc/multiselect/InvalidDoc';
@@ -16,7 +17,6 @@ import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc';
 import StyleDoc from '@/doc/multiselect/StyleDoc';
 import TemplateDoc from '@/doc/multiselect/TemplateDoc';
 import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc';
-import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
 export default {
     data() {
         return {
@@ -82,8 +82,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 8d64ccc2c..687d96af6 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/password/BasicDoc.vue';
 import DisabledDoc from '@/doc/password/DisabledDoc.vue';
 import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
+import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/password/ImportDoc.vue';
 import InvalidDoc from '@/doc/password/InvalidDoc.vue';
 import LocaleDoc from '@/doc/password/LocaleDoc.vue';
@@ -14,7 +15,6 @@ import MeterDoc from '@/doc/password/MeterDoc.vue';
 import StyleDoc from '@/doc/password/StyleDoc.vue';
 import TemplateDoc from '@/doc/password/TemplateDoc.vue';
 import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
-import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -71,8 +71,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index f3c76be25..9d49107dc 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -6,11 +6,11 @@
 import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
 import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
 import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
+import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
 import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
 import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
-import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
 export default {
     data() {
         return {
@@ -46,8 +46,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index 3c241f1b5..b7b86a41d 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -6,11 +6,11 @@
 import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
 import BasicDoc from '@/doc/selectbutton/BasicDoc';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
+import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 import ImportDoc from '@/doc/selectbutton/ImportDoc';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
-import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 export default {
     data() {
         return {
@@ -51,8 +51,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/textarea/index.vue b/pages/textarea/index.vue
index 0d7a6f87a..9529fc8f2 100755
--- a/pages/textarea/index.vue
+++ b/pages/textarea/index.vue
@@ -8,10 +8,10 @@ import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc';
 import BasicDoc from '@/doc/textarea/BasicDoc';
 import DisabledDoc from '@/doc/textarea/DisabledDoc';
 import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc';
 import InvalidDoc from '@/doc/textarea/InvalidDoc';
 import StyleDoc from '@/doc/textarea/StyleDoc';
-import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -53,8 +53,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/togglebutton/index.vue b/pages/togglebutton/index.vue
index c14af63d5..353777750 100755
--- a/pages/togglebutton/index.vue
+++ b/pages/togglebutton/index.vue
@@ -7,9 +7,9 @@ import AccessibilityDoc from '@/doc/togglebutton/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
 import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
+import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
 import StyleDoc from '@/doc/togglebutton/StyleDoc.vue';
-import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -41,8 +41,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/treeselect/index.vue b/pages/treeselect/index.vue
index 47a264a5a..2828fabd7 100644
--- a/pages/treeselect/index.vue
+++ b/pages/treeselect/index.vue
@@ -8,11 +8,11 @@ import BasicDoc from '@/doc/treeselect/BasicDoc';
 import CheckboxDoc from '@/doc/treeselect/CheckboxDoc';
 import DisabledDoc from '@/doc/treeselect/DisabledDoc';
 import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/treeselect/ImportDoc';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc';
 import MultipleDoc from '@/doc/treeselect/MultipleDoc';
 import StyleDoc from '@/doc/treeselect/StyleDoc';
-import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
 export default {
     data() {
         return {
@@ -58,8 +58,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]
diff --git a/pages/tristatecheckbox/index.vue b/pages/tristatecheckbox/index.vue
index 9f03e45a1..42c4fe566 100755
--- a/pages/tristatecheckbox/index.vue
+++ b/pages/tristatecheckbox/index.vue
@@ -6,10 +6,10 @@
 import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc';
 import BasicDoc from '@/doc/tristatecheckbox/BasicDoc';
 import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc';
+import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
 import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
 import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
-import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 
 export default {
     data() {
@@ -41,8 +41,8 @@ export default {
                     description: 'Compatibility with popular Vue form libraries.',
                     children: [
                         {
-                            id: 'vee-validate',
-                            label: 'Vee Validate',
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
                             component: VeeValidateDoc
                         }
                     ]