How to align the v-text-field label to the right?

Viewed 3308

Is it possible to align the Vuetify's text field's label to the right?

<v-text-field label="Align this label to the right"></v-text-field>
3 Answers

I think it will work for you.

<v-text-field label="Align this label to the right" reverse></v-text-field>

this might work with a custom class then in style:

.custom .v-label {
  right: 0 !important;
  text-align: end;
  left: 100px !important;
}

you need to overwrite left:0 with a fake value. I tested it with 100px and it looks fine.

v-spacer will push everything right. So you can do below by adding a label and text field separtely. Out of 12 grids first 9 are spaces before label.

<v-layout row>
  <v-spacer></v-spacer>
  <v-flex xs1>
    <v-subheader>Label value</v-subheader>
  </v-flex>
  <v-flex xs2>
    <v-text-field></v-text-field>
  </v-flex>
</v-layout>
Related