How to deselect a radio button option?

Question

Hello, 
 We have a use case where user needs to select only one option out of multiple options. It is not a mandatory field. Radio button helps in ensuring only one option is selected. However, it doesn't allow user to deselect the option. We tried to set the value of Radio button as null when user is selecting the same option again. But it didn't work. 
 Hence, we are currently using multiple checkbox fields to handle this use case. 
 Is there a better approach to handle this scenario? 
 
 Thanks in advance.

shwetad · Answer

Hi Sneha, 
 
You could use one checkbox and if that is selected then only make radio Button editable, else keep it disabled. And while selecting or deselecting checkbox set the value of radio button to null.

deviratnamv · Answer

Hi snehab, 
What you said is absolutely correct, if we want to select radio button option it can't deselect the option, instead you can use checkbox for deselecting the option..

Mike Schmitt · Answer

With the advent of Rich Text Links, Rich Text Icons, and the Side-By-Side Layout options, we can probably come up with some creative solutions to this problem now. In the past I always did what some prior commentors suggested and just put a "None" or "N/A" option. But this got me thinking. 
 What if we used a rich text icon with a dynamic link configured such that it shows up right next to the radio button values? 
 ---> 
 
 Here's the code (18.1 required) I came up with for the above: 
 load(
 local!radioValue,
 
 a!sectionLayout(
 label: "Radio Button",
 contents: {
 a!textField(
 label: "Text",
 value: "asdf"
 ),
 a!sideBySideLayout(
 alignVertical: "BOTTOM",
 items: {
 a!sideBySideItem(
 width: "MINIMIZE",
 item: a!radioButtonField(
 label: "Radio",
 choiceLabels: {"A", "B"},
 choiceValues: {"A", "B"},
 value: local!radioValue,
 saveInto: local!radioValue,
 /*choiceLayout: "COMPACT",*/
 required: false()
 )
 ),
 a!sideBySideItem(
 width: "10X",
 item: a!richTextDisplayField(
 value: a!richtextitem(
 text: a!richtexticon(
 caption: "Clear Radio Button Value",
 icon: "REMOVE"
 ),
 link: a!dynamicLink(
 saveInto: a!save(
 local!radioValue,
 null()
 )
 ),
 linkStyle: "STANDALONE"
 )
 )
 )
 }
 ),
 a!dropdownField(
 label: "Dropdown",
 choiceLabels: {"1", "2"},
 choiceValues: {"1", "2"},
 placeholderLabel: "(Standard Dropdown)"
 )
 }
 )
)

Thasneem Nisa · Answer

Hi snehab848 
 You can try following approach 
 load(
 local!optionChosen,
 {
 a!richTextDisplayField(
 label: "Choose an option",
 value: {
 a!richTextIcon(
 icon: if(
 local!optionChosen = "Option 1",
 "dot-circle-o",
 "circle-o"
 ),
 link: a!dynamicLink(
 value: "Option 1",
 saveInto: a!save(
 local!optionChosen,
 if(
 local!optionChosen = save!value,
 null,
 save!value
 )
 )
 ),
 color: "SECONDARY",
 linkStyle: "STANDALONE"
 ),
 a!richTextItem(
 text: " Option 1"
 )
 }
 ),
 a!richTextDisplayField(
 value: {
 a!richTextIcon(
 icon: if(
 local!optionChosen = "Option 2",
 "dot-circle-o",
 "circle-o"
 ),
 link: a!dynamicLink(
 value: "Option 2",
 saveInto: a!save(
 local!optionChosen,
 if(
 local!optionChosen = save!value,
 null,
 save!value
 )
 )
 ),
 color: "SECONDARY",
 linkStyle: "STANDALONE"
 ),
 a!richTextItem(
 text: " Option 2"
 )
 }
 )
 }
)

Mike Schmitt · Answer

Sorry to hear you don't have 18.1's features available to use yet. I would also like to point out that the only two features I've listed that you can't do in 17.3 (i believe) are the Side-By-Side Layout and Rich Text Icon. So if you wanted to do something similar, you could probably just use an image field right below the radio button field, and the for the image you could use the a!iconIndicator component (with the "REMOVE" icon), and a link configured in the same way. It wouldn't look QUITE as nice as my original version but it might be pretty good.