From e8f3a62077cc1e4aa7e236db5bcb60d8e6d8d06a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 31 Oct 2024 10:56:10 +0300
Subject: [PATCH] Update forms doc

---
 apps/showcase/doc/clt/DownloadDoc.vue     |   2 +-
 apps/showcase/doc/forms/BasicDoc.vue      |  47 ++++++++--
 apps/showcase/doc/forms/DownloadDoc.vue   |  27 ++++++
 apps/showcase/doc/forms/DynamicDoc.vue    |   6 +-
 apps/showcase/doc/forms/ImportDoc.vue     |   6 +-
 apps/showcase/doc/forms/ResolversDoc.vue  |  90 +++++++++---------
 apps/showcase/doc/forms/StatesDoc.vue     |  10 +-
 apps/showcase/doc/forms/SubmitDoc.vue     |  17 ++--
 apps/showcase/doc/forms/ValidateOnDoc.vue | 109 +++++++++++-----------
 apps/showcase/doc/nuxt/DownloadDoc.vue    |   2 +-
 apps/showcase/doc/vite/DownloadDoc.vue    |   2 +-
 apps/showcase/pages/forms/index.vue       |   8 +-
 12 files changed, 200 insertions(+), 126 deletions(-)
 create mode 100644 apps/showcase/doc/forms/DownloadDoc.vue

diff --git a/apps/showcase/doc/clt/DownloadDoc.vue b/apps/showcase/doc/clt/DownloadDoc.vue
index 4b3638d94..1fa48c0f8 100644
--- a/apps/showcase/doc/clt/DownloadDoc.vue
+++ b/apps/showcase/doc/clt/DownloadDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm Registry</a>.</p>
+        <p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm registry</a>.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
diff --git a/apps/showcase/doc/forms/BasicDoc.vue b/apps/showcase/doc/forms/BasicDoc.vue
index 140bf3b63..4b7b20b06 100644
--- a/apps/showcase/doc/forms/BasicDoc.vue
+++ b/apps/showcase/doc/forms/BasicDoc.vue
@@ -1,14 +1,43 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Form is compatible with PrimeVue components, enabling smooth integration and functionality. Each component is linked to Form via a <i>name</i> property, which the form uses to create a state object for tracking values, errors and actions.
+            All PrimeVue form components are designed for seamless integration with the forms library. Instead of using the standard <i>v-model</i>, the <i>name</i> property is used to link a state object that tracks values, errors, and actions. The
+            form component provides four key properties for state management.
         </p>
     </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th class="w-1/4">Property</th>
