message: docs: added custom labels example for yup
diff: @@ -342,3 +342,34 @@ export default {
  ```
  The `<ErrorMessage />` component is very flexible and you can customize its render output with scoped slots to build complex messages markup, read the [ErrorMessage API reference](../api/error-message) for more information.
  +
  +### Custom Field Labels
  +
  +More often than not, your fields will have names with underscores or shorthands which isn't very nice when showing in error messages, for example you might have specific encoding to your field names because they might be generated by backend. Ideally you want to avoid having messages like:
  +
  +```
  +The down_p is required
  +```
  +
  +And instead show something more meaningful to the user
  +
  +```
  +The down payment is required
  +```
  +
  +You can do this in two ways depending on which validators you are using (yup or [global validators](../guide/global-validators)).
  +
  +#### Custom Labels with Yup
  +
  +With yup it is very straightforward, you just need to call `label()` after defining your field's validations either in field level or form level:
  +
  +```js
  +const schema = Yup.object().shape({
  + email_addr: Yup.string().email().required().label('Email Address'),
  + acc_pazzword: Yup.string().min(5).required().label('Your Password'),
  +});
  +```
  +
  +Here is a live example:
  +
  +<code-sandbox id="vee-validate-v4-custom-field-labels-with-yup-qikju" title="Custom Labels with yup"></code-sandbox>
  