How to show a Choice Field as Radio Buttons in Power Apps Canvas app

I am back with another blog on Power Apps and this time I am going to show you on how to display a Choice field as Radio button list of forms.

Did you ever had the following requirements?

  • You need to display a Choice Field of SharePoint as Radio button list on Canvas app form?
  • You need to display a Choice Field of DataVerse as Radio button list on Canvas app form?

If you have any of these requirements, you are on the right blog. Let’s see how we can accomplish this. I created a choice field in SharePoint – Document type. And I set the Display choices using option to Radio Buttons (bottom of the screenshot).

Display Choice field as Radio button in Power Apps canvas app.

However in the canvas app it still display as dropdown.

Display Choice field as Radio button in Power Apps canvas app.

So let’s see how we can display it in the desired radio button format. First we need to unlock the DataCard for any modifications.

Display Choice field as Radio button in Power Apps canvas app.

The next step is to remove the default combobox control and insert a Radio control in place of it.

Display Choice field as Radio button in Power Apps canvas app.

I set the Items property of the Radio to the below formula.

Display Choice field as Radio button in Power Apps canvas app.

The name of my List is ‘Sample List’ and my field name is ‘Document Type’. You may need to change the formula accordingly.

And you should see the Radio buttons displaying with the choice options.

Display Choice field as Radio button in Power Apps canvas app.

There will be some errors shown because we remove the default combobox control. Fix that. It will mostly be formulas referring that control.

We are done with the UI part. But how about the updating the record back. Afterall we no longer have the default combobox control in the DataCard. To do this, let’s follow the below steps.

In the OnSelect of the radio button, I set a variable to store the selected radio button value. Radio2 is the name of my radio button control.

Display Choice field as Radio button in Power Apps canvas app.

Then in the Update property of the DataCard, I set the same property.

Display Choice field as Radio button in Power Apps canvas app.

Hope this helped! You will also like the below posts.

Debajit Dutta
Business Solutions MVP