RadioGroup unselectable flag ignored?

[MartinSeeler]

Hi, I was trying to use the RadioGroup with the unselectable="on" parameter. I am trying to deselect an option after I selected it, but it seems to be ignored. Also, placing this property on other elements, e.g. RadioGroup.Option does not change anything.

Am I holding it wrong? Thanks in advance <3

[RobinMalfait]

Hey!

There is no unselectable prop/flag. You can use the disabled prop on the RadioGroup.Option instead.

[MartinSeeler]

I'm not quite sure how disabled would remove the current selection? I want to click on a radio element (which is active) to deselect it. Wouldn't disabled gray out the whole element and make it impossible, to select it again?

[RobinMalfait]

Oh I misread your question sorry about that. I thought you wanted to make an option "not selectable" therefore I recommend the disabled prop.

We currently don't have an option to "unselect" a value if you click it again, this is because we are following the native input[type=radio] and as far as I know that doesn't have an option like that.

But, the RadioGroup is a controlled component, so you should be able to set the value to null. E.g.:https://codesandbox.io/s/magical-morning-g0wfry?file=/src/App.js

[MartinSeeler]

I guess the only option is to drop headless-ui in this case and make simple buttons to only let one option be selected. Which is sad, because I would love to have the keyboard navigation ability. But I guess this might be a problem with radio buttons all together, so not headless-ui specific.

[mohammadzolfali]

در تاریخ چهارشنبه ۹ مارس ۲۰۲۲،‏ ۲۱:۲۰ Martin Seeler < ***@***.***> نوشت:

…

I'm not quite sure how disabled would remove the current selection? I want to click on a radio element (which is active) to deselect it. Wouldn't disabled gray out the whole element and make it impossible, to select it again? — Reply to this email directly, view it on GitHub <#1220 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATMIVVRGZSAVVP6VSY6D54TU7DQH3ANCNFSM5QKCDQUA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** .com>

[tuffstuff9]

This would be a great option to have!