[Feature Request] Accessible Error-State for input field (v-text-field, v-autocomplete, v-select, etc.)

[Kuro-dev]

Problem to solve

In the application we are developing we want to give these fields a different background color depending on their state. If they have valid input we give them a colour, but if a validation rule fails and it goes into error state we want to give it a different colour. In vue 2 we used a workaround like this:

<template>
<v-text-field ref="field"/>
</template>
<script setup lang="ts">
const field = ref(null)
const hasErrors = computed(() => !!field.value && field.value.hasError && field.value.hasMessages)
</script>

This was rather unorthodox too, but it worked. After migrating to Vuetify3 it unfortunately broke but we were unable to find a replacement.

Proposed solution

There are multiple solutions we could think of:

1. An event that is emitted when the state changes
2. v-model support for the error-messages prop
3. an exposed (computed) field that could be accessed from a template-ref

[websitevirtuoso]

In vue 3 we have next option to set ref to html

<template>
<input
        ref="input"
        type="file"
        accept="image/*"
        class="d-none"
        data-test="user.avatar.input"
        @change="addInputImage"
      />
</template>

<script setup lang="ts">
const input = ref<HTMLInputElement>()

const addInputImage = () => {
  // @ts-expect-error we know it cant be null or undefined
  file.value = input.value.files[0] as File | Blob
  showEditor.value = true
  setValue(file.value)
  clearAvatar(false)
}
</script>

If you could provide example in sandbox or somewhere else. I could try to help you

[websitevirtuoso]

As alternative option you could try to implement next lib for validation forms or form fields

https://vee-validate.logaretm.com/v4/examples/ui-libraries/