Power Apps Radio Button Control [With Real Examples]

Did you know how to work with a Power Apps Radio Control? If Not, then follow this complete tutorial to achieve it!

This Microsoft Power Apps tutorial will teach you about “Power Apps Radio Button Control” and its key properties.

Moreover, I will explain how to insert a Radio button control in Power Apps and many more:

  • Add items manually to the Power Apps Radio button control
  • Bind the Radio button values using a SharePoint list as a data source in Power Apps
  • How to work with a Radio button control with an example
  • Power Apps Radio Button items from a Collection

Power Apps Radio Button Control

The Power Apps Radio Button is an input control that allows users to select only one option from multiple available choices.

This Radio input control is available in Power Apps and can be displayed horizontally or vertically. Refer to the image below that how a Power Apps Radio control looks like:

Power Apps Radio Button Control

This is the overview of the Power Apps Radio button control.

Power Apps Radio Button Control Properties

Here, we will see the key properties of the Power Apps Radio button control.

PropertiesDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
ColorWe can define the text color of the control.
DefaultWhen the user opens the app, by default, the item should be selected. We can specify a single item to the dropdown Default property for this.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillWe can define the background color of the control.
HeightThe vertical measurement between the top and bottom edges of a control.
ItemsTo represent the values in a Radio button, we can specify the data source along with the column name, else we can provide it manually.
LayoutWe can specify two types of layout options: vertical or horizontal.
OnChangeWhen the user changes a selection, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
RadioSizeWe can use this property to provide the diameter of the circles in a Radio button control.
ResetWe can reset the Radio button selected value to its default value or blank.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
VisibleHere, we can specify whether the Radio button control can be visible.

These are the most important key properties of the Power Apps Radio button control.

How to add Power Apps Radio Control

Let me show you how to insert a Radio button control on the Power Apps screen here.

  • Sign in to your Power Apps with your valid Microsoft 365 credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Radio control [Click on +Insert -> Expand Input -> Select Radio ]
Add Power Apps Radio Button Control
  • The Radio button control will appear like the screenshot below.
Radio Control in Power Apps
  • By default, the Radio control name will be “Radio1“; you can Rename this control using “rad.”
How to add Power Apps Radio Control

This is how to insert a Power Apps dropdown control. Then, let us see how to add items to the above dropdown list.

Add items to the Power Apps Radio button control

Power Apps allows us to manually add items to a Radio button control from other sources like SharePoint, Excel, Collections, etc.

So, let us check how to bind values to a Power Apps Radio button manually and from a SharePoint list.

1. Power Apps Radio button add items manually

Here, I will show you how to add items manually in the Power Apps Radio button control.

  • On the Power Apps screen, insert a Radio control -> Set its Items property to:
["Microsoft","HP","Lenovo","Dell"]
Power Apps Radio Button Control Manually
  • SavePublish, and Preview the app. Now, the Radio control contains the items that we added manually.
Power Apps Radio button add items manually

This is how to add items manually in the Power Apps Radio button control.

2. Populate Power Apps Radio items from a SharePoint list

Here, I will explain how to bind the Radio button values using a SharePoint list as a data source in Power Apps.

For this, I have a SharePoint list [Employee Information] with various columns below:

Column NameData type
Employee NameTitle
Employee DepartmentSingle line of text
Power Apps Radio button add items using SharePoint list

We will bind the above list single line of text column values to a Power Apps Radio button control like the screenshot below.

Power Apps Radio control values using a SharePoint list

To work around this example, Create a Blank Canvas App from a SharePoint List and follow the below steps:

  • On the Power Apps screen, insert a Radio control -> Set its Items property to:
Distinct('Employee Information','Employee Department')

Where,

  1. Employee Information = SharePoint list name
  2. Employee Department = SharePoint list column name
Bind the Power Apps Radio values using a SharePoint list
  • SavePublish, and Preview the app. The Radio button control now contains the values from the above SharePoint list column.
How to bind the Power Apps Radio values using a SharePoint list

This is how to bind items to a Power Apps Radio button control from a SharePoint list.

Power Apps Radio Button Control Examples

In this section, I will show you how to work with a Radio button control with an example.

I created a Power Apps canvas app and added a Radio button and Date picker control. Whenever the user selects a particular value from the radio, the date picker will select a particular date based on the selected value from the radio button, as shown below:

How to use Radio control in Power Apps with examples

Follow the below steps to achieve it:

  • On the Power Apps screen, insert a Radio control -> Set its Items property to:
["Power Apps","Power Automate","Power BI"]
How to work with a Power Apps Radio control
  • Insert a Date picker control -> Set its DefaultDate property to:
