From 24cba65dccc6c52974dcde0622bab81736f8b917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Fri, 17 Mar 2023 16:05:14 +0300
Subject: [PATCH] VeeValidate added to form components

---
 doc/inputswitch/form/VeeValidateDoc.vue  | 140 +++++++++++++++
 doc/knob/form/VeeValidateDoc.vue         | 136 +++++++++++++++
 doc/listbox/form/VeeValidateDoc.vue      | 163 ++++++++++++++++++
 doc/multiselect/form/VeeValidateDoc.vue  | 181 ++++++++++++++++++++
 doc/password/form/VeeValidateDoc.vue     | 142 ++++++++++++++++
 doc/radiobutton/form/VeeValidateDoc.vue  | 206 +++++++++++++++++++++++
 doc/selectbutton/form/VeeValidateDoc.vue | 144 ++++++++++++++++
 doc/textarea/form/VeeValidateDoc.vue     | 144 ++++++++++++++++
 doc/togglebutton/form/VeeValidateDoc.vue | 133 +++++++++++++++
 doc/treeselect/form/VeeValidateDoc.vue   | 157 +++++++++++++++++
 pages/inputswitch/index.vue              |  13 ++
 pages/knob/index.vue                     |  13 ++
 pages/listbox/index.vue                  |  14 +-
 pages/multiselect/index.vue              |  14 +-
 pages/password/index.vue                 |  13 ++
 pages/radiobutton/index.vue              |  14 +-
 pages/selectbutton/index.vue             |  14 +-
 pages/textarea/index.vue                 |  13 ++
 pages/togglebutton/index.vue             |  13 ++
 pages/treeselect/index.vue               |  13 ++
 20 files changed, 1676 insertions(+), 4 deletions(-)
 create mode 100644 doc/inputswitch/form/VeeValidateDoc.vue
 create mode 100644 doc/knob/form/VeeValidateDoc.vue
 create mode 100644 doc/listbox/form/VeeValidateDoc.vue
 create mode 100644 doc/multiselect/form/VeeValidateDoc.vue
 create mode 100644 doc/password/form/VeeValidateDoc.vue
 create mode 100644 doc/radiobutton/form/VeeValidateDoc.vue
 create mode 100644 doc/selectbutton/form/VeeValidateDoc.vue
 create mode 100644 doc/textarea/form/VeeValidateDoc.vue
 create mode 100644 doc/togglebutton/form/VeeValidateDoc.vue
 create mode 100644 doc/treeselect/form/VeeValidateDoc.vue

diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/inputswitch/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..0f00748b4
--- /dev/null
+++ b/doc/inputswitch/form/VeeValidateDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <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 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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Accept is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+</template>`,
+                options: `
+<template>
+    <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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+};
+<\/script>`,
+                composition: `
+<template>
+    <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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..c84751bba
--- /dev/null
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -0,0 +1,136 @@
+<template>
+    <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 flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column 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" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column 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" />
+        </form>
+    </div>
+</template>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column 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" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <Knob id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..41f8ed58c
--- /dev/null
+++ b/doc/listbox/form/VeeValidateDoc.vue
@@ -0,0 +1,163 @@
+<template>
+    <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 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 id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>`,
+                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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+const cities = [
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+];
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..0370a5d96
--- /dev/null
+++ b/doc/multiselect/form/VeeValidateDoc.vue
@@ -0,0 +1,181 @@
+<template>
+    <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 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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            let detail = '';
+
+            values.value.map((value, i) => {
+                detail += value.name + (i < values.value.length - 1 ? ', ' : '');
+            });
+
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>`,
+                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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            let detail = '';
+
+            values.value.map((value, i) => {
+                detail += value.name + (i < values.value.length - 1 ? ', ' : '');
+            });
+
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                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" />
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+const cities = [
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+];
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    let detail = '';
+
+    values.value.map((value, i) => {
+        detail += value.name + (i < values.value.length - 1 ? ', ' : '');
+    });
+
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: detail, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..ee19cfff7
--- /dev/null
+++ b/doc/password/form/VeeValidateDoc.vue
@@ -0,0 +1,142 @@
+<template>
+    <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 flex justify-content-center">
+        <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>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Password is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <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 class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <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 class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Password is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <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 class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Password is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..fc3b08f01
--- /dev/null
+++ b/doc/radiobutton/form/VeeValidateDoc.vue
@@ -0,0 +1,206 @@
+<template>
+    <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 flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <div>Please choose your ingredient.</div>
+            <div class="flex flex-wrap gap-3">
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient1" name="pizza" value="Cheese" />
+                    <label for="ingredient1" class="ml-2">Cheese</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient2" name="pizza" value="Mushroom" />
+                    <label for="ingredient2" class="ml-2">Mushroom</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient3" name="pizza" value="Pepper" />
+                    <label for="ingredient3" class="ml-2">Pepper</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient4" name="pizza" value="Onion" />
+                    <label for="ingredient4" class="ml-2">Onion</label>
+                </div>
+            </div>
+
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="card flex justify-content-center">
+    <form @submit="onSubmit" class="flex flex-column gap-2">
+        <div>Please choose your ingredient.</div>
+        <div class="flex flex-wrap gap-3">
+            <div class="flex align-items-center">
+                <RadioButton v-model="value" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1" class="ml-2">Cheese</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="value" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2" class="ml-2">Mushroom</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="value" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3" class="ml-2">Pepper</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="value" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4" class="ml-2">Onion</label>
+            </div>
+        </div>
+
+        <small id="text-error" class="p-error my-2">{{ 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 gap-2">
+            <div>Please choose your ingredient.</div>
+            <div class="flex flex-wrap gap-3">
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient1" name="pizza" value="Cheese" />
+                    <label for="ingredient1" class="ml-2">Cheese</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient2" name="pizza" value="Mushroom" />
+                    <label for="ingredient2" class="ml-2">Mushroom</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient3" name="pizza" value="Pepper" />
+                    <label for="ingredient3" class="ml-2">Pepper</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient4" name="pizza" value="Onion" />
+                    <label for="ingredient4" class="ml-2">Onion</label>
+                </div>
+            </div>
+
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <div>Please choose your ingredient.</div>
+            <div class="flex flex-wrap gap-3">
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient1" name="pizza" value="Cheese" />
+                    <label for="ingredient1" class="ml-2">Cheese</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient2" name="pizza" value="Mushroom" />
+                    <label for="ingredient2" class="ml-2">Mushroom</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient3" name="pizza" value="Pepper" />
+                    <label for="ingredient3" class="ml-2">Pepper</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="value" inputId="ingredient4" name="pizza" value="Onion" />
+                    <label for="ingredient4" class="ml-2">Onion</label>
+                </div>
+            </div>
+
+            <small id="text-error" class="p-error my-2">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..21861a03f
--- /dev/null
+++ b/doc/selectbutton/form/VeeValidateDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <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 flex justify-content-center">
+        <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>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Engine State is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            options: ['Off', 'On'],
+            code: {
+                basic: `
+<div class="card flex justify-content-center">
+    <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>
+        <Button type="submit" label="Submit" />
+    </form>
+    <Toast />
+</div>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Engine State is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            options: ['Off', 'On']
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+const options = ['Off', 'On'];
+
+function validateField(value) {
+    if (!value) {
+        return 'Engine State is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..fe1a0b44a
--- /dev/null
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <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 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>
+            </span>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Name - Surname is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<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>
+        </span>
+        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+        <Button type="submit" label="Submit" />
+    </form>
+    <Toast />
+</div>`,
+                options: `
+<template>
+    <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>
+            </span>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Name - Surname is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <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>
+            </span>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Name - Surname is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..28885ce2d
--- /dev/null
+++ b/doc/togglebutton/form/VeeValidateDoc.vue
@@ -0,0 +1,133 @@
+<template>
+    <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 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>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            nodes: null,
+            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>
+        <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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+};
+<\/script>`,
+                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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
new file mode 100644
index 000000000..a22bee122
--- /dev/null
+++ b/doc/treeselect/form/VeeValidateDoc.vue
@@ -0,0 +1,157 @@
+<template>
+    <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 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>
+            <Button type="submit" label="Submit" />
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" :service="['NodeService']" />
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+import { NodeService } from '/service/NodeService';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            nodes: null,
+            code: {
+                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>
+        <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 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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script>
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+import { NodeService } from '@/service/NodeService';
+export default {
+    setup() {
+        const { handleSubmit, resetForm } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Value is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            nodes: null
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+<\/script>`,
+                composition: `
+<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>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useField, useForm } from 'vee-validate';
+import { NodeService } from '@/service/NodeService';
+
+const { handleSubmit, resetForm } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+
+const toast = useToast();
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+function validateField(value) {
+    if (!value) {
+        return 'Value is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: 'The form is successfully submitted.', life: 3000 });
+        resetForm();
+    }
+});
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/pages/inputswitch/index.vue b/pages/inputswitch/index.vue
index ecbd6433a..4c6a3562c 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/inputswitch/index.vue
@@ -10,6 +10,7 @@ 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() {
@@ -40,6 +41,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/knob/index.vue b/pages/knob/index.vue
index 53416d3a0..f1e1a10a2 100644
--- a/pages/knob/index.vue
+++ b/pages/knob/index.vue
@@ -16,6 +16,7 @@ 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 {
@@ -75,6 +76,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index ce8768e89..cb8b7bd76 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -14,7 +14,7 @@ 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 {
@@ -64,6 +64,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index c067be03a..1ad441684 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -16,7 +16,7 @@ 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 {
@@ -76,6 +76,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 769725ba1..8d64ccc2c 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -14,6 +14,7 @@ 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() {
@@ -64,6 +65,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index 042f51ead..f3c76be25 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -10,7 +10,7 @@ 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 {
@@ -40,6 +40,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index 66c1cc075..3c241f1b5 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -10,7 +10,7 @@ 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 {
@@ -45,6 +45,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/textarea/index.vue b/pages/textarea/index.vue
index 4e1baf1fc..0d7a6f87a 100755
--- a/pages/textarea/index.vue
+++ b/pages/textarea/index.vue
@@ -11,6 +11,7 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc';
 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() {
@@ -46,6 +47,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/togglebutton/index.vue b/pages/togglebutton/index.vue
index c3d6d14ee..c14af63d5 100755
--- a/pages/togglebutton/index.vue
+++ b/pages/togglebutton/index.vue
@@ -9,6 +9,7 @@ import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.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() {
@@ -34,6 +35,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/treeselect/index.vue b/pages/treeselect/index.vue
index 91ae4dd94..47a264a5a 100644
--- a/pages/treeselect/index.vue
+++ b/pages/treeselect/index.vue
@@ -12,6 +12,7 @@ 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 {
@@ -51,6 +52,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'vee-validate',
+                            label: 'Vee Validate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',