Vuetify how to mark field as required

Question

When we try to fill forms in the internet, required fields are marked using a red color ' * ' mark to indicate that the field is a must.

Like that is there a way to indicate users to required fields in vuetify.js?

Answer 1

It's a bit of a pain, but there is a 'label' named slot and you can do something like this:

<v-text-field
    v-model="loginInfo.email"
    autofocus
    name="email"
    type="email">
  <template #label>
    <span class="red--text"><strong>* </strong></span>Email
  </template>
</v-text-field>

Answer 2

From v1.1.0 docs:

The required prop no longer explicitly adds an asterisk to the label. All of its functionality to validation was removed for v1.0.

So apparently nothing will set it as required anymore, we have to add it manually in the label:

label="Name*"

---

Or you could use CSS:

.required label::after {
    content: "*";
}

Tho you must add required class manually (name of the class is arbitrary of course).