If(
    Rad_PowerPlatform.Selected.Value = "Power Apps",
    "09/01/2024",
    Rad_PowerPlatform.Selected.Value = "Power Automate",
    "10/01/2024",
    "15/01/2024"
)

Where,

  1. Rad_PowerPlatform = Radio button control name
  2. Power Apps, Power Automate = Radio button control values
Use Radio Control in Power Apps
  • Once your app is ready, SavePublish, and Preview the app. When the user selects a value from the radio button control, the date picker will select a particular date based on the selected value. 
How to work with Radio control in Power Apps

This is how to work with a Radio button control with an example.

Power Apps Radio Button Items From Collection

Let’s see how to get Power Apps Radio button items from a collection.

Example:

I have created a Power Apps collection named “colFurniture,” and inside this, I have added different columns and rows to store the data.

FurnitureIDFurnitureNameFurnitureType
DC001Dining TablesDining & Kitchen
DC002Media StorageLiving
DC003Bedroom SetsBedroom
Dc004Office SuitsOffice
Power Apps Radio Button Items From Collection

I want to add a Collection choice field, i.e., [FurnitureType], in the Radio button control, as in the screenshot below.

Power Apps Radio Button Items From a Collection

Also, I will display all records on the Data table control based on the Radio button selected value.

Radio Button Items From Power Apps Collection

To work around the above example, follow the below steps. Such as:

  • Open the Power Apps -> Create Power Apps Canvas app -> Select App object [From the left navigation] -> Set its OnStart property to:
OnStart = ClearCollect(
    colFurniture,
    {
        FurnitureID: "DC001",
        FurnitureName: "Dining Tables",
        FurnitureType: "Dining & Kitchen"
    },
    {
        FurnitureID: "DC002",
        FurnitureName: "Media Storage",
        FurnitureType: "Living"
    },
    {
        FurnitureID: "DC003",
        FurnitureName: "Bedroom Sets",
        FurnitureType: "Bedroom"
    },
    {
        FurnitureID: "DC004",
        FurnitureName: "Office Suits",
        FurnitureType: "Office"
    },
    {
        FurnitureID: "DC005",
        FurnitureName: "Backyard Play",
        FurnitureType: "Outdoor"
    },
    {
        FurnitureID: "DC006",
        FurnitureName: "Dining Storage",
        FurnitureType: "Dining & Kitchen"
    },
    {
        FurnitureID: "DC007",
        FurnitureName: "Kitchen Storage",
        FurnitureType: "Dining & Kitchen"
    },
    {
        FurnitureID: "DC008",
        FurnitureName: "TV Stand",
        FurnitureType: "Living"
    }
)

Where,

  1. colFurniture = Power Apps Collection Name
  2. FurnitureID, FurnitureName, FurnitureType = Collection Headers/Columns
  3. “DC001”, “Dining Tables”, “Dining & Kitchen” = Collection Rows/Records
Get Power Apps Radio Button Items From Collection
  • Then, click on the App’s RunOnStart button to create a Collection.
Add items to the Radio button control using a Power Apps Collection
  • Now, go to the Power Apps Screen -> Insert a Radio button and set its Items property as:
Items = Distinct(
    colFurniture,
    FurnitureType
)

Where,

  1. colFurniture = Power Apps Collection Name
  2. FurnitureType = Furniture Choice Field
How to Get Power Apps Radio Button Items From Collection
  • Similarly, insert a Data table control and set its Items property to:
Items = Filter(
    colFurniture,
    FurnitureType = Radio_Furnitures.Selected.Value
)

Where,

  1. Radio_Furnitures = Power Apps Radio Button Name
  • To display the Power Apps collection items on a Data table, click the Edit fields option and add fields as needed.
How to Get Power Apps Radio Button Items From a Collection

9. Save, Publish, and Preview the app. The Data table will display all the items from a Power Apps collection based on the Radio button selected value, as in the screenshot below.

Radio Button Items From the Power Apps Collection

This is all about the Power Apps Radio button Items from a collection.

Conclusion

I hope this Microsoft Power Apps tutorial gave you complete information about Power Apps Radio button control and its key properties.

Moreover, you have learned how to insert a Radio button control in Power Apps and how to add items manually to the Power Apps Radio button control.

Additionally, I have shown you how to bind the Radio button values using a SharePoint list as a data source in Power Apps and how to work with a Radio button control with an example.

Lastly, we covered adding items to the Radio button control using a Power Apps Collection.

Also, you may like some more Power Apps tutorials: