Power Apps Radio Button Control [With Real Examples]

Are you looking for complete information about the Power Apps Radio button control? No problem at all!

This Microsoft Power Apps tutorial will explain all about the Power Apps Radio button control, its key properties, and how to add Radio button control in Power Apps [Manually and From SharePoint List].

Moreover, we will see how to use a Power Apps Radio button control with a simple scenario and many more like:

• Working with Power Apps Radio button control examples

Power Apps Radio Button Control

In Power Apps, the Radio button is an input control that allows users to do some actions. When the user clicks the Radio button, the action will triggered based on the code you defined.

This Power Apps Radio button control shows multiple options, but you can only select one option at a time.

Also, this Power Apps Radio button control is a standard HTML input control containing two layout options, i.e., [Vertical and Horizontal].

Power Apps Radio Button Properties

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

Refer to the below table:

Property	Description
Default	It defines the value of control before you change it
Items	This Property helps us to display the source of data in a control such as a gallery, a list, or a chat
Layout	It specifies two types of layout options, whether vertical layout or horizontal layout
Value	It is a value of the Power Apps input control
Selected	This property represents the selected item of the data record
Align	It defines the text’s location on the horizontal center of its control
Color	It represents the color of the text in a control
DisplayMode	This property allows us to select three display modes. Such as 1) user input [Edit], 2) displays data [View], 3) is disabled [Disabled]
OnChange	How actions be performed in the app when the user can change the value of the control in actions
OnSelect	How actions be performed in-app when the user taps/clicks a Radio button control
RadioSize	We can use this property to provide the diameter of the circles in a Radio button control
Reset	It helps us to determine whether a control reverts to its default value
Size	It represents the font size of the text in a control
Visible	It specifies whether a Radio button control appears or is hidden

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

How to Add Radio Button Control in Power Apps

Next, we will discuss how to add a Radio button control in Power Apps.

1. Open Power Apps with your respective Microsoft credentials.

2. Click on the + Create [From the left navigation] -> Select + Blank app -> Blank canvas app -> Click on Create button.

3. Now, a new blank canvas app will appear with a blank screen.

4. Select + Insert drop-down -> Search Radio -> Select Radio button control. Once you select it will be added to the Power Apps screen.

5. Whenever you add a Radio button, by default, the Radio button name will be Radio1, the Items property will be RadioSample, and Values are 1 and 2 as in the screenshot below.

This is how we can add a Radio button control in Power Apps.

Power Apps Radio Button Control Choices

Let’s see how to add the Power Apps Radio button choices/multiple items manually and as well as from the SharePoint Online list.

As I mentioned above, whenever we add a Radio button control in the Power Apps, by default it will show the values as “1” and “2”.

But, if you want to add multiple choices in the Power Apps Radio button, there are two ways to add choices in the Radio button control. Such as:

1. Add Radio button items in the Power Apps [From Manually]
2. How to add Power Apps Radio button choices [From SharePoint List]

Add Power Apps Radio Button Items Directly

Let’s take a simple scenario: I have a Power Apps Canvas app, and there is a Radio button control. Now, I want to add Employee Task Progress choices, i.e., [Not Started, In Progress, Completed] manually in the Radio button.

Refer to the below image:

To achieve it, follow the below-mentioned steps. Such as:

1. On the Power Apps Screen -> Insert a Radio button control and set its Items property as:

Items = ["Not Started", "In Progress", "Completed"]

Where,

• [“Not Started”, “In Progress”, “Completed”] = Power Apps Radio Button Items/Values

Note:

You should remember to enclose (“”) the choice values for the Radio’s Items property within a pair of opening [ ] and [ ] closing brackets.

Add Power Apps Radio Button Choices From SharePoint List

Now, we will learn how to add Power Apps Radio button choices from the SharePoint list.

Example:

1. I have a SharePoint Online list named “Training Courses“. This list contains the Choice field column [Technology] and it has the following choices [“Power Apps, Power Automate, Power BI, SharePoint”]

2. Now, I want to display or add all these SharePoint choice field values in the Power Apps Radio button control as in the screenshot below.

To do so, follow the below steps.

3. On the Power Apps app -> Connect the SharePoint list [Training Courses] as shown below.

4. Insert a Radio button control and set its Items property to the code below.

