From ce0a4108888262027594691fda1816fe53481fc7 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 23 Oct 2024 14:17:49 +0300
Subject: [PATCH] From doc updates

---
 apps/showcase/doc/autocomplete/FormDoc.vue  | 16 +++++++-------
 apps/showcase/doc/cascadeselect/FormDoc.vue | 23 ++++++++++++---------
 apps/showcase/doc/checkbox/FormDoc.vue      |  8 +++----
 apps/showcase/doc/colorpicker/FormDoc.vue   |  8 +++----
 apps/showcase/doc/datepicker/FormDoc.vue    |  8 +++----
 apps/showcase/doc/editor/FormDoc.vue        |  8 +++----
 apps/showcase/doc/inputmask/FormDoc.vue     |  8 +++----
 apps/showcase/doc/inputnumber/FormDoc.vue   |  8 +++----
 apps/showcase/doc/inputotp/FormDoc.vue      |  8 +++----
 apps/showcase/doc/inputtext/FormDoc.vue     | 16 +++++++-------
 apps/showcase/doc/knob/FormDoc.vue          |  8 +++----
 apps/showcase/doc/listbox/FormDoc.vue       |  8 +++----
 apps/showcase/doc/multiselect/FormDoc.vue   |  8 +++----
 apps/showcase/doc/radiobutton/FormDoc.vue   |  8 +++----
 apps/showcase/doc/rating/FormDoc.vue        |  8 +++----
 apps/showcase/doc/select/FormDoc.vue        |  2 +-
 apps/showcase/doc/selectbutton/FormDoc.vue  |  8 +++----
 apps/showcase/doc/slider/FormDoc.vue        |  8 +++----
 apps/showcase/doc/textarea/FormDoc.vue      |  8 +++----
 apps/showcase/doc/togglebutton/FormDoc.vue  |  8 +++----
 apps/showcase/doc/toggleswitch/FormDoc.vue  |  8 +++----
 apps/showcase/doc/treeselect/FormDoc.vue    |  8 +++----
 22 files changed, 102 insertions(+), 99 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/FormDoc.vue b/apps/showcase/doc/autocomplete/FormDoc.vue
