Deselect RadioGroup Item

[DPCamino]

I'd like to be able to deselect the Radio Group item option if already selected. Currently, onValueChange, as the name seems to imply, only runs if the value changes. 😄

I am able to easily add an onClick to each Item, for instance, that checks if the state value is equal to its choice value, and reset the state if true. It works. However, I'm unsure if that is the proper way to handle this.

Thanks!

[joaom00]

Radio group is designed to have at least one item checked. The native one works the same way. Maybe you want a checkbox? for checked/unchecked state?

[joaom00]

If it is inside a form, the radio group would be better instead of the toggle group.

I don't know if the current solution would be an anti-Radix pattern. I would say to keep it, if it's not breaking anything.

[benoitgrelard]

@SemperYak, @joaom00 is correct in that RadioGroup (and our components in general) is mirrorring the native counterpart which also doesn't allow deselecting.

If you go with the onClick method, I'd advise you would'd have to check the accessibility implications (if any).
Essentially, this is only relevant if the control is not "required" in your form, but that should be easily modelled with some kind of "none" default value. Alternatively, you could chose a different control like @joaom00 suggested, perhaps a Select?

[DPCamino]

Hi @benoitgrelard, thank you. This will essentially be replacing a 'Select' component (it was a dropdown). There are only 3 options so trying to make it more user friendly by using radio instead, but styled like buttons (similar to the ToggleGroup). You can deselect a ToggleGroup option but the RadioGroup is more appropriate for forms.

It might be an edge case, but these users can access historical records using this form where there is an undefined option (as requirements have changed), and I'd like to avoid having an 'N/A' among the 3 options. Yes, these fields are not always required (the rationale for allowing a non-selection).

I've read documentation suggesting an initial radio with all options unselected doesn't break accessibility rules, so I was thinking this would be a sort of 'reset' if a user inadvertently selects the option (If having an unselected radio group initially doesn't break any rules, why would bringing it back to it's initial state break a rule - not looking for you to challenge any conventions here 😄 , just musing if there is perhaps legacy thought that needs to be updated).

It's an edge case. Most times the user will ignore this field or select one of the available options and move on.

I also wasn't sure if having an onClick listener on the RadioGroup.Item will interfere or conflict with the current onChangeValue. Ultimately I will need to make a compromise.

[benoitgrelard]

Yeah definitely an edge case, but still I feel like rather than allowing deselection it's much clearer to be upfront, something like:

Historical records

• All time
• Past month
• Past quarter
• Past year

[DPCamino]

I hear you. I think when presented as a traditional looking radio, having a 'None of the above' or 'N/A' etc is fine. I suppose the issue is when you get 'pretty' as we current do, having radios look like buttons, having another button for N/A for each radio group seems unnecessary if the behaviour now mirrors a ToggleGroup - know what I mean?

In any event, thank you for entertaining the rabbit hole in my brain. 😄