Validation examples added

doc/autocomplete/form/VeeValidateDoc.vue

@@ -5,9 +5,9 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
-            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="ac-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
@@ -49,9 +49,9 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
-            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
     </div>
 </template>`,
@@ -60,9 +60,9 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
-            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
         <Toast />
     </div>
@@ -112,9 +112,9 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
-            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" :inputClass="{ 'p-invalid': errorMessage }" inputId="ac" :suggestions="items" @complete="search" aria-describedby="ac-error" />
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="ac-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
         <Toast />
     </div>

doc/calendar/form/VeeValidateDoc.vue

@@ -0,0 +1,141 @@
+<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="date">Date</label>
+            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <small id="date-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 'Date is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), 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="date">Date</label>
+            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <small class="p-error" id="date-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="date">Date</label>
+            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <small class="p-error" id="date-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 'Date is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), 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="date">Date</label>
+            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <small class="p-error" id="date-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 'Date is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.toLocaleDateString(), life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/cascadeselect/form/VeeValidateDoc.vue

@@ -0,0 +1,380 @@
+<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">
+            <CascadeSelect
+                v-model="value"
+                :class="{ 'p-invalid': errorMessage }"
+                :options="countries"
+                optionLabel="cname"
+                optionGroupLabel="name"
+                :optionGroupChildren="['states', 'cities']"
+                style="min-width: 14rem"
+                placeholder="Select a City"
+                aria-describedby="cc-error"
+            />
+            <small id="cc-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 'City is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
+                optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
+            <small class="p-error" id="cc-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">
+            <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
+                optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
+            <small class="p-error" id="cc-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 'City is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
+                optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" aria-describedby="cc-error" />
+            <small class="p-error" id="cc-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+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 selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+
+function validateField(value) {
+    if (!value) {
+        return 'City is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.cname, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/checkbox/form/VeeValidateDoc.vue

@@ -0,0 +1,138 @@
+<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="chbx">I've read and accept the terms & conditions.</label>
+            <Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
+            <small id="chbx-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 } = 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 && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <label for="chbx">I've read and accept the terms & conditions.</label>
+            <Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
+            <small class="p-error" id="chbx-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 align-items-center gap-2">
+            <label for="chbx">I've read and accept the terms & conditions.</label>
+            <Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
+            <small class="p-error" id="chbx-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 } = 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 && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+            }
+        });
+
+        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">
+            <label for="chbx">I've read and accept the terms & conditions.</label>
+            <Checkbox id="chbx" v-model="value" :class="{ 'p-invalid': errorMessage }" binary aria-describedby="chbx-error" />
+            <small class="p-error" id="chbx-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 } = 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 && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/chips/form/VeeValidateDoc.vue

@@ -0,0 +1,137 @@
+<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">
+        <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>
+            <Button type="submit" label="Submit" class="w-7rem" />
+        </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 'At least one chip 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.join(','), life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card">
+        <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>
+            <Button type="submit" label="Submit" class="w-7rem" />
+        </form>
+        <Toast />
+    </div>
+</template>`,
+                options: `
+<template>
+    <div class="card">
+        <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>
+            <Button type="submit" label="Submit" class="w-7rem" />
+        </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 'At least one chip 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.join(','), life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <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>
+            <Button type="submit" label="Submit" class="w-7rem" />
+        </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 'At least one chip 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.join(','), life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/colorpicker/form/VeeValidateDoc.vue

@@ -0,0 +1,134 @@
+<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">
+            <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
+            <small id="cp-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 } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Color 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 });
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
+            <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
+            <small class="p-error" id="cp-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 align-items-center gap-2">
+            <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
+            <small class="p-error" id="cp-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 } = useForm();
+        const { value, errorMessage } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Color 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 });
+            }
+        });
+
+        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">
+            <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
+            <small class="p-error" id="cp-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 } = useForm();
+const { value, errorMessage } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Color 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 });
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/dropdown/form/VeeValidateDoc.vue

@@ -0,0 +1,178 @@
+<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">
+                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
+                <label for="dd">Select a City</label>
+            </span>
+            <small id="dd-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 'City is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.name) {
+                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">
+            <span class="p-float-label">
+                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                    :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
+                <label for="dd">Select a City</label>
+            </span>
+            <small class="p-error" id="dd-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">
+            <span class="p-float-label">
+                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                    :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
+                <label for="dd">Select a City</label>
+            </span>
+            <small class="p-error" id="dd-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 'City is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.name) {
+                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">
+            <span class="p-float-label">
+                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                    :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
+                <label for="dd">Select a City</label>
+            </span>
+            <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
+            <Button type="submit" label="Submit" />
+        </form>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+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 = ref([
+    { 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 'City is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.name) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value.name, life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/editor/form/VeeValidateDoc.vue

@@ -0,0 +1,177 @@
+<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">
+        <form @submit="onSubmit">
+            <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
+                        <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
+                        <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
+                    </span>
+                </template>
+            </Editor>
+            <div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
+                <small id="editor-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+                <Button type="submit" label="Submit" />
+            </div>
+        </form>
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2', quill: '1.3.7' }" component="Editor" />
+</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 'Content is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card">
+        <form @submit="onSubmit">
+            <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
+                        <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
+                        <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
+                    </span>
+                </template>
+            </Editor>
+            <div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
+                <small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
+                <Button type="submit" label="Submit" />
+            </div>
+        </form>
+        <Toast />
+    </div>
+</template>`,
+                options: `
+<template>
+    <div class="card">
+        <form @submit="onSubmit">
+            <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
+                        <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
+                        <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
+                    </span>
+                </template>
+            </Editor>
+            <div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
+                <small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
+                <Button type="submit" label="Submit" />
+            </div>
+        </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 'Content is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values) => {
+            if (values.value && values.value.length > 0) {
+                toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
+                resetForm();
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <form @submit="onSubmit">
+            <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
+                        <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
+                        <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
+                    </span>
+                </template>
+            </Editor>
+            <div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
+                <small class="p-error" id="editor-error">{{ errorMessage || '&nbsp;' }}</small>
+                <Button type="submit" label="Submit" />
+            </div>
+        </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 'Content is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values) => {
+    if (values.value && values.value.length > 0) {
+        toast.add({ severity: 'info', summary: 'Blog Submitted', detail: 'The blog is uploaded', life: 3000 });
+        resetForm();
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/inputmask/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">
+            <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999" :class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
+            <small id="mask-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 'Phone 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">
+            <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
+                :class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
+            <small class="p-error" id="mask-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">
+            <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
+                :class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
+            <small class="p-error" id="mask-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 'Phone 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">
+            <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
+                :class="{ 'p-invalid': errorMessage }" aria-describedby="mask-error" />
+            <small class="p-error" id="mask-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 'Phone 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>

doc/inputnumber/form/VeeValidateDoc.vue

@@ -0,0 +1,147 @@
+<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="year">Enter a year between 1960-2050.</label>
+            <InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
+            <small id="number-error" class="p-error">{{ errorMessage || (errors.length > 0 ? errors : '&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, errors } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Year is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values, actions) => {
+            if (values.value && values.value >= 1960 && values.value <= 2050) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            } else {
+                actions.setErrors({ value: 'Enter a valid year.' });
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage, errors };
+    },
+    data() {
+        return {
+            code: {
+                basic: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <label for="year">Enter a year between 1960-2050.</label>
+            <InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
+            <small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&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="year">Enter a year between 1960-2050.</label>
+            <InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
+            <small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&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, errors } = useField('value', validateField);
+        const toast = useToast();
+
+        function validateField(value) {
+            if (!value) {
+                return 'Year is required.';
+            }
+
+            return true;
+        }
+
+        const onSubmit = handleSubmit((values, actions) => {
+            if (values.value && values.value >= 1960 && values.value <= 2050) {
+                toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+                resetForm();
+            } else {
+                actions.setErrors({ value: 'Enter a valid year.' });
+            }
+        });
+
+        return { value, handleSubmit, onSubmit, errorMessage, errors };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <form @submit="onSubmit" class="flex flex-column gap-2">
+            <label for="year">Enter a year between 1960-2050.</label>
+            <InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
+            <small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : '&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, errors } = useField('value', validateField);
+const toast = useToast();
+
+function validateField(value) {
+    if (!value) {
+        return 'Year is required.';
+    }
+
+    return true;
+}
+
+const onSubmit = handleSubmit((values, actions) => {
+    if (values.value && values.value >= 1960 && values.value <= 2050) {
+        toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
+        resetForm();
+    } else {
+        actions.setErrors({ value: 'Enter a valid year.' });
+    }
+});
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

doc/inputtext/form/VeeValidateDoc.vue

@@ -2,14 +2,14 @@
     <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 p-fluid">
+    <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
+                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
             </span>
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
     </div>
     <DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
@@ -47,28 +47,28 @@ export default {
             code: {
                 basic: `
 <template>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
+                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
             </span>
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
         <Toast />
     </div>
 </template>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
+                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
             </span>
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
         <Toast />
     </div>
@@ -105,14 +105,14 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center p-fluid">
+    <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
-                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" />
+                <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
             </span>
-            <small class="p-error">{{ errorMessage || '&nbsp;' }}</small>
+            <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
-            <Button type="submit" label="Submit" @click="onSubmit" />
+            <Button type="submit" label="Submit" />
         </form>
         <Toast />
     </div>

pages/calendar/index.vue

@@ -9,6 +9,7 @@ import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc';
 import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc';
 import DisabledDoc from '@/doc/calendar/DisabledDoc';
 import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
 import FormatDoc from '@/doc/calendar/FormatDoc';
 import IconDoc from '@/doc/calendar/IconDoc';
 import ImportDoc from '@/doc/calendar/ImportDoc';
@@ -124,6 +125,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/cascadeselect/index.vue

@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc';
 import BasicDoc from '@/doc/cascadeselect/BasicDoc';
 import DisabledDoc from '@/doc/cascadeselect/DisabledDoc';
 import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
@@ -52,6 +53,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/checkbox/index.vue

@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc';
 import BasicDoc from '@/doc/checkbox/BasicDoc';
 import DisabledDoc from '@/doc/checkbox/DisabledDoc';
 import DynamicDoc from '@/doc/checkbox/DynamicDoc';
