[Bug Report] Outlined text field in radio-group's label slot does not align correct

[mseele]

Environment

Vuetify Version: 2.1.12
Vue Version: 2.6.10
Browsers: Chrome 78.0.3904.108
OS: Windows 10

Steps to reproduce

Having a v-textfield with style outlined inside a radio group does not look correct.

Expected Behavior

textfield and label should be aligned correct

Actual Behavior

Having a v-textfield with style outlined inside a radio group does not look correct.
If textfield is inside radio v-slot:label, the whole textfield and the label is to high.
If textfield just comes after radio, only label is rendered to high.

v-textfield without style outlined looks correct

Reproduction Link

https://codepen.io/mseele/pen/wvBBvgZ

[dalholm]

@mseele
I had the same issue, but i find o good solution in the docs.

<v-card-text>
      <v-row align="center">
        <v-radio value="answer_a" hide-details class="shrink mr-2 mt-0"></v-radio>
        <v-text-field label="Include files"></v-text-field>
      </v-row>
</v-card-text>

Look here: https://vuetifyjs.com/en/components/selection-controls#checkboxes-inline-with-a-textfield

[jacekkarczmarczyk]

First issue (input not in label slot) was fixed in 2.2.2, but when the input is placed in the label slot it changed a bit:
https://codepen.io/jkarczm/pen/NWPMgOP

[johnleider]

The label alignment issues have been resolved. In regards to the margin under the radio in the custom row implementation, just apply the mb-0 class: https://codepen.io/johnjleider/pen/VwYNrwM

If you have any additional questions, please reach out to us in our Discord community.

[jacekkarczmarczyk]

For https://codepen.io/jkarczm/pen/NWPMgOP see #10360 (workaround may not work though, needs to be more specific to not affect text-field's label)

[carlosbertarinijr]

Try this:
.v-input--selection-controls.v-input .v-label { top: 'your heigth' !important; }