Vuetify: [Enhancement] v-radio should be usable without v-radio-group

[nekosaur]

• What will it allow you to do that you can't do today?
  Now that vue supports optional injects we should be able to make v-radio work independently of v-radio-group, for situations like the following pen (courtesy of Kim on chat)

https://codepen.io/kimsanka/pen/yPLMdx?editors=1010

• How will it make current work-arounds straightforward?
  Remove the need to wrap v-radio in v-radio-group when it is not semantically correct

• What potential bugs and edge cases does it help to avoid?
  n/a

[capttrousers]

Yea I upgraded from 0.14 and this used to be possible, you didnt need to wrap v-radio with v-radio-group so this is actually a regression not an enhancement, although it's simple to workaround wrapping each individual v-radio with v-radio-group

[KaelWD]

I don't know about operating entirely without radio-group, but it works fine if you put the list inside one (apart from some small style issues): https://codepen.io/anon/pen/qYPaEM?editors=1010

[johnleider]

I've tested kael's implementation in v1.1 and made a few tweaks to ensure this looks correct and functions correctly. At this time I have no plans to decouple v-radio from v-radio-group. Here is an example for v1.1: https://codepen.io/johnjleider/pen/XqeVwo?editors=1010

[Paulsky]

It's fine if you wrap it up in, for example, a list. But what if you want to use a table? It's not valid HTML in my opinion:

<table>
    <tr>
        **<div class="v-input--radio-group__input">**
            <td>
                <input type="radio" value="1" name="radioGroup" /> Value 1
            </td>
            <td>
                <input type="radio" value="2" name="radioGroup" /> Value 2
            </td>
        **</div>**
    </tr>
</table>

[ShayanSolid]

It's fine if you wrap it up in, for example, a list. But what if you want to use a table? It's not valid HTML in my opinion:

<table>
    <tr>
        **<div class="v-input--radio-group__input">**
            <td>
                <input type="radio" value="1" name="radioGroup" /> Value 1
            </td>
            <td>
                <input type="radio" value="2" name="radioGroup" /> Value 2
            </td>
        **</div>**
    </tr>
</table>

Im also facing the same problem. I'd like to use radio buttons in my table to select individual row but it work.

[julien-ur]

Same problem here. No chance to get the radio buttons to work in a table.

In Bootstrap Vue the same problem was solved in the way that they automatically group radio buttons with the same name. Maybe this could be possible here to?

[SuperDJ]

The easiest way to use radio buttons in a table is to wrap the table in the <v-radio-group>