diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index 631fb0b384..b4891f7253 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -200,6 +200,7 @@ defineExpose({
           :name="field.name"
           :size="field.size"
           :required="field.required"
+          :error="field.error"
         >
           <slot :name="`${field.name}-field`" v-bind="{ state, field }">
             <UCheckbox
diff --git a/test/components/AuthForm.spec.ts b/test/components/AuthForm.spec.ts
index 2192a6e181..b77a7697ff 100644
--- a/test/components/AuthForm.spec.ts
+++ b/test/components/AuthForm.spec.ts
@@ -7,7 +7,8 @@ describe('AuthForm', () => {
   const fields = [{
     name: 'email',
     label: 'Email',
-    type: 'text' as const
+    type: 'text' as const,
+    error: 'Invalid email format'
   }, {
     name: 'password',
     label: 'Password',
diff --git a/test/components/__snapshots__/AuthForm.spec.ts.snap b/test/components/__snapshots__/AuthForm.spec.ts.snap
index 76858aa9e6..28e88d09d0 100644
--- a/test/components/__snapshots__/AuthForm.spec.ts.snap
+++ b/test/components/__snapshots__/AuthForm.spec.ts.snap
@@ -15,11 +15,11 @@ exports[`AuthForm > renders with as correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -63,11 +63,11 @@ exports[`AuthForm > renders with class correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -115,11 +115,11 @@ exports[`AuthForm > renders with description correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -167,11 +167,11 @@ exports[`AuthForm > renders with description slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -215,11 +215,11 @@ exports[`AuthForm > renders with disabled correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" disabled="" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" disabled="" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -263,11 +263,11 @@ exports[`AuthForm > renders with fields correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -311,11 +311,11 @@ exports[`AuthForm > renders with footer slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -359,11 +359,11 @@ exports[`AuthForm > renders with header slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -411,11 +411,11 @@ exports[`AuthForm > renders with icon correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -459,11 +459,11 @@ exports[`AuthForm > renders with leading slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -507,11 +507,11 @@ exports[`AuthForm > renders with loading correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -560,11 +560,11 @@ exports[`AuthForm > renders with providers correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -608,11 +608,11 @@ exports[`AuthForm > renders with providers slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -656,11 +656,11 @@ exports[`AuthForm > renders with separator correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -704,11 +704,11 @@ exports[`AuthForm > renders with submit correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -752,11 +752,11 @@ exports[`AuthForm > renders with submit slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -801,11 +801,11 @@ exports[`AuthForm > renders with title correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -853,11 +853,11 @@ exports[`AuthForm > renders with title slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -901,11 +901,11 @@ exports[`AuthForm > renders with ui correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">
@@ -949,11 +949,11 @@ exports[`AuthForm > renders with validation slot correctly 1`] = `
           <!--v-if-->
         </div>
         <div class="mt-1 relative">
-          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+          <div class="relative inline-flex items-center w-full"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error ring ring-inset ring-error" autocomplete="off" error="Invalid email format" aria-invalid="true" aria-describedby="v-0-0-1-error">
             <!--v-if-->
             <!--v-if-->
           </div>
-          <!--v-if-->
+          <div id="v-0-0-1-error" class="mt-2 text-error">Invalid email format</div>
         </div>
       </div>
       <div class="text-sm">