Probably final version of FloatInputTextField

components/FloatInputTextField.vue

@@ -30,9 +30,9 @@ const {
   value: inputValue,
   errorMessage,
   handleBlur,
-  handleChange,
+  meta
 } = useField(name, undefined, {
-  initialValue: props.value,
+  initialValue: props.value
 });
 
 const invalid = computed(() => errorMessage.value ? true : undefined);
@@ -42,13 +42,13 @@ const invalid = computed(() => errorMessage.value ? true : undefined);
   <div class="grid grid-cols-1 gap-2">
     <FloatLabel variant="on">
       <InputText
-        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur" @input="handleChange"
+        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur"
       />
       <label :for="id">
         {{ label }}
       </label>
     </FloatLabel>
-    <Message v-if="errorMessage" class="text-wrap">{{ errorMessage }}</Message>
+    <Message v-if="errorMessage && meta.touched" class="text-wrap">{{ errorMessage }}</Message>
   </div>
 </template>
 

pages/login.vue

@@ -4,7 +4,7 @@ import * as zod from 'zod';
 
 const zodSchema = zod.object({
   username: zod.string().min(1, { message: 'This is required' }),
-  password: zod.string().min(3),
+  password: zod.string().min(3, { message: 'Password is required longer than 3' }),
 });
 const schema = toTypedSchema(zodSchema);