移动单选按钮的标签以放置在单选按钮上方

Question

So I have a radiobutton with a label. The problem is that the label and buttons are in the same line (row). I want my buttons to be underneath the label! Here is my code:

<v-radio-group row v-model="voltage" @click="consoles" label="SELECT 
VOLTAGE:">
              <v-radio
                v-for="n in radioNames"
                :key="n"
                :label="n"
                :value="n"
              ></v-radio>
              </v-radio-group>
              <v-radio-group row v-model="dependency">

It currently lookslike this:

As you can see the label and buttons are in the same line. How do I move to label to be above the buttons (top left. Like "S" should be placed exactly on top of the left button)?

Answer 1

Using p for label

As far as I can see from Vuetify API there is no option to set the label as column and the v-radio as row. A simple solution would be add the label as a separate element from the v-radio-group :

<p>SELECT VOLTAGE:</p>
<v-radio-group row v-model="voltage" @click="consoles">
  <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-radio-group>

Using v-layout

Based on @SnakeyHips answer there is a simple way to set the v-radio elements in a row. Use a <v-layout align-start row> to wrap only the radio buttons in a row:

<v-radio-group label="SELECT VOLTAGE:" v-model="row">
  <v-layout align-start row>
   <v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
  </v-layout>
</v-radio-group>

Here is an example of both solutions.

Answer 2

If you want the labels of each radio button to be above the button then you could handle all the layout manually yourself without the v-for loop like so:

<v-radio-group v-model="radioGroup">
  <v-layout row wrap>
  <v-flex column>
    <p>Label 1</p>
    <v-radio key=1 value=1>
      </v-radio>
    </v-flex>
  <v-flex column>
    <p>Label 2</p>
    <v-radio key=2 value=2>
      </v-radio>
    </v-flex>
  <v-flex column>
    <p>Label 3</p>
    <v-radio key=3 value=3>
      </v-radio>
    </v-flex>
  </v-layout>
</v-radio-group>

Answer 3

Currently, v-radio-group in row mode is a flexbox. So you can give the legend element a width of 100% and this will force a line break. eg

.v-input--radio-group__input legend{
  width: 100%
}