feat(FormField): wrap error with Presence to be animated

docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const form = useTemplateRef('form')
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ name: 'email', message: 'Required' })
+  if (!state.password) errors.push({ name: 'password', message: 'Required' })
+  return errors
+}
+</script>
+
+<template>
+  <UForm ref="form" :validate="validate" :state="state" class="space-y-4">
+    <UFormField
+      label="Email"
+      name="email"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField
+      label="Password"
+      name="password"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <div class="flex gap-2">
+      <UButton label="Submit" type="submit" color="neutral" />
+
+      <UButton label="Clear" color="neutral" variant="outline" @click="form?.clear()" />
+    </div>
+  </UForm>
+</template>

docs/content/3.components/form-field.md

@@ -170,6 +170,36 @@ slots:
 :u-input{placeholder="Enter your email" class="w-full"}
 ::
 
+## Examples
+
+### With error animation
+
+You can animate the `error` slot by using the `ui` prop.
+
+::component-example
+---
+collapse: true
+name: 'form-field-error-animation-example'
+---
+::
+
+::tip
+You can also configure this globally in your `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  ui: {
+    formField: {
+      slots: {
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }
+    }
+  }
+})
+```
+
+::
+
 ## API
 
 ### Props

src/runtime/components/FormField.vue

@@ -48,7 +48,7 @@ export interface FormFieldSlots {
 
 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
-import { Primitive, Label } from 'reka-ui'
+import { Primitive, Presence, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
@@ -68,6 +68,8 @@ const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
 const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
 
+const hasError = computed(() => !!(typeof error.value === 'string' && error.value) || !!slots.error)
+
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
 // This is required for the RadioGroup component which unsets the id value.
@@ -115,12 +117,15 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <Presence v-slot="{ present }" :present="hasError">
+        <div :id="`${ariaId}-error`" :data-state="present ? 'open' : 'closed'" :class="ui.error({ class: props.ui?.error })">
           <slot name="error" :error="error">
             {{ error }}
           </slot>
         </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      </Presence>
+
+      <div v-if="!hasError && (help || !!slots.help)" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

test/components/__snapshots__/Form-vue.spec.ts.snap

@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>

test/components/__snapshots__/Form.spec.ts.snap

@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
+      <!---->
       <!--v-if-->
     </div>
   </div>

test/components/__snapshots__/FormField-vue.spec.ts.snap

@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">Default slot
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Description slot</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
+    <!--v-if-->
   </div>
 </div>"
 `;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
+    <!--v-if-->
   </div>
 </div>"
 `;
@@ -79,6 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <div class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <div class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"

test/components/__snapshots__/FormField.spec.ts.snap

@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">Default slot
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Description slot</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
+    <!--v-if-->
   </div>
 </div>"
 `;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
+    <!--v-if-->
   </div>
 </div>"
 `;
@@ -79,6 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <div class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <div class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
     <p id="v-0-0-description" class="text-muted">Enter your username</p>
   </div>
   <div class="mt-1 relative">
+    <!---->
     <!--v-if-->
   </div>
 </div>"
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
+    <!---->
     <!--v-if-->
   </div>
 </div>"