diff --git a/apps/showcase/doc/autocomplete/FormDoc.vue b/apps/showcase/doc/autocomplete/FormDoc.vue
index 4cb82ddef..c47c3004e 100644
--- a/apps/showcase/doc/autocomplete/FormDoc.vue
+++ b/apps/showcase/doc/autocomplete/FormDoc.vue
@@ -3,9 +3,9 @@
         <p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
+        <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">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
                 <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
@@ -29,9 +29,12 @@ export default {
             filteredCountries: null,
             resolver: zodResolver(
                 z.object({
-                    country: z.object({
-                        name: z.string().min(1, 'Country cannot be empty.')
-                    })
+                    country: z.union([
+                        z.object({
+                            name: z.string().min(1, 'Country required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'Country required.' })
+                    ])
                 })
             ),
             code: {
@@ -73,9 +76,12 @@ export default {
             filteredCountries: null,
             resolver: zodResolver(
                 z.object({
-                    country: z.object({
-                        name: z.string().min(1, 'Country cannot be empty.')
-                    })
+                    country: z.union([
+                        z.object({
+                            name: z.string().min(1, 'Country required.')
+                        }),
+                        z.any().refine((val) => false, { message: 'Country required.' })
+                    ])
                 })
             )
         }
@@ -136,9 +142,12 @@ const initialValues = ref({
 const resolver = ref(
 zodResolver(
     z.object({
-        country: z.object({
-            name: z.string().min(1, 'Country cannot be empty.')
-        })
+        country: z.union([
+            z.object({
+                name: z.string().min(1, 'Country required.')
+            }),
+            z.any().refine((val) => false, { message: 'Country required.' })
+        ])
     })
 ));
 const countries = ref();