Unselect / clear radio group selection

What's the best way to unselect or clear a radio group selection? If I set props.value to "" or None or any other value I try, it changes the value but the previously selected option is still highlighted. It's a minor problem but still annoying - I'm just looking for a consistent way to accomplish this.


try the value null

Tried that...

I see. It seems you have make sure all
props.radios[x].selected = false

Doing this creates a component error (index expects an integer). It's likely this components' design intent is to have a default item selected.

Radio buttons
Figure 1. Random eBay photo.

Radio buttons mimic real electro-mechanical radio buttons which typically couldn't be unselected. Pressing one caused it to latch and unlatch the others through a cross-interlock. The software buttons should always have one selected as would be expected GUI standard. For your application you could onsider an additional button labeled 'None' or equivelant.

Ironically the only decent photo I could find shows all the buttons out.

1 Like

Likely. But it doesn't on startup, as your screenshot shows. I just want to avoid unnecessary confusion for the end user...

I'll see if I can find another way besides looping through the radios and setting selected to False, but for now, I'll mark your post as the answer until/if I find something better. (see below)

On second thought, I may be able to clear it without looping, as I will have the index of the selected radio, so I could do something like this:

idx = self.getChild("RadioGroup").props.index
self.getChild("RadioGroup").props.radios[idx].selected = False

# after I clear `selected` at index idx, defaults to first radio :(
self.getChild("RadioGroup").props.radios[0].selected = False

# after setting selected on first radio to False, it'll turn True after an instant :(