From 5c8f170048ba0c3d463282e0de2aca6ebd963329 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Oct 2024 13:26:41 +0300
Subject: [PATCH] Update per component form samples

---
 apps/showcase/doc/autocomplete/BasicDoc.vue  |   2 +-
 apps/showcase/doc/autocomplete/FormsDoc.vue  |  33 ++--
 apps/showcase/doc/cascadeselect/FormsDoc.vue |  31 ++--
 apps/showcase/doc/checkbox/FormsDoc.vue      |  34 ++--
 apps/showcase/doc/colorpicker/FormsDoc.vue   |  30 ++--
 apps/showcase/doc/datepicker/FormsDoc.vue    |  18 +-
 apps/showcase/doc/editor/FormsDoc.vue        |  38 ++--
 apps/showcase/doc/inputmask/FormsDoc.vue     |  39 +++--
 apps/showcase/doc/inputnumber/FormsDoc.vue   |  18 +-
 apps/showcase/doc/inputotp/FormsDoc.vue      |  38 ++--
 apps/showcase/doc/inputtext/FormsDoc.vue     |   9 +-
 apps/showcase/doc/knob/FormsDoc.vue          |  18 +-
 apps/showcase/doc/listbox/FormsDoc.vue       |  30 ++--
 apps/showcase/doc/multiselect/FormsDoc.vue   |  28 +--
 apps/showcase/doc/password/FormsDoc.vue      |  30 ++--
 apps/showcase/doc/radiobutton/FormsDoc.vue   | 174 ++++++++++---------
 apps/showcase/doc/rating/FormsDoc.vue        |  18 +-
 apps/showcase/doc/select/FormsDoc.vue        |  28 +--
 apps/showcase/doc/selectbutton/FormsDoc.vue  |  38 ++--
 apps/showcase/doc/slider/FormsDoc.vue        |  18 +-
 apps/showcase/doc/textarea/FormsDoc.vue      |  38 ++--
 apps/showcase/doc/togglebutton/FormsDoc.vue  |  39 +++--
 apps/showcase/doc/toggleswitch/FormsDoc.vue  |  38 ++--
 apps/showcase/doc/treeselect/FormsDoc.vue    |  22 +--
 24 files changed, 409 insertions(+), 400 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/BasicDoc.vue b/apps/showcase/doc/autocomplete/BasicDoc.vue
