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.

image

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.
image

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 :(

@YF129701

A bit late to the party, but I found another workaround to set the index outside the number of radios.

image

The Radio Group component enforces logic on the user through the UI; specifically, that one option - and only one option - from among a list may be selected at a time. Users may therefore not select more than one option, nor may they remove the active selection.

If your use case is such that a user may select more than one option, or that a user may clear the active selection, then it is highly recommended you use Checkboxes and manage the selection logic (if any exists for your use-case) yourself.

Attempts to manipulate the active selection by using scripts to write to the index property are expected to reflect a change in selection to the front-end user by changing the selection Radio button. Scripts which write to an index which is not present are not supported, and are almost guaranteed to no longer work in the event that behavior is identified as a bug.

3 Likes

My train of thought was for the interaction to be similar to that of a survey where you're only allowed to select one option (less than satisfied/satisfied/more than satisfied) but you don't want anything selected when the user first encounters it.

Is there a best practice to emulate that behavior with the radio group?

Yeah, use check boxes. Nothing to stop you from making them "appear" like a radio group.

1 Like

It sounds like you DO want an option selected, a la N/A.

Screenshot 2023-11-27 at 7.45.35 PM

2 Likes