Vuetify - How to do label text left and text field right on form

Question

I want to left label and right text field in vuetify.

In vuetify homepage usage, it's label and text field form is not my requirement.

<v-text-field
    v-model="firstname"
    label="First name">
</v-text-field>

I want the left label and right text field on form in vuetify.

Answer 1

How about using v-subheader? As there is no such prop that you can set the textfield label out of the textfield container and align to left side.

  <v-layout row>
    <v-flex xs1>
      <v-subheader>Label here</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
  </v-layout>

Codepen link here.

Answer 2

Since I cant comment because I have no enough reputation. You can horizontal align by adding class="my-4" in your v-subheader. the greater the number the lower the label

I used Riddhi sample below:

<v-layout row>
    <v-flex xs1>
      <v-subheader class="my-4">Label</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
 </v-layout>

Answer 3

vuetify version 2.5.8

<v-row dense>
  <v-col cols="12" md="2">
    <v-list-item-content>Label</v-list-item-content>
  </v-col>
  <v-col cols="12" md="10">
    <v-text-field dense clearable></v-text-field>
  </v-col>
</v-row>