Custom field label ignored in errors

[alexcroox]

What happened?

Setting a custom label in Field doesn't propagate to errors

Reproduction steps

<script setup lang="ts">
const { t } = useI18n()

const props = defineProps({
  label: {
    type: String,
    default: null
  },

  name: {
    type: String,
    required: true
  },

  hasMargin: {
    type: Boolean,
    default: true
  }
})

// Use the prop label or the translated version of the field name
const label = props.label || t(props.name)
</script>

<template>
  <VeeField
    v-slot="{ field, errorMessage }"
    :label="label"
    :name="props.name"
    as="div"
  >
    <label :for="props.name">{{ label }}</label>

    <slot :field="field" />

    <p v-if="errorMessage">{{ errorMessage }}</p>
  </VeeField>
</template>

I'm still seeing "firstName is a required field" instead of "First Name" which is the value of label

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

d

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[logaretm]

Which rules or schema are you using? If Yup/Zod/Valibot then these do not support the label prop as it is only for the global validators.

Can you add an example please?

[alexcroox]

OK thanks for the clarification, can I send a PR for an update to the docs to make it super clear label doesn't work if you are using Yup because that was a big footgun for me as the API doesn't mention that:

https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx#L377-L387