Items = Choices([@'Training Courses'].'Technology')

Where,

• ‘Training Courses’ = Name of the SharePoint Online List
• Technology = SharePoint List Choice Field

This is all about how to add Power Apps Radio button choices manually and as well as from the SharePoint list.

Power Apps Radio Button Items From Collection

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

Example:

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

FurnitureID	FurnitureName	FurnitureType
DC001	Dining Tables	Dining & Kitchen
DC002	Media Storage	Living
DC003	Bedroom Sets	Bedroom
Dc004	Office Suits	Office

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

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

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

4. Open the Power Apps -> Create Power Apps Canvas app -> Select App object [From the left navigation] -> Set its OnStart property to the code below.

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,

• colFurniture = Power Apps Collection Name
• FurnitureID, FurnitureName, FurnitureType = Collection Headers/Columns
• “DC001”, “Dining Tables”, “Dining & Kitchen” = Collection Rows/Records

5. Then, click on the App’s RunOnStart button to get a Collection under the Variables section as shown below.

6. Now, go to the Power Apps Screen -> Insert a Radio button and set its Items property as:

Items = Distinct(
    colFurniture,
    FurnitureType
)

Where,

• colFurniture = Power Apps Collection Name
• FurnitureType = Furniture Choice Field

7. Similarly, insert a Data table control and set its Items property to the code below.

Items = Filter(
    colFurniture,
    FurnitureType = Radio_Furnitures.Selected.Value
)

Where,

• Radio_Furnitures = Power Apps Radio Button Name

8. To display the Power Apps collection items on a Data table, just click on the Edit fields option and add fields as per the need.

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.

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

Power Apps Radio Button Control Example

In the last, we will work with the Power Apps Radio button control example.

For example, I will take the Employee Task Progress scenario. For that, In Power Apps, I have added a Radio button control, a Text label, and a Circle.

Whenever a user selects any task progress value, i.e., [Not Started, In Progress, Completed], the circle displays the specific color based on the Radio button value. Also, the text label displays a message like:

If Not Started = "You Should Start Now"

If In Progress = "Try To Complete It Within A Timeline"

If Completed = "Heartiest Congratulations!"

Refer to the below Screenshot:

To achieve the above example, follow the below steps.

1. On the Power Apps Screen -> Insert a Radio button and set its Items property as:

Items = ["Not Started", "In Progress", "Completed"]

2. Insert a Circle shape and set its Fill property to the code below.

Fill = If(
    Radio_Progress.Selected.Value = "Not Started",
    RGBA(
        255,
        0,
        0,
        1
    ),
    Radio_Progress.Selected.Value = "In Progress",
    RGBA(
        244,
        164,
        96,
        1
    ),
    Radio_Progress.Selected.Value = "Completed",
    RGBA(
        46,
        139,
        87,
        1
    )
)

Where,

• Radio_Progress = Power Apps Radio Button Name

3. Then, insert a Text label and set its Text property as:

Text = If(
    Radio_Progress.Selected.Value = "Not Started",
    "You Should Start Now",
    Radio_Progress.Selected.Value = "In Progress",
    "Try To Complete It Within A Timeline",
    Radio_Progress.Selected.Value = "Completed",
    "Heartiest Congratulations!"
)

Where,

• Radio_Progress = Power Apps Radio Button Name
• “Not Started”, “In Progress”, “Completed” = Radio Button Values
• “You Should Start Now”, “Try To Complete It Within A Timeline”, etc… = These are messages that will appear based on the Radio button selected value

4. Save, Publish, and Preview the app. When the user selects any value in the Power Apps Radio button, the circle color and label text will be changed based on the selected value.

Refer to the below image:

This is how to use the Power Apps Radio button control.

Conclusion

I hope this Microsoft Power Apps tutorial explained everything about the Power Apps Radio button control, like what is Power Apps Radio Button, its essential properties, and how to add a radio button control in Power Apps.

Furthermore, you got some idea about the following:

• Working with Power Apps Radio button control examples

Also, you may like some more Power Apps tutorials:

• Get Radio Button Selected Value in Power Apps
• Power Apps Button OnSelect
• Display SharePoint Person Column in Power Apps Dropdown
• Power Apps Button Control
• Power Apps Modern Button Control
• Convert Dropdown to Radio Button in Power Apps Form?