Radial Button Logic

Hi All,

I have 3 radial buttons in my design. I would like for everything to default blank and for the user to be forced to select one. Then based on their selection I will run a function that is relevant to what they selected.

I’ve been looking through a few different threads here and while this one was the most helpful, I’m running into a few challenges.

  1. When the user selects multiple buttons, the others don’t uncheck themselves
  2. I’m struggling to correctly store the checked values in page data.

I think the crux of my confusion is a lack of clear understanding between what checked state logic and disabled state logic actually do.

Here is my codeless logic if helpful

The Radials in Question:

Inside the KG Radial:


Would appreciate any resources or tips that could be provided.

Hello @Aaron_Alpeter,

Hope I will help you.

lack of clear understanding between what checked state logic and disabled state logic

  • here is the checked state visualisation: Radio1 is checked and Radio2 is unchecked. You can check the Radio2 if you want to:

Screenshot 2023-03-31 at 15.52.37

  • and when the button is disabled, you can’t even press it, it becomes unavailable:

Screenshot 2023-03-31 at 15.55.08

For your case I advise to use the Radio Buttons Group component, it will handle unchecking the buttons when you check the other one. The selected value could be saved in the On Change Event of the Radio Buttons Group:

Screenshot 2023-03-31 at 15.58.01

After that you can use the radialSelected Page variable elsewhere on page, e.g.

Regards,
Olha