Search code examples
vue.jsvuetify.jstextfield

Can I change Vuetify's outlined textfield label position and line interval?

I'm using Vuetify trying to approach this textfield style. I'm using outlined textfield provided them with a simple custom style, but I can't change its label position. Is there any way I could change the label position and the "interval" where the line starts and ends?

I was trying searching in their documentation and found this session, but no luck while changing $text-field-outlined-label-position-x or $text-field-outlined-label-position-y.

edit: this is the best I could reach, which is actually the default outlined textfield with rounded borders.

Thanks in advance!

Solution

  • Try <v-text rounded=rounded-lg> <v-text/>