How does one add a class name to a v-text-fields label tag

0
votes

Vuetify has a v-text-field input which is basically combines an HTML form <input type=text...> with a <label> and packs it up in various nested <div> tags(https://vuetifyjs.com/en/components/text-fields/).

By default it has the label sharing the same space as where the value is entered. They developed a behavior so that when a user starts typing in the text field, the label floats above the text field.

There is a property called 'single-line' which prevents floating of the label. I want the opposite effect, where the label is always floating above the text field regardless of whether or not there is input. Is this possible to do?

When I inspect the HTML I notice that the label (when floating) has a class appended to it called 'v-label--active'. I am not sure how to attach that class name to the label since I don't have direct access to the label tag. Instead, I have a <v-text-field > HTML tag which auto generates the HTML <label> tag when compiled.

1
vuetify.js

1 Answers

1
votes

From what I've read in the documentation there does not seem to be an option for your desired behaviour.

However a work around could be as follows:

When the text field is focused this applies the v-label--active class on the label element as you mentioned. This class applies the css property transform: translateY(-18px) scale(.75).

With your own custom css/scss you can target the v-label class and apply the same transform: translateY(-18px) scale(.75) on it. This will generate your desired effect. When you focus on the input field the text will turn blue (or whatever active state colour you have set).

See example: https://codepen.io/jt-totty/pen/WNoKNmM