How to disable animation of label in v-text-field

Question

How can I disable animation of the label in v-text-field. Seems that's 2 different <label> animated with style so no

.v-input *{
  transition: none !important;
  animation: none !important;
}

works.

Any prop or theme configuration?

A more broad request: how to disable all vuetify's animations globally?

Answer 1

If you use the persistent-placeholder prop (even without a placeholder) it removes the animation of the label.

<v-text-field
  hide-details="auto"
  label="First name"
  persistent-placeholder
></v-text-field>

Example: codepen

Docs: https://vuetifyjs.com/en/components/text-fields/#placeholders