De-selectable radio buttons

De-selectable radio buttons - Power Apps

By Samuel Owens - January 27, 2023

Introduction

When creating a Canvas Power App you can choose from a large number of controls and specifically input controls designed to get information from the user.

One of these controls is the humble radio button. This is a good control which provides possible options without requiring a user action. In comparison a dropdown would require the user to click to expand all of the possible options.

Example radio button input

One of problems with this control is the fact you cannot de-select it. Once an option has been chosen, you can change it but you cannot undo it. The post shows a way to make de-selecting possible in a Canvas Power App. One simple way to achieve this is to have a button or icon next to the radio button and its OnSelect property to be Reset(rdoButton). This is easy, but if there are many radio button controls, it could result in lots more controls on a screen or in an app. Power Apps recommends keeping under 500 for an app and 300 maximum per page.

The following configuration allows for the existing radio button selected value to be clicked once more to clear the selection.

Configuration

Use the following configuration on the radio button control. This will set a variable when the radio button's value has changed to the value of the radio button. Upon the next selection, if the value of the variable and the button is the same again, it will set the variable to blank. If the variable is set to blank, the Reset property on the control is then set to true, making it blank.

OnChange: Set(varRdoButton, rdoButton.Selected.Value);

OnSelect: Switch(varRdoButton,
rdoButton.Selected.Value,
Set(
       varRdoButton,
       Blank()
       ),
Blank(),
Set(
       varRdoButton,
       rdoButton.Selected.Value
       );
)

Reset: If(varRdoButton = Blank(),true,false)

And lastly, if you are loading an existing record from a data source, you will need to set the Default property on the radio button to varRdoButton and ensure that when the record/form is loaded, that varRdoButton equals the existing item e.g.

OnVisible: Set(varRdoButton,ThisItem.Column)

There are some simpler guides on the internet, but they have some caveats e.g. it will allow for de-selecting, but if the users selects the control again, nothing will happen. The above configuration solves this.

Result

Below is a video showing the different controls in action.

The code above could be further improved by using contexts instead of variables if the controls and their settings do not need to persist across pages.