Vuetify: asterix on required labels

Question

The latest version of Vuetify (v1.3 - https://libupdate.com/libs/38f99a55-a650-4d67-8e60-cd3c2737d043).

The asterix is now removed from the label even if the v-textarea/v-text-field has the required prop. They want you to add it manually in the label prop e.g. label="Message*"

Although in my application there is too many forms to change and was wondering if it can be selected via CSS, although the structure of the HTML is problematic.

     <div class="v-text-field__slot">
       <label class="v-label theme--light">Message</label>
       <textarea name="message" required="required" rows="5"></textarea>
     </div>

Any help in selecting the label if its before the required input would be greatly appreciated

Pathum Kalhan Pathum Kalhan · Accepted Answer · 2018-11-12T09:31:51

I'm not sure whether this work for you or not with your HTML structure. But this worked for me

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

Then I normally called this class in my text field.

<v-textfield class="required">

Vuetify: asterix on required labels

1 Answers