index c47c3004e..d49f459a0 100644
--- a/apps/showcase/doc/autocomplete/FormDoc.vue
+++ b/apps/showcase/doc/autocomplete/FormDoc.vue
@@ -3,10 +3,10 @@
         <p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -39,10 +39,10 @@ export default {
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
     <div class="flex flex-col gap-2">
         <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-        <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
+        <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -50,10 +50,10 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -114,10 +114,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/cascadeselect/FormDoc.vue b/apps/showcase/doc/cascadeselect/FormDoc.vue
index 79b33d341..dd2963ea5 100644
--- a/apps/showcase/doc/cascadeselect/FormDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -26,9 +26,12 @@ export default {
             },
             resolver: zodResolver(
                 z.object({
-                    city: z.object({
-                        cname: z.string().min(1, 'City cannot be empty.')
-                    })
+                    city: z.union([
+                        z.object({
+                            cname: z.string().min(1, 'City required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'City required.' })
+                    ])
                 })
             ),
             countries: [
@@ -110,7 +113,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
     <div class="flex flex-col gap-2">
         <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -121,7 +124,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -139,7 +142,7 @@ export default {
             resolver: zodResolver(
                 z.object({
                     city: z.object({
-                        cname: z.string().min(1, 'City cannot be empty.')
+                        cname: z.string().min(1, 'City is required.')
                     })
                 })
             ),
@@ -235,7 +238,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -256,14 +259,14 @@ const initialValues = ref({
 const resolver = ref(zodResolver(
     z.object({
         city: z.object({
-            cname: z.string().min(1, 'City cannot be empty.')
+            cname: z.string().min(1, 'City is required.')
         })
     })
 ));
 const resolver = ref(zodResolver(
     z.object({
         city: z.object({
-            cname: z.string().min(1, 'City cannot be empty.')
+            cname: z.string().min(1, 'City is required.')
         })
     })
 ));
diff --git a/apps/showcase/doc/checkbox/FormDoc.vue b/apps/showcase/doc/checkbox/FormDoc.vue
index a46026d99..ad517adf4 100644
--- a/apps/showcase/doc/checkbox/FormDoc.vue
+++ b/apps/showcase/doc/checkbox/FormDoc.vue
@@ -24,7 +24,7 @@
                     </div>
                 </CheckboxGroup>
 
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
+                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -70,7 +70,7 @@ export default {
             </div>
         </CheckboxGroup>
 
-        <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
+        <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -99,7 +99,7 @@ export default {
                     </div>
                 </CheckboxGroup>
 
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
+                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -159,7 +159,7 @@ export default {
                     </div>
                 </CheckboxGroup>
 
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
+                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/colorpicker/FormDoc.vue b/apps/showcase/doc/colorpicker/FormDoc.vue
index f9d4976b5..71b66f478 100644
--- a/apps/showcase/doc/colorpicker/FormDoc.vue
+++ b/apps/showcase/doc/colorpicker/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ColorPicker name="colorpicker" />
-                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
+                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col items-center gap-2">
         <ColorPicker name="colorpicker" />
-        <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
+        <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ColorPicker name="colorpicker" />
-                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
+                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ColorPicker name="colorpicker" />
-                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
+                <Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/datepicker/FormDoc.vue b/apps/showcase/doc/datepicker/FormDoc.vue
index d5beb480d..4726e13c0 100644
--- a/apps/showcase/doc/datepicker/FormDoc.vue
+++ b/apps/showcase/doc/datepicker/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -40,7 +40,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
         <DatePicker name="date" fluid />
-        <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
+        <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -51,7 +51,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -98,7 +98,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/editor/FormDoc.vue b/apps/showcase/doc/editor/FormDoc.vue
index 4ef4b8722..fb16aab20 100644
--- a/apps/showcase/doc/editor/FormDoc.vue
+++ b/apps/showcase/doc/editor/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Editor name="editor" editorStyle="height: 320px" />
-                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
+                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
         <Editor name="editor" editorStyle="height: 320px" />
-        <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
+        <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Editor name="editor" editorStyle="height: 320px" />
-                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
+                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Editor name="editor" editorStyle="height: 320px" />
-                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
+                <Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/inputmask/FormDoc.vue b/apps/showcase/doc/inputmask/FormDoc.vue
index 1c393060a..0dad5df0b 100644
--- a/apps/showcase/doc/inputmask/FormDoc.vue
+++ b/apps/showcase/doc/inputmask/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
+                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
     <div class="flex flex-col gap-2">
         <InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
-        <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
+        <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
+                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
-                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
+                <Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/inputnumber/FormDoc.vue b/apps/showcase/doc/inputnumber/FormDoc.vue
index 590b79653..607d20417 100644
--- a/apps/showcase/doc/inputnumber/FormDoc.vue
+++ b/apps/showcase/doc/inputnumber/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
     <div class="flex flex-col gap-2">
         <InputNumber name="number" fluid />
-        <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
+        <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/inputotp/FormDoc.vue b/apps/showcase/doc/inputotp/FormDoc.vue
index 71fc0c6d2..203769c85 100644
--- a/apps/showcase/doc/inputotp/FormDoc.vue
+++ b/apps/showcase/doc/inputotp/FormDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <InputOtp name="otp" />
-            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
+            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -31,7 +31,7 @@ export default {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <InputOtp name="otp" />
-    <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
+    <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
 `,
@@ -40,7 +40,7 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <InputOtp name="otp" />
-            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
+            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -79,7 +79,7 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <InputOtp name="otp" />
-            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
+            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
diff --git a/apps/showcase/doc/inputtext/FormDoc.vue b/apps/showcase/doc/inputtext/FormDoc.vue
index 5170b90f5..736cb52ac 100644
--- a/apps/showcase/doc/inputtext/FormDoc.vue
+++ b/apps/showcase/doc/inputtext/FormDoc.vue
@@ -6,11 +6,11 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -40,11 +40,11 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
     <div class="flex flex-col gap-2">
         <InputText name="username" type="text" placeholder="Username" />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
     </div>
     <div class="flex flex-col gap-2">
         <InputText name="email" type="text" placeholder="Email" />
-        <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
+        <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -55,11 +55,11 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -102,11 +102,11 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
             </div>
             <div class="flex flex-col gap-2">
                 <InputText name="email" type="text" placeholder="Email" fluid />
-                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
+                <Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/knob/FormDoc.vue b/apps/showcase/doc/knob/FormDoc.vue
index e57498479..0edca8508 100644
--- a/apps/showcase/doc/knob/FormDoc.vue
+++ b/apps/showcase/doc/knob/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col items-center gap-2">
         <Knob name="knob" />
-        <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
+        <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -87,7 +87,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/listbox/FormDoc.vue b/apps/showcase/doc/listbox/FormDoc.vue
index f66a2ba05..1b58e3377 100644
--- a/apps/showcase/doc/listbox/FormDoc.vue
+++ b/apps/showcase/doc/listbox/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -46,7 +46,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
     <div class="flex flex-col gap-2">
         <Listbox name="city" :options="cities" optionLabel="name" fluid />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -57,7 +57,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -110,7 +110,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/multiselect/FormDoc.vue b/apps/showcase/doc/multiselect/FormDoc.vue
index c4926c1ba..b2745635e 100644
--- a/apps/showcase/doc/multiselect/FormDoc.vue
+++ b/apps/showcase/doc/multiselect/FormDoc.vue
@@ -4,7 +4,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
             <div class="flex flex-col gap-2">
                 <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -45,7 +45,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
     <div class="flex flex-col gap-2">
         <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -56,7 +56,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -110,7 +110,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/radiobutton/FormDoc.vue b/apps/showcase/doc/radiobutton/FormDoc.vue
index a8407a6f0..07eae36fa 100644
--- a/apps/showcase/doc/radiobutton/FormDoc.vue
+++ b/apps/showcase/doc/radiobutton/FormDoc.vue
@@ -22,7 +22,7 @@
                     <label for="ingredient4" class="ml-2">Onion</label>
                 </div>
             </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
+            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -65,7 +65,7 @@ export default {
             <label for="ingredient4" class="ml-2">Onion</label>
         </div>
     </RadioButtonGroup>
-    <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
+    <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
 `,
@@ -91,7 +91,7 @@ export default {
                     <label for="ingredient4" class="ml-2">Onion</label>
                 </div>
             </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
+            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -147,7 +147,7 @@ export default {
                     <label for="ingredient4" class="ml-2">Onion</label>
                 </div>
             </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
+            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
diff --git a/apps/showcase/doc/rating/FormDoc.vue b/apps/showcase/doc/rating/FormDoc.vue
index 18ff88ec0..704c18f5f 100644
--- a/apps/showcase/doc/rating/FormDoc.vue
+++ b/apps/showcase/doc/rating/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col items-center gap-2">
         <Rating name="rating" />
-        <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
+        <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/select/FormDoc.vue b/apps/showcase/doc/select/FormDoc.vue
index 0d40f02e4..632787e12 100644
--- a/apps/showcase/doc/select/FormDoc.vue
+++ b/apps/showcase/doc/select/FormDoc.vue
@@ -3,7 +3,7 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-2">
-                <Select name="city" :options="cities" showClear optionLabel="name" placeholder="Select a City" fluid />
+                <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
                 <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
diff --git a/apps/showcase/doc/selectbutton/FormDoc.vue b/apps/showcase/doc/selectbutton/FormDoc.vue
index 1d55cd36d..26bfbad78 100644
--- a/apps/showcase/doc/selectbutton/FormDoc.vue
+++ b/apps/showcase/doc/selectbutton/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex items-center flex-col gap-2">
                 <SelectButton name="selectbutton" :options="options" />
-                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -35,7 +35,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
         <SelectButton name="selectbutton" :options="options" />
-        <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
+        <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -46,7 +46,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <SelectButton name="selectbutton" :options="options" />
-                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -88,7 +88,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <SelectButton name="selectbutton" :options="options" />
-                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/slider/FormDoc.vue b/apps/showcase/doc/slider/FormDoc.vue
index e81c4328d..a1e769d4e 100644
--- a/apps/showcase/doc/slider/FormDoc.vue
+++ b/apps/showcase/doc/slider/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
     <div class="flex flex-col gap-2">
         <Slider name="slider" />
-        <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
+        <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
             <div class="flex flex-col gap-2">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/textarea/FormDoc.vue b/apps/showcase/doc/textarea/FormDoc.vue
index e4c874677..b578bdfed 100644
--- a/apps/showcase/doc/textarea/FormDoc.vue
+++ b/apps/showcase/doc/textarea/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Textarea name="textarea" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
+                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col gap-2">
         <Textarea name="textarea" rows="5" cols="30" style="resize: none" />
-        <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
+        <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Textarea name="textarea" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
+                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <Textarea name="textarea" rows="5" cols="30" style="resize: none" />
-                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
+                <Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/togglebutton/FormDoc.vue b/apps/showcase/doc/togglebutton/FormDoc.vue
index ed9a6dfe7..6acec8b97 100644
--- a/apps/showcase/doc/togglebutton/FormDoc.vue
+++ b/apps/showcase/doc/togglebutton/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
-                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col items-center gap-2">
         <ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
-        <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
+        <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
-                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
-                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
+                <Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/toggleswitch/FormDoc.vue b/apps/showcase/doc/toggleswitch/FormDoc.vue
index e9e35e665..34d267477 100644
--- a/apps/showcase/doc/toggleswitch/FormDoc.vue
+++ b/apps/showcase/doc/toggleswitch/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
+                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -34,7 +34,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <div class="flex flex-col items-center gap-2">
         <ToggleSwitch name="toggleswitch" />
-        <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
+        <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,7 +45,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
+                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -86,7 +86,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <div class="flex flex-col items-center gap-2">
                 <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
+                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/treeselect/FormDoc.vue b/apps/showcase/doc/treeselect/FormDoc.vue
index b43c94159..66c6812f4 100644
--- a/apps/showcase/doc/treeselect/FormDoc.vue
+++ b/apps/showcase/doc/treeselect/FormDoc.vue
@@ -6,7 +6,7 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
             <div class="flex flex-col gap-2">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -36,7 +36,7 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
     <div class="flex flex-col gap-2">
         <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-        <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
+        <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -47,7 +47,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
             <div class="flex flex-col gap-2">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -90,7 +90,7 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
             <div class="flex flex-col gap-2">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>