question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:5
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

9reactions
AledGBeso1Dedcommented, Jun 5, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to deselect a radio button when I select another radio ...
I'm in Figma creating a variant component for a radio-button that asks a user to choose only 1 type of fruit between “Apple”, ......
Read more >
Radio button component — Vuetify
The v-radio component is a simple radio button. When combined with the v-radio-group component you can provide groupable functionality to ...
Read more >
Check box v radio button: when to use which in UI design
Checkbox vs radio button - ever wondered what the difference is? Read our complete guide and design them right every time. Get started...
Read more >
How to deselect a radio button answer option in web form?
I was just here looking to see if this functionality was available and it looks like this is still not an option. The...
Read more >
JavaScript packages index - Page 3461 | Snyk Advisor - Snyk
... vrac · vractal-react-animated-transitions · v-radiobutton · v-radio-checkbox · v-radio-deselectable · vrandom · v-random-number · v-range-component ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found