Vuetify form inputs with icon check

The designer I work with made a form design, where each input field shows a green check icon when the data is correct, and a red close icon otherwise. The form now is a bit more interactive and more fun to complete! I really like it, and I want to share it with you so you could add it to your forms.

Vuetify’s v-text-field component has an attribute called append that (as the docs says) ‘Adds an item inside the input and after input content’. So this is what I need to use.

I also want to show a green icon if the input data is correct, and a different red icon if the input content is wrong. To do this, I’m going to use slots. The v-text-field component has many slots available, and there is one for appending icons called append. This is perfect because now I could add all the behavior I need to the appended icon. And this is it for the template.

Now I need a computed method that:

1. Returns no icon if the input field has no content.

2. Returns a check icon if the input data has only characters. The successField variable must be true, so the green icon will be active.

3. Return a close icon if the input content has numbers or special characters. The successField variable must be false, so the red icon will be active.

And that’s it!

Here is an example of a form using the check and the close icons: