CODEWITHSUNDEEP
formsvuejs2vuetify.js
Paul Go
Paul Go

Reputation: 69

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

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.

Upvotes: 3

Views: 14909

Answers (4)

Ash
Ash

Reputation: 149

Vuetify has been updated since, and the v-flex answer doesn't work under the new grid system. The Cols method will work but it's difficult to align the labels with the fields and make it look good.

I've achieved the result I wanted by doing the following.

Use the 'prepend' slot:

<v-text-field
  class="my-text-field"
  solo
  dense
  v-model="actor.name"
>
  <template v-slot:prepend>
    <div class="body-2">Display Name</div>
  </template>
</v-text-field>

Use CSS to make a class of .my-text-field

.my-text-field .v-input__prepend-outer {
  min-width: 140px; /* Change the width to your desired value */
}

Upvotes: 0

MrMonkey
MrMonkey

Reputation: 97

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>

Upvotes: 0

Orlando Jr. Sarceda
Orlando Jr. Sarceda

Reputation: 11

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>

Upvotes: 0

Riddhi
Riddhi

Reputation: 2244

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.

Upvotes: 3

Related Questions