+import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
 import GroupDoc from '@/doc/checkbox/GroupDoc';
 import ImportDoc from '@/doc/checkbox/ImportDoc';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc';
@@ -46,6 +47,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/chips/index.vue

@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/chips/AccessibilityDoc';
 import BasicDoc from '@/doc/chips/BasicDoc';
 import DisabledDoc from '@/doc/chips/DisabledDoc';
 import FloatLabelDoc from '@/doc/chips/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/chips/form/VeeValidateDoc';
 import ImportDoc from '@/doc/chips/ImportDoc';
 import InvalidDoc from '@/doc/chips/InvalidDoc';
 import SeparatorDoc from '@/doc/chips/SeparatorDoc';
@@ -52,6 +53,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/colorpicker/index.vue

@@ -6,6 +6,7 @@
 import AccessibilityDoc from '@/doc/colorpicker/AccessibilityDoc';
 import BasicDoc from '@/doc/colorpicker/BasicDoc';
 import DisabledDoc from '@/doc/colorpicker/DisabledDoc';
+import VeeValidateDoc from '@/doc/colorpicker/form/VeeValidateDoc';
 import FormatDoc from '@/doc/colorpicker/FormatDoc';
 import ImportDoc from '@/doc/colorpicker/ImportDoc';
 import InlineDoc from '@/doc/colorpicker/InlineDoc';
@@ -40,6 +41,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/dropdown/index.vue

@@ -10,6 +10,7 @@ import DisabledDoc from '@/doc/dropdown/DisabledDoc';
 import EditableDoc from '@/doc/dropdown/EditableDoc';
 import FilterDoc from '@/doc/dropdown/FilterDoc';
 import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/dropdown/form/VeeValidateDoc';
 import GroupDoc from '@/doc/dropdown/GroupDoc';
 import ImportDoc from '@/doc/dropdown/ImportDoc';
 import InvalidDoc from '@/doc/dropdown/InvalidDoc';
@@ -88,6 +89,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/editor/index.vue

@@ -5,6 +5,7 @@
 <script>
 import AccessibilityDoc from '@/doc/editor/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/editor/BasicDoc.vue';
+import VeeValidateDoc from '@/doc/editor/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/editor/ImportDoc.vue';
 import QuillDoc from '@/doc/editor/QuillDoc.vue';
 import ReadOnlyDoc from '@/doc/editor/ReadOnlyDoc.vue';
@@ -40,6 +41,18 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/inputmask/index.vue

@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
 import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
+import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
 import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
@@ -58,6 +59,18 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'style',
                     label: 'Style',

pages/inputnumber/index.vue

@@ -8,6 +8,7 @@ import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc';
 import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc';
 import DisabledDoc from '@/doc/inputnumber/DisabledDoc';
 import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc';
+import VeeValidateDoc from '@/doc/inputnumber/form/VeeValidateDoc';
 import ImportDoc from '@/doc/inputnumber/ImportDoc';
 import InvalidDoc from '@/doc/inputnumber/InvalidDoc';
 import LocaleDoc from '@/doc/inputnumber/LocaleDoc';
@@ -65,6 +66,18 @@ export default {
                     label: 'Invalid',
                     component: InvalidDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    description: 'Compatibility with popular Vue form libraries.',
+                    children: [
+                        {
+                            id: 'veevalidate',
+                            label: 'VeeValidate',
+                            component: VeeValidateDoc
+                        }
+                    ]
+                },
                 {
                     id: 'disabled',
                     label: 'Disabled',