+                    <th class="w-3/4">Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>v-slot="$form"</td>
+                    <td>Exposes the main <i>$form</i> object that tracks the state management of the fields.</td>
+                </tr>
+                <tr>
+                    <td>initialValues</td>
+                    <td>Specifies the default values to initiate the form with.</td>
+                </tr>
+                <tr>
+                    <td>resolver</td>
+                    <td>The validation handler to implement validations or to bind a schema like <i>Zod</i>, <i>Yup</i>, <i>Valibot</i> and more.</td>
+                </tr>
+                <tr>
+                    <td>@submit</td>
+                    <td>The event handler to execute when the form is submitted.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
     <div class="card flex justify-center">
         <Form v-slot="$form" :initialValues :resolver @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">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -26,9 +55,9 @@ export default {
             code: {
                 basic: `
 <Form v-slot="$form" :initialValues :resolver @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">
         <InputText name="username" type="text" placeholder="Username" fluid />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -39,9 +68,9 @@ export default {
         <Toast />
 
         <Form v-slot="$form" :initialValues :resolver @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">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -84,9 +113,9 @@ export default {
         <Toast />
 
         <Form v-slot="$form" :initialValues :resolver @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">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/forms/DownloadDoc.vue b/apps/showcase/doc/forms/DownloadDoc.vue
new file mode 100644
index 000000000..fe6fdbc30
--- /dev/null
+++ b/apps/showcase/doc/forms/DownloadDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Forms add-on is available for download on npm registry.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install @primevue/forms
+
+# Using yarn
+yarn add @primevue/forms
+
+# Using pnpm
+pnpm add @primevue/forms
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/forms/DynamicDoc.vue b/apps/showcase/doc/forms/DynamicDoc.vue
index c20181585..c6a957985 100644
--- a/apps/showcase/doc/forms/DynamicDoc.vue
+++ b/apps/showcase/doc/forms/DynamicDoc.vue
@@ -1,6 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures.</p>
+        <p>
+            This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures. The
+            components named <i>Dynamic*</i> shown in this example are not built-in, and only available for sampling purposes. First form uses a declarative approach whereas second form goes for a programmatic approach. We suggest running this sample
+            in StackBlitz to view the comprehensive implementation.
+        </p>
     </DocSectionText>
     <div class="card grid md:grid-cols-2 gap-4 w-full">
         <Fieldset legend="Form 1" pt:content:class="flex justify-center">
diff --git a/apps/showcase/doc/forms/ImportDoc.vue b/apps/showcase/doc/forms/ImportDoc.vue
index e6b51a67a..df0f7990d 100644
--- a/apps/showcase/doc/forms/ImportDoc.vue
+++ b/apps/showcase/doc/forms/ImportDoc.vue
@@ -1,5 +1,7 @@
 <template>
-    <DocSectionText v-bind="$attrs" />
+    <DocSectionText v-bind="$attrs">
+        <p>The form component is responsible for managing the form state and must encapsulate the form fields.</p>
+    </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
@@ -9,7 +11,7 @@ export default {
         return {
             code: {
                 basic: `
-import Form from '@primevue/form';
+import Form from '@primevue/forms';
 `
             }
         };
diff --git a/apps/showcase/doc/forms/ResolversDoc.vue b/apps/showcase/doc/forms/ResolversDoc.vue
index aaeee7961..135739196 100644
--- a/apps/showcase/doc/forms/ResolversDoc.vue
+++ b/apps/showcase/doc/forms/ResolversDoc.vue
@@ -1,40 +1,42 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            It can be integrated with with schema libraries such as <a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>,
-            <a href="https://docs.superstructjs.org/">Superstruct</a> or custom validation logic is possible using <i>resolver</i> property, with available resolvers from <i>@primevue/form/resolvers</i> for each schema.
+            Validations are implemented the with <i>resolver</i> property. A custom resolver is responsible for handling the validation and returning an <i>errors</i> object with key-value pairs where key is the form field name and value is an array
+            of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including
+            <a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>, and <a href="https://docs.superstructjs.org/">Superstruct</a> that can
+            be be imported from <i>@primevue/form/resolvers</i> path.
         </p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-5">
         <Fieldset legend="Schema">
             <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="zod" value="Zod" />
-                    <label for="zod" class="ml-2">Zod</label>
+                    <label for="zod">Zod</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="yup" value="Yup" />
-                    <label for="yup" class="ml-2">Yup</label>
+                    <label for="yup">Yup</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="valibot" value="Valibot" />
-                    <label for="valibot" class="ml-2">Valibot</label>
+                    <label for="valibot">Valibot</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="superStruct" value="SuperStruct" />
-                    <label for="superStruct" class="ml-2">SuperStruct</label>
+                    <label for="superStruct">SuperStruct</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="custom" value="Custom" />
-                    <label for="custom" class="ml-2">Custom</label>
+                    <label for="custom">Custom</label>
                 </div>
             </RadioButtonGroup>
         </Fieldset>
 
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -63,10 +65,10 @@ export default {
             ),
             code: {
                 basic: `
-<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-2">
+<Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-1">
         <InputText name="username" type="text" placeholder="Username" fluid />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -78,33 +80,33 @@ export default {
 
         <Fieldset legend="Schema">
             <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="zod" value="Zod" />
-                    <label for="zod" class="ml-2">Zod</label>
+                    <label for="zod">Zod</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="yup" value="Yup" />
-                    <label for="yup" class="ml-2">Yup</label>
+                    <label for="yup">Yup</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="valibot" value="Valibot" />
-                    <label for="valibot" class="ml-2">Valibot</label>
+                    <label for="valibot">Valibot</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="superStruct" value="SuperStruct" />
-                    <label for="superStruct" class="ml-2">SuperStruct</label>
+                    <label for="superStruct">SuperStruct</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="custom" value="Custom" />
-                    <label for="custom" class="ml-2">Custom</label>
+                    <label for="custom">Custom</label>
                 </div>
             </RadioButtonGroup>
         </Fieldset>
 
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -188,33 +190,33 @@ export default {
 
         <Fieldset legend="Schema">
             <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="zod" value="Zod" />
-                    <label for="zod" class="ml-2">Zod</label>
+                    <label for="zod">Zod</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="yup" value="Yup" />
-                    <label for="yup" class="ml-2">Yup</label>
+                    <label for="yup">Yup</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="valibot" value="Valibot" />
-                    <label for="valibot" class="ml-2">Valibot</label>
+                    <label for="valibot">Valibot</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="superStruct" value="SuperStruct" />
-                    <label for="superStruct" class="ml-2">SuperStruct</label>
+                    <label for="superStruct">SuperStruct</label>
                 </div>
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="custom" value="Custom" />
-                    <label for="custom" class="ml-2">Custom</label>
+                    <label for="custom">Custom</label>
                 </div>
             </RadioButtonGroup>
         </Fieldset>
 
-        <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
diff --git a/apps/showcase/doc/forms/StatesDoc.vue b/apps/showcase/doc/forms/StatesDoc.vue
index ba4d78720..734e27a6b 100644
--- a/apps/showcase/doc/forms/StatesDoc.vue
+++ b/apps/showcase/doc/forms/StatesDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Form uses the <i>name</i> property to create a state object for tracking values, errors, and actions.</p>
+        <p>The <i>$form</i> object tracks the state management of the fields. Each field is linked with the <i>name</i> property. View the <i>FormFieldState</i> type in the API documentation for details about each property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
@@ -8,7 +8,7 @@
                 <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
                 <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
             </div>
-            <Fieldset legend="Form States">
+            <Fieldset legend="Form States" class="h-80 overflow-auto">
                 <pre class="whitespace-pre-wrap">{{ $form }}</pre>
             </Fieldset>
         </Form>
@@ -30,7 +30,7 @@ export default {
         <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
         <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
     </div>
-    <Fieldset legend="Form States">
+    <Fieldset legend="Form States" class="h-80 overflow-auto">
         <pre class="whitespace-pre-wrap">{{ $form }}</pre>
     </Fieldset>
 </Form>
@@ -45,7 +45,7 @@ export default {
                 <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
                 <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
             </div>
-            <Fieldset legend="Form States">
+            <Fieldset legend="Form States" class="h-80 overflow-auto">
                 <pre class="whitespace-pre-wrap">{{ $form }}</pre>
             </Fieldset>
         </Form>
@@ -96,7 +96,7 @@ export default {
                 <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
                 <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
             </div>
-            <Fieldset legend="Form States">
+            <Fieldset legend="Form States" class="h-80 overflow-auto">
                 <pre class="whitespace-pre-wrap">{{ $form }}</pre>
             </Fieldset>
         </Form>
diff --git a/apps/showcase/doc/forms/SubmitDoc.vue b/apps/showcase/doc/forms/SubmitDoc.vue
index 7a4a817b8..0a9790e7c 100644
--- a/apps/showcase/doc/forms/SubmitDoc.vue
+++ b/apps/showcase/doc/forms/SubmitDoc.vue
@@ -1,18 +1,21 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>submit</i> callback provides an object containing the form's validity, all errors, and current states. This offers access to the form values as well as validation status and any existing errors during submission.</p>
+        <p>
+            The <i>submit</i> callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission.
+            View the <i>FormSubmitEvent</i> in the API documentation for more information about the available event data.
+        </p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
-                <Message v-if="$form.password?.invalid" severity="error">
-                    <ul class="mx-1 px-3">
-                        <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
+                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+                    <ul class="my-0 px-4 flex flex-col gap-1">
+                        <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
                     </ul>
                 </Message>
             </div>
diff --git a/apps/showcase/doc/forms/ValidateOnDoc.vue b/apps/showcase/doc/forms/ValidateOnDoc.vue
index f48e52287..28eb5d5bb 100644
--- a/apps/showcase/doc/forms/ValidateOnDoc.vue
+++ b/apps/showcase/doc/forms/ValidateOnDoc.vue
@@ -1,23 +1,24 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission, with options to apply this behavior globally or to specific fields via <i>validateOnValueUpdate</i>,
-            <i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i>, which can also be set in PrimeVue components using <i>formControl</i> property.
+            Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission. These behaviors can be configured at form level or on specific fields via the
+            <i>validateOnValueUpdate</i>, <i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i> options of the <i>formControl</i> property.
         </p>
+        <p>In this example, form disables <i>validateOnValueUpdate</i> and enables <i>validateOnBlur</i> at form level, and validates <b>firstName</b> on mount. The <i>firstName</i> field, overrides the form level setting locally.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
-                <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
+                <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="surname" type="text" placeholder="Surname" fluid />
-                <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="lastName" type="text" placeholder="Last Name" fluid />
+                <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -31,23 +32,23 @@ export default {
         return {
             initialValues: {
                 username: '',
-                name: '',
-                surname: ''
+                firstName: '',
+                lastName: ''
             },
             code: {
                 basic: `
-<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-    <div class="flex flex-col gap-2">
+<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+    <div class="flex flex-col gap-1">
         <InputText name="username" type="text" placeholder="Username" fluid />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
     </div>
-    <div class="flex flex-col gap-2">
-        <InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
-        <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
+        <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
     </div>
-    <div class="flex flex-col gap-2">
-        <InputText name="surname" type="text" placeholder="Surname" fluid />
-        <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
+    <div class="flex flex-col gap-1">
+        <InputText name="lastName" type="text" placeholder="Last Name" fluid />
+        <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -57,18 +58,18 @@ export default {
     <div class="card flex justify-center">
         <Toast />
 
-        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }"/>
-                <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
+                <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="surname" type="text" placeholder="Surname" fluid />
-                <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="lastName" type="text" placeholder="Last Name" fluid />
+                <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -81,8 +82,8 @@ export default {
         return {
             initialValues: {
                 username: '',
-                name: '',
-                surname: ''
+                firstName: '',
+                lastName: ''
             }
         };
     },
@@ -94,12 +95,12 @@ export default {
                 errors.username = [{ message: 'Username is required.' }];
             }
 
-            if (!values.name) {
-                errors.name = [{ message: 'Name is required.' }];
+            if (!values.firstName) {
+                errors.firstName = [{ message: 'First name is required.' }];
             }
 
-            if (!values.surname) {
-                errors.surname = [{ message: 'Surname is required.' }];
+            if (!values.lastName) {
+                errors.lastName = [{ message: 'Last name is required.' }];
             }
 
             return {
@@ -120,18 +121,18 @@ export default {
     <div class="card flex justify-center">
         <Toast />
 
-        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
-            <div class="flex flex-col gap-2">
+        <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
-                <Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
+                <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
-                <InputText name="surname" type="text" placeholder="Surname" fluid />
-                <Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message>
+            <div class="flex flex-col gap-1">
+                <InputText name="lastName" type="text" placeholder="Last Name" fluid />
+                <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -146,8 +147,8 @@ const toast = useToast();
 
 const initialValues = ref({
     username: '',
-    name: '',
-    surname: ''
+    firstName: '',
+    lastName: ''
 });
 
 const resolver = ({ values }) => {
@@ -158,11 +159,11 @@ const resolver = ({ values }) => {
     }
 
     if (!values.name) {
-        errors.name = [{ message: 'Name is required.' }];
+        errors.firstName = [{ message: 'First name is required.' }];
     }
 
     if (!values.surname) {
-        errors.surname = [{ message: 'Surname is required.' }];
+        errors.lastName = [{ message: 'Last name is required.' }];
     }
 
     return {
@@ -188,12 +189,12 @@ const onFormSubmit = ({ valid }) => {
                 errors.username = [{ message: 'Username is required.' }];
             }
 
-            if (!values.name) {
-                errors.name = [{ message: 'Name is required.' }];
+            if (!values.firstName) {
+                errors.firstName = [{ message: 'First name is required.' }];
             }
 
-            if (!values.surname) {
-                errors.surname = [{ message: 'Surname is required.' }];
+            if (!values.lastName) {
+                errors.lastName = [{ message: 'Last name is required.' }];
             }
 
             return {
diff --git a/apps/showcase/doc/nuxt/DownloadDoc.vue b/apps/showcase/doc/nuxt/DownloadDoc.vue
index 353d90ed8..f76a98d24 100644
--- a/apps/showcase/doc/nuxt/DownloadDoc.vue
+++ b/apps/showcase/doc/nuxt/DownloadDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official
+            PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a> along with the official
             <a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/doc/vite/DownloadDoc.vue b/apps/showcase/doc/vite/DownloadDoc.vue
index e62e9dbd2..b59265dfe 100644
--- a/apps/showcase/doc/vite/DownloadDoc.vue
+++ b/apps/showcase/doc/vite/DownloadDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a>.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
diff --git a/apps/showcase/pages/forms/index.vue b/apps/showcase/pages/forms/index.vue
index 8d098c20d..39105976c 100644
--- a/apps/showcase/pages/forms/index.vue
+++ b/apps/showcase/pages/forms/index.vue
@@ -1,9 +1,10 @@
 <template>
-    <DocComponent title="Vue Form Component" header="Forms" description="Form provides validation functionality and manages form state." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Form Library" header="Forms" description="The PrimeVue Forms library provides comprehensive form state management with built-in validation support." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/forms/AccessibilityDoc.vue';
+import DownloadDoc from '@/doc/forms/DownloadDoc.vue';
 import BasicDoc from '@/doc/forms/BasicDoc.vue';
 import DynamicDoc from '@/doc/forms/DynamicDoc.vue';
 import ImportDoc from '@/doc/forms/ImportDoc.vue';
@@ -19,6 +20,11 @@ export default {
     data() {
         return {
             docs: [
+            {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
                 {
                     id: 'import',
                     label: 'Import',