Vuetify: [Feature Request] Deselectable v-radio component (radio buttons)

[madarche]

Hello all,

What problem does this feature solve?

Presently, once selected, a v-radio component cannot be deselected when clicked again. This behavior is the classical behavior of the HTML radio buttons.

The proposed feature is to add a property to make it possible to deselect a selected v-radio when clicked again.

The proposed feature is not what web users used to HTML radio buttons expect, but it adds a very neat addition, making UI really more sleek and powerful in some situations. The pros and cons of this feature are discussed over and over again: https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs. So the aim of this feature is not to try to convince people to use this feature, but rather to make it possible to use it if it is needed for some usecases.

Our usecase is building sleek surveys where people can easily reset/erase their answers, and that is deselect mutually exclusive options. We already have this HTML component in our old in-house UI library, but as we are switching to Vuetify we would love to have this feature available by default in Vuetify.

If you agree to this feature request we could provide a PR adding this feature. If you don't agree we would create a custom component on our own, but that would be sad.

What is your proposed solution?

Our proposed solution is to provide a new deselectable property to v-radio-group, of course false by default.

This new property will play well with the already existing mandatory v-radio-group property.

[johnleider]

I think this probably belongs in userland. It differs from the definition of a radio and is very easy to implement: https://codepen.io/johnjleider/pen/RBKgwd

[madarche]

Thanks for your very fast answer @johnleider!

But allow me to object: the proposed userland solution doesn't scale at all. We have this survey application of ours, which is a form generator, which creates form fields programmatically. It programmatically instantiates vuetify components and sets their properties. The userland proposition is not (cleanly) possible in this case.

Moreover the proposed solution doesn't deselect the concerned radio when its corresponding label is clicked.

Considering this information, could you reconsider your decision to close this feature request? (and again we would propose the PR)

Thanks!

[johnleider]

Let's see what @vuetifyjs/dev-team thinks.

[madarche]

Thanks a lot!

[nekosaur]

The label bug can be fixed by using @mouseup.native.

I can think of arguments both for and against adding a new prop, but on the whole I would advocate not ballooning our already pretty huge APIs with more props. At least not until there are enough voices with enough use-cases.

So I think for now a userland wrapped checkbox component could be enough?

[madarche]

@nekosaur thanks for the @mouseup.native solution! It indeed works fine :smiley:

And yes, if you actually are not interested in this feature, a userland wrapped checkbox component is what we will be doing.

Whatever the outcome of this, thanks all for your time and attention.

[madarche]

Hello all,

Based on your very helpful comments, here is published the v-radio-deselectable component, which is, as discussed, a wrapped v-radio component.

We still think that having the deselectable property on the v-radio-group would be a better solution, more practical, more powerful and easier to use for everyone.

Please everyone interested, could you read the v-radio-deselectable code and tell us if it can be improved?

[johnleider]

This can now be accomplished with v-item-group in v1.3

[kanteankit]

@johnleider Can you provide an example of how to accomplish this with v-item-group?
I came up with this,but, it is not working: https://codepen.io/anon/pen/yRxpyd

[johnleider]

https://codepen.io/johnjleider/pen/GYeMPx?editors=1111

[AledGBeso1Ded]

@johnleider How can you select the correct radio if we need to take his status (checked or unchecked)