index 5d0e88345..d798b6634 100644
--- a/apps/showcase/doc/autocomplete/BasicDoc.vue
+++ b/apps/showcase/doc/autocomplete/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>AutoComplete is used as a controlled component with <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
+        <p>AutoComplete is used with the <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
diff --git a/apps/showcase/doc/autocomplete/FormsDoc.vue b/apps/showcase/doc/autocomplete/FormsDoc.vue
index d49f459a0..2ebf50de0 100644
--- a/apps/showcase/doc/autocomplete/FormsDoc.vue
+++ b/apps/showcase/doc/autocomplete/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>AutoComplete integrates seamlessly 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-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -31,18 +31,18 @@ export default {
                 z.object({
                     country: z.union([
                         z.object({
-                            name: z.string().min(1, 'Country required.')
+                            name: z.string().min(1, 'Country is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'Country required.' })
+                        z.any().refine((val) => false, { message: 'Country is required.' })
                     ])
                 })
             ),
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-        <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
+        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -51,9 +51,9 @@ export default {
 <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 w-full md:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -78,9 +78,9 @@ export default {
                 z.object({
                     country: z.union([
                         z.object({
-                            name: z.string().min(1, 'Country required.')
+                            name: z.string().min(1, 'Country is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'Country required.' })
+                        z.any().refine((val) => false, { message: 'Country is required.' })
                     ])
                 })
             )
@@ -115,9 +115,9 @@ export default {
 <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 w-full md:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
+                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -139,14 +139,13 @@ onMounted(() => {
 const initialValues = ref({
     country: { name: '' }
 });
-const resolver = ref(
-zodResolver(
+const resolver = ref(zodResolver(
     z.object({
         country: z.union([
             z.object({
-                name: z.string().min(1, 'Country required.')
+                name: z.string().min(1, 'Country is required.')
             }),
-            z.any().refine((val) => false, { message: 'Country required.' })
+            z.any().refine((val) => false, { message: 'Country is required.' })
         ])
     })
 ));
diff --git a/apps/showcase/doc/cascadeselect/FormsDoc.vue b/apps/showcase/doc/cascadeselect/FormsDoc.vue
index dd2963ea5..d38cf208c 100644
--- a/apps/showcase/doc/cascadeselect/FormsDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>CascadeSelect can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>CascadeSelect integrates seamlessly 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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <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.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -28,9 +28,9 @@ export default {
                 z.object({
                     city: z.union([
                         z.object({
-                            cname: z.string().min(1, 'City required.')
+                            cname: z.string().min(1, 'City is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'City required.' })
+                        z.any().refine((val) => false, { message: 'City is required.' })
                     ])
                 })
             ),
@@ -111,9 +111,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <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.error?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -122,9 +122,9 @@ export default {
 <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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <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.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -236,9 +236,9 @@ export default {
 <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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <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.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -256,6 +256,7 @@ const toast = useToast();
 const initialValues = ref({
     city: null
 });
+
 const resolver = ref(zodResolver(
     z.object({
         city: z.object({
@@ -263,13 +264,7 @@ const resolver = ref(zodResolver(
         })
     })
 ));
-const resolver = ref(zodResolver(
-    z.object({
-        city: z.object({
-            cname: z.string().min(1, 'City is required.')
-        })
-    })
-));
+
 const countries = ref([
     {
         name: 'Australia',
diff --git a/apps/showcase/doc/checkbox/FormsDoc.vue b/apps/showcase/doc/checkbox/FormsDoc.vue
index 5cdc35839..1c89f95a2 100644
--- a/apps/showcase/doc/checkbox/FormsDoc.vue
+++ b/apps/showcase/doc/checkbox/FormsDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Checkbox can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Checkbox integrates seamlessly 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">
             <div class="flex flex-col gap-2">
-                <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
                     <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
                         <label for="cheese"> Cheese </label>
@@ -23,8 +23,7 @@
                         <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
-
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -40,18 +39,18 @@ export default {
     data() {
         return {
             initialValues: {
-                checkbox: []
+                ingredient: []
             },
             resolver: zodResolver(
                 z.object({
-                    checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' })
+                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
                 })
             ),
             code: {
                 basic: `
 <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">
-        <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
+        <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
             <div class="flex items-center gap-2">
                 <Checkbox inputId="cheese" value="Cheese" />
                 <label for="cheese"> Cheese </label>
@@ -69,8 +68,7 @@ export default {
                 <label for="onion"> Onion </label>
             </div>
         </CheckboxGroup>
-
-        <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
+        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -80,7 +78,7 @@ export default {
     <div class="card flex justify-center">
         <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">
-                <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
                     <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
                         <label for="cheese"> Cheese </label>
@@ -98,8 +96,7 @@ export default {
                         <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
-
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -115,11 +112,11 @@ export default {
     data() {
         return {
             initialValues: {
-                checkbox: []
+                ingredient: []
             },
             resolver: zodResolver(
                 z.object({
-                    checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' })
+                    ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
                 })
             ),
         }
@@ -140,7 +137,7 @@ export default {
     <div class="card flex justify-center">
         <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">
-                <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
+                <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
                     <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
                         <label for="cheese"> Cheese </label>
@@ -158,8 +155,7 @@ export default {
                         <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
-
-                <Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -175,11 +171,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    checkbox: []
+    ingredient: []
 });
 const resolver = ref(zodResolver(
     z.object({
-        checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' })
+        ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
     })
 ));
 
diff --git a/apps/showcase/doc/colorpicker/FormsDoc.vue b/apps/showcase/doc/colorpicker/FormsDoc.vue
index 71b66f478..cfd82cc23 100644
--- a/apps/showcase/doc/colorpicker/FormsDoc.vue
+++ b/apps/showcase/doc/colorpicker/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ColorPicker can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>ColorPicker integrates seamlessly 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 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.error?.message }}</Message>
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                colorpicker: null
+                color: null
             },
             resolver: zodResolver(
                 z.object({
-                    colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' })
+                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
                 })
             ),
             code: {
                 basic: `
 <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.error?.message }}</Message>
+        <ColorPicker name="color" />
+        <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -44,8 +44,8 @@ export default {
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                colorpicker: null
+                color: null
             },
             resolver: zodResolver(
                 z.object({
-                    colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' })
+                    color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
                 })
             )
         }
@@ -85,8 +85,8 @@ export default {
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+                <ColorPicker name="color" />
+                <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    colorpicker: null
+    color: null
 });
 const resolver = ref(zodResolver(
     z.object({
-        colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' })
+        color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/datepicker/FormsDoc.vue b/apps/showcase/doc/datepicker/FormsDoc.vue
index 4726e13c0..541dae93e 100644
--- a/apps/showcase/doc/datepicker/FormsDoc.vue
+++ b/apps/showcase/doc/datepicker/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>DatePicker can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>DatePicker integrates seamlessly 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 flex-col gap-4">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -38,9 +38,9 @@ export default {
             code: {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
         <DatePicker name="date" fluid />
-        <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
+        <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -49,9 +49,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -96,9 +96,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <DatePicker name="date" fluid />
-                <Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
+                <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/editor/FormsDoc.vue b/apps/showcase/doc/editor/FormsDoc.vue
index fb16aab20..2c47fe720 100644
--- a/apps/showcase/doc/editor/FormsDoc.vue
+++ b/apps/showcase/doc/editor/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Editor can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Editor integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
     </DocSectionText>
     <div class="card">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Editor name="content" editorStyle="height: 320px" />
+                <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                editor: ''
+                content: ''
             },
             resolver: zodResolver(
                 z.object({
-                    editor: z.string().min(1, { message: 'Editor is required.' })
+                    content: z.string().min(1, { message: 'Content is required.' })
                 })
             ),
             code: {
                 basic: `
 <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.error?.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <Editor name="content" editorStyle="height: 320px" />
+        <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Editor name="content" editorStyle="height: 320px" />
+                <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                editor: ''
+                content: ''
             },
             resolver: zodResolver(
                 z.object({
-                    editor: z.string().min(1, { message: 'Editor is required.' })
+                    content: z.string().min(1, { message: 'Content is required.' })
                 })
             )
         }
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Editor name="content" editorStyle="height: 320px" />
+                <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    editor: '
+    content: ''
 });
 const resolver = ref(zodResolver(
     z.object({
-        editor: z.string().min(1, { message: 'Editor is required.' })
+        content: z.string().min(1, { message: 'Content is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/inputmask/FormsDoc.vue b/apps/showcase/doc/inputmask/FormsDoc.vue
index 0dad5df0b..c7a319cdd 100644
--- a/apps/showcase/doc/inputmask/FormsDoc.vue
+++ b/apps/showcase/doc/inputmask/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputMask can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>InputMask integrates seamlessly 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 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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                mask: ''
+                serialNumber: ''
             },
             resolver: zodResolver(
                 z.object({
-                    mask: z.string().min(1, { message: 'Mask is required.' })
+                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
                 })
             ),
             code: {
                 basic: `
 <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.error?.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+        <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                mask: ''
+                serialNumber: ''
             },
             resolver: zodResolver(
                 z.object({
-                    mask: z.string().min(1, { message: 'Mask is required.' })
+                    serialNumber: z.string().min(1, { message: 'Serial number is required.' })
                 })
             )
         }
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
+                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,12 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    mask: ''
+    serialNumber: ''
 });
+
 const resolver = ref(zodResolver(
     z.object({
-        mask: z.string().min(1, { message: 'Mask is required.' })
+        serialNumber: z.string().min(1, { message: 'Serial number is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/inputnumber/FormsDoc.vue b/apps/showcase/doc/inputnumber/FormsDoc.vue
index 111ca1c34..7aebcdbaa 100644
--- a/apps/showcase/doc/inputnumber/FormsDoc.vue
+++ b/apps/showcase/doc/inputnumber/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputNumber can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>InputNumber integrates seamlessly 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 flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -32,9 +32,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <InputNumber name="number" fluid />
-        <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
+        <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-1">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-1">
                 <InputNumber name="number" fluid />
-                <Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
+                <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/inputotp/FormsDoc.vue b/apps/showcase/doc/inputotp/FormsDoc.vue
index 203769c85..9eedb9166 100644
--- a/apps/showcase/doc/inputotp/FormsDoc.vue
+++ b/apps/showcase/doc/inputotp/FormsDoc.vue
@@ -1,11 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputOtp can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>InputOtp integrates seamlessly 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 flex-col gap-4">
-            <InputOtp name="otp" />
-            <Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -20,18 +22,20 @@ export default {
     data() {
         return {
             initialValues: {
-                otp: ''
+                passcode: ''
             },
             resolver: zodResolver(
                 z.object({
-                    otp: z.string().min(1, { message: 'Otp is required.' })
+                    passcode: z.string().min(1, { message: 'Passcode is required.' })
                 })
             ),
             code: {
                 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.error?.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <InputOtp name="passcode" />
+        <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+    </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
 `,
@@ -39,8 +43,10 @@ export default {
 <template>
     <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -54,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                otp: ''
+                passcode: ''
             },
             resolver: zodResolver(
                 z.object({
-                    otp: z.string().min(1, { message: 'Otp is required.' })
+                    passcode: z.string().min(1, { message: 'Passcode is required.' })
                 })
             )
         }
@@ -78,8 +84,10 @@ export default {
 <template>
     <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputOtp name="passcode" />
+                <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -93,11 +101,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    otp: ''
+    passcode: ''
 });
 const resolver = ref(zodResolver(
     z.object({
-        otp: z.string().min(1, { message: 'Otp is required.' })
+        passcode: z.string().min(1, { message: 'Passcode is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/inputtext/FormsDoc.vue b/apps/showcase/doc/inputtext/FormsDoc.vue
index d541f30ef..888470f92 100644
--- a/apps/showcase/doc/inputtext/FormsDoc.vue
+++ b/apps/showcase/doc/inputtext/FormsDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>InputText integrates seamlessly 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 flex-col gap-4 w-full sm:w-56">
@@ -32,7 +32,7 @@ export default {
             resolver: zodResolver(
                 z.object({
                     username: z.string().min(1, { message: 'Username is required.' }),
-                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' })
+                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
                 })
             ),
             code: {
@@ -80,7 +80,7 @@ export default {
             resolver: zodResolver(
                 z.object({
                     username: z.string().min(1, { message: 'Username is required.' }),
-                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' })
+                    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
                 })
             )
         }
@@ -124,10 +124,11 @@ const initialValues = ref({
     username: '',
     email: ''
 });
+
 const resolver = ref(zodResolver(
     z.object({
         username: z.string().min(1, { message: 'Username is required.' }),
-        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' })
+        email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
     })
 ));
 
diff --git a/apps/showcase/doc/knob/FormsDoc.vue b/apps/showcase/doc/knob/FormsDoc.vue
index 0edca8508..3eff564a3 100644
--- a/apps/showcase/doc/knob/FormsDoc.vue
+++ b/apps/showcase/doc/knob/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Knob can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Knob integrates seamlessly 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 flex-col gap-4">
-            <div class="flex flex-col items-center gap-2">
+            <div class="flex flex-col items-center gap-1">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -32,9 +32,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col items-center gap-1">
         <Knob name="knob" />
-        <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
+        <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col items-center gap-1">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -85,9 +85,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col items-center gap-1">
                 <Knob name="knob" />
-                <Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
+                <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/listbox/FormsDoc.vue b/apps/showcase/doc/listbox/FormsDoc.vue
index 1b58e3377..36969e106 100644
--- a/apps/showcase/doc/listbox/FormsDoc.vue
+++ b/apps/showcase/doc/listbox/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Listbox can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Listbox integrates seamlessly 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 flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -28,9 +28,9 @@ export default {
                 z.object({
                     city: z.union([
                         z.object({
-                            name: z.string().min(1, 'City required.')
+                            name: z.string().min(1, 'City is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'City required.' })
+                        z.any().refine((val) => false, { message: 'City is required.' })
                     ])
                 })
             ),
@@ -44,9 +44,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <Listbox name="city" :options="cities" optionLabel="name" fluid />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -55,9 +55,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-1">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -78,9 +78,9 @@ export default {
                 z.object({
                     city: z.union([
                         z.object({
-                            name: z.string().min(1, 'City required.')
+                            name: z.string().min(1, 'City is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'City required.' })
+                        z.any().refine((val) => false, { message: 'City is required.' })
                     ])
                 })
             ),
@@ -108,9 +108,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-1">
                 <Listbox name="city" :options="cities" optionLabel="name" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -131,9 +131,9 @@ const resolver = ref(zodResolver(
     z.object({
         city: z.union([
             z.object({
-                name: z.string().min(1, 'City required.')
+                name: z.string().min(1, 'City is required.')
             }),
-            z.any().refine((val) => false, { message: 'City required.' })
+            z.any().refine((val) => false, { message: 'City is required.' })
         ])
     })
 ));
diff --git a/apps/showcase/doc/multiselect/FormsDoc.vue b/apps/showcase/doc/multiselect/FormsDoc.vue
index b2745635e..4405084a7 100644
--- a/apps/showcase/doc/multiselect/FormsDoc.vue
+++ b/apps/showcase/doc/multiselect/FormsDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs"> </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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -27,10 +27,10 @@ export default {
                     city: z
                         .array(
                             z.object({
-                                name: z.string().min(1, 'City required.')
+                                name: z.string().min(1, 'City is required.')
                             })
                         )
-                        .min(1, 'City required.')
+                        .min(1, 'City is required.')
                 })
             ),
             cities: [
@@ -43,9 +43,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <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.error?.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -54,9 +54,9 @@ export default {
 <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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <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.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -78,10 +78,10 @@ export default {
                     city: z
                     .array(
                         z.object({
-                            name: z.string().min(1, 'City required.')
+                            name: z.string().min(1, 'City is required.')
                         })
                     )
-                    .min(1, 'City required.')
+                    .min(1, 'City is required.')
                 })
             ),
             cities: [
@@ -108,9 +108,9 @@ export default {
 <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">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <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.error?.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -132,10 +132,10 @@ const resolver = ref(zodResolver(
         city: z
             .array(
                 z.object({
-                    name: z.string().min(1, 'City required.')
+                    name: z.string().min(1, 'City is required.')
                 })
             )
-            .min(1, 'City required.')
+            .min(1, 'City is required.')
     })
 ));
 const cities = ref([
diff --git a/apps/showcase/doc/password/FormsDoc.vue b/apps/showcase/doc/password/FormsDoc.vue
index 939a22dcc..0b5f2c86c 100644
--- a/apps/showcase/doc/password/FormsDoc.vue
+++ b/apps/showcase/doc/password/FormsDoc.vue
@@ -3,11 +3,11 @@
         <p>InputText is used with the <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" fluid />
                 <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message>
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
                 </template>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
@@ -36,7 +36,7 @@ export default {
                             message: 'Must have a lowercase letter.'
                         })
                         .refine((value) => /[A-Z]/.test(value), {
-                            message: 'Must have a uppercase letter.'
+                            message: 'Must have an uppercase letter.'
                         })
                         .refine((value) => /\d/.test(value), {
                             message: 'Must have a number.'
@@ -45,11 +45,11 @@ export default {
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
-    <div class="flex flex-col gap-2">
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+    <div class="flex flex-col gap-1">
         <Password name="password" placeholder="Password" :feedback="false" fluid />
         <template v-if="$form.password?.invalid">
-            <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message>
+            <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
         </template>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
@@ -58,11 +58,11 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" fluid />
                 <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message>
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
                 </template>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
@@ -90,7 +90,7 @@ export default {
                             message: 'Must have a lowercase letter.'
                         })
                         .refine((value) => /[A-Z]/.test(value), {
-                            message: 'Must have a uppercase letter.'
+                            message: 'Must have an uppercase letter.'
                         })
                         .refine((value) => /\d/.test(value), {
                             message: 'Must have a number.'
@@ -113,11 +113,11 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" fluid />
                 <template v-if="$form.password?.invalid">
-                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message>
+                    <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
                 </template>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
@@ -145,7 +145,7 @@ const resolver = ref(zodResolver(
                 message: 'Must have a lowercase letter.'
             })
             .refine((value) => /[A-Z]/.test(value), {
-                message: 'Must have a uppercase letter.'
+                message: 'Must have an uppercase letter.'
             })
             .refine((value) => /\d/.test(value), {
                 message: 'Must have a number.'
diff --git a/apps/showcase/doc/radiobutton/FormsDoc.vue b/apps/showcase/doc/radiobutton/FormsDoc.vue
index 3167d06d3..9e24d5c04 100644
--- a/apps/showcase/doc/radiobutton/FormsDoc.vue
+++ b/apps/showcase/doc/radiobutton/FormsDoc.vue
@@ -1,28 +1,30 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>RadioButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>RadioButton integrates seamlessly 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 flex-col gap-4">
-            <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="cheese" value="Cheese" />
-                    <label for="cheese">Cheese</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="mushroom" value="Mushroom" />
-                    <label for="mushroom">Mushroom</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="pepper" value="Pepper" />
-                    <label for="pepper">Pepper</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="onion" value="Onion" />
-                    <label for="onion">Onion</label>
-                </div>
-            </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -37,35 +39,37 @@ export default {
     data() {
         return {
             initialValues: {
-                radiobutton: ''
+                ingredient: ''
             },
             resolver: zodResolver(
                 z.object({
-                    radiobutton: z.string().min(1, { message: 'Selection is required.' })
+                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
                 })
             ),
             code: {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-    <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-        <div class="flex items-center gap-2">
-            <RadioButton inputId="cheese" value="Cheese" />
-            <label for="cheese">Cheese</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <RadioButton inputId="mushroom" value="Mushroom" />
-            <label for="mushroom">Mushroom</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <RadioButton inputId="pepper" value="Pepper" />
-            <label for="pepper">Pepper</label>
-        </div>
-        <div class="flex items-center gap-2">
-            <RadioButton inputId="onion" value="Onion" />
-            <label for="onion">Onion</label>
-        </div>
-    </RadioButtonGroup>
-    <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
+    <div class="flex flex-col gap-2">
+        <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="cheese" value="Cheese" />
+                <label for="cheese">Cheese</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="mushroom" value="Mushroom" />
+                <label for="mushroom">Mushroom</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="pepper" value="Pepper" />
+                <label for="pepper">Pepper</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton inputId="onion" value="Onion" />
+                <label for="onion">Onion</label>
+            </div>
+        </RadioButtonGroup>
+        <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+    </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
 `,
@@ -73,25 +77,27 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="cheese" value="Cheese" />
-                    <label for="cheese">Cheese</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="mushroom" value="Mushroom" />
-                    <label for="mushroom">Mushroom</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="pepper" value="Pepper" />
-                    <label for="pepper">Pepper</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="onion" value="Onion" />
-                    <label for="onion">Onion</label>
-                </div>
-            </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -105,11 +111,11 @@ export default {
     data() {
         return {
             initialValues: {
-                radiobutton: ''
+                ingredient: ''
             },
             resolver: zodResolver(
                 z.object({
-                    radiobutton: z.string().min(1, { message: 'Selection is required.' })
+                    ingredient: z.string().min(1, { message: 'Ingredient is required.' })
                 })
             )
         }
@@ -129,25 +135,27 @@ export default {
 <template>
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
-            <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="cheese" value="Cheese" />
-                    <label for="cheese">Cheese</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="mushroom" value="Mushroom" />
-                    <label for="mushroom">Mushroom</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="pepper" value="Pepper" />
-                    <label for="pepper">Pepper</label>
-                </div>
-                <div class="flex items-center gap-2">
-                    <RadioButton inputId="onion" value="Onion" />
-                    <label for="onion">Onion</label>
-                </div>
-            </RadioButtonGroup>
-            <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
+            <div class="flex flex-col gap-2">
+                <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="cheese" value="Cheese" />
+                        <label for="cheese">Cheese</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="mushroom" value="Mushroom" />
+                        <label for="mushroom">Mushroom</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="pepper" value="Pepper" />
+                        <label for="pepper">Pepper</label>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <RadioButton inputId="onion" value="Onion" />
+                        <label for="onion">Onion</label>
+                    </div>
+                </RadioButtonGroup>
+                <Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
+            </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
     </div>
@@ -161,11 +169,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    radiobutton: ''
+    ingredient: ''
 });
 const resolver = ref(zodResolver(
     z.object({
-        radiobutton: z.string().min(1, { message: 'Selection is required.' })
+        ingredient: z.string().min(1, { message: 'Ingredient is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/rating/FormsDoc.vue b/apps/showcase/doc/rating/FormsDoc.vue
index 704c18f5f..b1330ee11 100644
--- a/apps/showcase/doc/rating/FormsDoc.vue
+++ b/apps/showcase/doc/rating/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Rating can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Rating integrates seamlessly 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 flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -31,10 +31,10 @@ export default {
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
     <div class="flex flex-col items-center gap-2">
         <Rating name="rating" />
-        <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
+        <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -42,10 +42,10 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -83,10 +83,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
             <div class="flex flex-col items-center gap-2">
                 <Rating name="rating" />
-                <Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
+                <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/select/FormsDoc.vue b/apps/showcase/doc/select/FormsDoc.vue
index b43b63472..337f4a948 100644
--- a/apps/showcase/doc/select/FormsDoc.vue
+++ b/apps/showcase/doc/select/FormsDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs"> </DocSectionText>
     <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">
+            <div class="flex flex-col gap-1">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -26,9 +26,9 @@ export default {
                 z.object({
                     city: z.union([
                         z.object({
-                            name: z.string().min(1, 'City required.')
+                            name: z.string().min(1, 'City is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'City required.' })
+                        z.any().refine((val) => false, { message: 'City is required.' })
                     ])
                 })
             ),
@@ -42,9 +42,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-        <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
+        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -53,9 +53,9 @@ export default {
 <template>
     <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">
+            <div class="flex flex-col gap-1">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -76,9 +76,9 @@ export default {
                 z.object({
                     city: z.union([
                         z.object({
-                            name: z.string().min(1, 'City required.')
+                            name: z.string().min(1, 'City is required.')
                         }),
-                        z.any().refine((val) => false, { message: 'City required.' })
+                        z.any().refine((val) => false, { message: 'City is required.' })
                     ])
                 })
             ),
@@ -105,9 +105,9 @@ export default {
 <template>
     <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">
+            <div class="flex flex-col gap-1">
                 <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
-                <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error.message }}</Message>
+                <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -128,9 +128,9 @@ const resolver = ref(zodResolver(
     z.object({
         city: z.union([
             z.object({
-                name: z.string().min(1, 'City required.')
+                name: z.string().min(1, 'City is required.')
             }),
-            z.any().refine((val) => false, { message: 'City required.' })
+            z.any().refine((val) => false, { message: 'City is required.' })
         ])
     })
 ));
diff --git a/apps/showcase/doc/selectbutton/FormsDoc.vue b/apps/showcase/doc/selectbutton/FormsDoc.vue
index 26bfbad78..5452dc34a 100644
--- a/apps/showcase/doc/selectbutton/FormsDoc.vue
+++ b/apps/showcase/doc/selectbutton/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>SelectButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>SelectButton integrates seamlessly 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 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.error?.message }}</Message>
+            <div class="flex items-center flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error" size="small" variant="simple">{{ $form.selection.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,20 +22,20 @@ export default {
     data() {
         return {
             initialValues: {
-                selectbutton: ''
+                selection: ''
             },
             resolver: zodResolver(
                 z.object({
-                    selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' }))
+                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
                 })
             ),
             options: ['One-Way', 'Return'],
             code: {
                 basic: `
 <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.error?.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <SelectButton name="selection" :options="options" />
+        <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -44,9 +44,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -61,11 +61,11 @@ export default {
     data() {
         return {
             initialValues: {
-                selectbutton: ''
+                selection: ''
             },
             resolver: zodResolver(
                 z.object({
-                    selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' }))
+                    selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
                 })
             ),
             options: ['One-Way', 'Return'],
@@ -86,9 +86,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <SelectButton name="selection" :options="options" />
+                <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -103,11 +103,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    selectbutton: ''
+    selection: ''
 });
 const resolver = ref(zodResolver(
     z.object({
-        selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' }))
+        selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
     })
 ));
 
diff --git a/apps/showcase/doc/slider/FormsDoc.vue b/apps/showcase/doc/slider/FormsDoc.vue
index 1472576ea..e5f4a4ef2 100644
--- a/apps/showcase/doc/slider/FormsDoc.vue
+++ b/apps/showcase/doc/slider/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Slider can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Slider integrates seamlessly 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 flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-4">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -32,9 +32,9 @@ export default {
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-4">
         <Slider name="slider" />
-        <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
+        <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-4">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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">
+            <div class="flex flex-col gap-4">
                 <Slider name="slider" />
-                <Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
+                <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/textarea/FormsDoc.vue b/apps/showcase/doc/textarea/FormsDoc.vue
index b578bdfed..4e1c65cc5 100644
--- a/apps/showcase/doc/textarea/FormsDoc.vue
+++ b/apps/showcase/doc/textarea/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Textarea can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>Textarea integrates seamlessly 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 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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                textarea: ''
+                address: ''
             },
             resolver: zodResolver(
                 z.object({
-                    textarea: z.string().min(1, { message: 'Textarea is required.' })
+                    address: z.string().min(1, { message: 'Address is required.' })
                 })
             ),
             code: {
                 basic: `
 <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.error?.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <Textarea name="address" rows="5" cols="30" style="resize: none" />
+        <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                textarea: ''
+                address: ''
             },
             resolver: zodResolver(
                 z.object({
-                    textarea: z.string().min(1, { message: 'Textarea is required.' })
+                    address: z.string().min(1, { message: 'Address is required.' })
                 })
             ),
         }
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <Textarea name="address" rows="5" cols="30" style="resize: none" />
+                <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    textarea: ''
+    address: ''
 });
 const resolver = ref(zodResolver(
     z.object({
-        textarea: z.string().min(1, { message: 'Textarea is required.' })
+        address: z.string().min(1, { message: 'Address is required.' })
     })
 ));
 
diff --git a/apps/showcase/doc/togglebutton/FormsDoc.vue b/apps/showcase/doc/togglebutton/FormsDoc.vue
index 6acec8b97..7fcde275c 100644
--- a/apps/showcase/doc/togglebutton/FormsDoc.vue
+++ b/apps/showcase/doc/togglebutton/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ToggleButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>ToggleButton integrates seamlessly 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 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.error?.message }}</Message>
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                togglebutton: false
+                consent: false
             },
             resolver: zodResolver(
                 z.object({
-                    togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' })
+                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
                 })
             ),
             code: {
                 basic: `
 <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.error?.message }}</Message>
+    <div class="flex flex-col items-center gap-1">
+        <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+        <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -43,9 +43,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                togglebutton: false
+                consent: false
             },
             resolver: zodResolver(
                 z.object({
-                    togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' })
+                    consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
                 })
             ),
         }
@@ -84,9 +84,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <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.error?.message }}</Message>
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
+                <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,12 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    togglebutton: false
+    consent: false
 });
+
 const resolver = ref(zodResolver(
     z.object({
-        togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' })
+        consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
     })
 ));
 
diff --git a/apps/showcase/doc/toggleswitch/FormsDoc.vue b/apps/showcase/doc/toggleswitch/FormsDoc.vue
index 34d267477..92e3f62b8 100644
--- a/apps/showcase/doc/toggleswitch/FormsDoc.vue
+++ b/apps/showcase/doc/toggleswitch/FormsDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ToggleSwitch can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
+        <p>ToggleSwitch integrates seamlessly 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 flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
             <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -22,19 +22,19 @@ export default {
     data() {
         return {
             initialValues: {
-                toggleswitch: false
+                activation: false
             },
             resolver: zodResolver(
                 z.object({
-                    toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' })
+                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
                 })
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
     <div class="flex flex-col items-center gap-2">
-        <ToggleSwitch name="toggleswitch" />
-        <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
+        <ToggleSwitch name="activation" />
+        <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -42,10 +42,10 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
             <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -60,11 +60,11 @@ export default {
     data() {
         return {
             initialValues: {
-                toggleswitch: false
+                activation: false
             },
             resolver: zodResolver(
                 z.object({
-                    toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' })
+                    activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
                 })
             ),
         }
@@ -83,10 +83,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
             <div class="flex flex-col items-center gap-2">
-                <ToggleSwitch name="toggleswitch" />
-                <Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -101,11 +101,11 @@ import { z } from 'zod';
 
 const toast = useToast();
 const initialValues = ref({
-    toggleswitch: false
+    activation: false
 });
 const resolver = ref(zodResolver(
     z.object({
-        toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' })
+        activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
     })
 ));
 <\/script>
diff --git a/apps/showcase/doc/treeselect/FormsDoc.vue b/apps/showcase/doc/treeselect/FormsDoc.vue
index 66c6812f4..6a9c28158 100644
--- a/apps/showcase/doc/treeselect/FormsDoc.vue
+++ b/apps/showcase/doc/treeselect/FormsDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <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-80">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -27,16 +27,16 @@ export default {
             },
             resolver: zodResolver(
                 z.object({
-                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' })
+                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
                 })
             ),
             nodes: null,
             code: {
                 basic: `
 <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">
+    <div class="flex flex-col gap-1">
         <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-        <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
+        <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -45,9 +45,9 @@ export default {
 <template>
     <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-80">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -67,7 +67,7 @@ export default {
             },
             resolver: zodResolver(
                 z.object({
-                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' })
+                    node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
                 })
             ),
             nodes: null,
@@ -88,9 +88,9 @@ export default {
 <template>
     <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-80">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
-                <Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
+                <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -110,7 +110,7 @@ const initialValues = ref({
 });
 const resolver = ref(zodResolver(
     z.object({
-        node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' })
+        node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
     })
 ));