Power Apps Radio Button [How to Use]

Are you curious about the features and functionalities of the Power Apps Radio Button? No problem!

In this Power Apps article, I will tell you what is Radio button in Power Apps, it’s key properties, and how to add Radio control in Power Apps.

Also, we will discuss how to add items in Power Apps Radio Button and many more customizations like:

• How to change the layout from vertical to horizontal in Power Apps Radio Control
• Power Apps Radio Button Side-by-Side
• Set Radio Button value in Power Apps
• Radio Button Default Value in Power Apps
• Get selected value from Power Apps Radio Control
• Power Apps Radio Button Alignment

Finally, we will see a simple example of how Radio Button works in Power Apps.

Power Apps Radio Button

The Power Apps Radio button is an input control containing multiple options, but the user can select only one option at a time.

This Radio input control is a standard HTML input control in Power Apps. Also, it has a horizontal layout and a vertical layout.

Power Apps Radio Button Properties

The table below represents all about Power Apps Radio button properties:

Property	Description
Items	The source of data that appears in a control such as a gallery, a list, or a chart.
Defaults	It specifies the value of control before a user changes it.
Layout	Specifies whether the Radio button control appears horizontally or vertically.
Value	Specifies the value of input control.
Selected	Represents the selected item of the data record.
Align	It specifies the text’s location related to the horizontal center of its control.
Color	Represents the color of the text in the Radio button control.
DisplayMode	Allows the user to input (Edit), display data (View), or disable mode (Disabled).
OnChange	How the app responds when the user changes the value of a control.
OnSelect	How the app responds when the user taps or clicks a control.
RadioSize	Helps the user to provide the diameter of the circles in a radio-button control.
Reset	It helps to reset the control’s default value.
SelectedText	A string value that represents the selected item.

These are the important key properties of the Power Apps Radio Control.

Add Radio Button in Power Apps

To add a Radio control in Power Apps, follow the instructions below:

1. Sign in to Power Apps with valid Microsoft credentials.

2. Go to + Create [from left nav] -> Blank app -> Blank canvas app -> Create -> Provide App name -> Choose Format -> Create.

3. A new blank canvas app will appear with a blank screen.

4. Go to + Insert -> Expand Input -> Select Radio. Then, the radio button will be added to the Power Apps screen.

5. By default, the Radio button control name will be Radio1, and the Items property will be RadioSample, as shown below.

This is how to add radio button in Power Apps.

Power Apps radio button choices

Let us check how to add Power Apps radio button choices manually as well as from a SharePoint list.

The Radio Button control in the Powerapps screen will initially only show the values “1” and “2” when you insert it.

But in many cases, you may want to insert your items or choices into the radio button control. Not only two, but also you can add multiple items or choices in the Powerapps Radio button.

Here, I will show you two scenarios to add items to the Power Apps Radio Button. Such as:

• Add Radio button items directly
• Add Radio button items from the SharePoint List

Add Power Apps Radio button items directly

To add your own choice to the Power Apps radio button, select the Radio control and set its Items property as:

Items = ["Sick Leave", "Casual Leave", "Personal Leave", "Vacation Leave", "National Leave"]

NOTE:

Don’t forget to put a “[ ]” bracket at the beginning and end of the formula when providing choice values for the Radio’s Items property. You will encounter an error if not.

Radio Button items in Power Apps from SharePoint List

In the following example, I’ll demonstrate how to retrieve the choice values from a particular SharePoint list and display them in the Power Apps Radio button.

1. I have a SharePoint List named Project Details. It has a choice field column named Client. This Client field has the below options:

“Conros, TSInfoTechnologies, Intel, HCL, Dynamic Systems”

2. I want to display all these choice values in the Powerapps Radio Button control. First, we need to connect the SharePoint list connector to the app.

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

Items = Choices([@'Project Details'].Client)

Where,

• ‘Project Details’ = SharePoint List Name
• Client = List Dropdown or Choice column name

This way, we can add items in Power Apps Radio Button Control.

Set Radio Button Value in Power Apps

Suppose you want to display text for a radio button and a value in Power Apps. Then, in that case, we can set the radio button values in a text label control and display it.

For example, whenever I selected the button value as America, it displayed its value in the label as 2. To achieve it, follow the steps:

1. Select the radio button and set its Items property as:

Items = Table(
    {
        Country: "Australia",
        Number: 1
    },
    {
        Country: "America",
        Number: 2
    },
    {
        Country: "Canada",
        Number: 3
    }
)

Where,

• Country, Number = Table Columns
• “Australia“, “1” and so on = Table Records/Values

2. Add a Text label control and set its Text property as:

Text = "Country Number: " & rdCountry.Selected.Number

Where,

• “Country Number: ” = String that will display in the label
• rdCountry = Radio control name
• Number = Table header [To get the country name, specify rdCountry.Selected.Country]

This is how to set the Radio Button Value in Power Apps.

Radio Button Default Value in Power Apps

1. When inserting it, You can see that a default value won’t be selected in a Power Apps Radio button control. All choices will appear with an unselected option.

2. Suppose you want to see a default radio choice option while opening the app. In this case, you must set a Default Value in the Power Apps Radio button.

3. Select the Radio button and set its Default property as:

Default = "Personal Leave"

Where,

“Personal Leave” = Specify the choice that you want to set a default

You can refer to the below screenshot:

This way, we can set the Default Value to Power Apps Radio Button.

Get Radio Button Selected Value in Power Apps

Here, I will show you two scenarios where and how to get selected value from Power Apps Radio Button.

Scenario-1:

1. Insert a Radio button control and set its Items property as:

Items = ["Sick Leave", "Casual Leave", "Personal Leave", "Vacation Leave", "National Leave"]

2. Add a Text label control and set its Text property as:

Text = Radio1.Selected.Value

Where,

Radio1 = Radio button control name

3. Just preview (F5) the app and select different options from the Radio control. You can see the label text will also change depending on your radio button selection, as shown below:

NOTE:

Always remember that, Radio.Selected stands for the selected item and Radio.Selected.Value stands for the value field of the selected item.

Scenario-2:

In this scenario, I will describe to you how to navigate your Power Apps screen depending upon the Power Apps Radio button selected value.

1. I have a Powerapps Radio Button control with some choice values like “Conros”, “TSInfoTechnologies”, “Intel” etc.

2. When I select one option (suppose Conros) from that Radio control, it will navigate to Screen 1. Similarly, When I select another option (TSInfoTechnologies) from the Radio control, it will navigate to Screen 2 and so on.

3. Both of the Power Apps screens (1 and 2), as shown in the screenshot below.

4. To do so, select the Radio button control and apply the below formula on its OnSelect property:

OnSelect = If(Radio2.Selected.Value="Conros", Navigate(Screen1), Radio2.Selected.Value = "TSInfoTechnologies", Navigate(Screen2))

Where,

• Radio2 = Radio Button Control name
• Screen1, Screen2 = Power Apps Screen Names

5. Preview the app and select the Conros option from radio control; then, it will navigate to Screen1. Similarly, if you select TSInfoTechnologies, it will navigate to the Screen2.

NOTE:

You must ensure that the Radio button control should have some choice values. If the Radio button is blank, then no navigation will occur.

This way, we can get the selected value from the Power Apps Radio Button.

Change Power Apps Radio Button Layout from Vertical to Horizontal

People frequently want to switch the layout of the radio buttons from vertical to horizontal depending on the requirements. In that case, they can only use the Layout property of the Radio button.

1. Select the Radio button control and set its Layout property as:

Layout = Layout.Horizontal

Similarly, if you want to change the layout to Vertical, apply the formula “Layout.Vertical” on the Radio button’s Layout property.

2. Increase the width of the radio control after applying the above formula. Only you would then be able to distinguish the difference.

3. Also, you can set the Radio button Layout property by using the Advanced tab (Advanced -> Layout -> Layout.Horizontal), as shown in the screenshot below.

This is how to change the Power Apps Radio button layout from Vertical to Horizontal and vice versa.

Power Apps Radio Button Side By Side

You can notice the button titles are displayed on the right-hand side by default when inserting a Radio Button control into the Power Apps Screen.

Suppose you want to set the Radio button title to the left-hand side, as in the below screenshot. Follow the tricky steps below:

1. In Poweraspps Radio Button Control, there is no property for changing the position of the Title from the right-hand side to the left-hand side.

2. Select the Radio button control and set its Color property as the same as your Power Apps screen color as shown below (So that the radio choice values will disappear with the same screen color).

3. Next, Insert Labels (Depending upon your number of choices) on the left side of your Radio control. Set the Labels Text property with your choice value and so on:

Text = "Sick Leave"

This is all about Power Apps Radio Button Side By Side.

Power Apps Radio Button Alignment

Sometimes, When you add a paragraph or a sentence to the Radio control, it always comes to its centered position (in the Vertical alignment).

People would like to modify this as it is difficult to see what they select. See the screenshot below for your reference:

So, for this type of User problem, I would like to suggest you do these two things:

1. You can increase the Width size of the Radio Button control as shown below:

Width = 900

2. You can set the LineHeight property of the Radio button control as below:

LineHeight = 2.0

This is all about Power Apps Radio Button Alignment.

Power Apps Radio Button Example

Here, we will discuss one example of the Power Apps Radio Button.

The screenshot below represents a Traffic Rules scenario. It has a Radio control, a Circle, and a Label control.

Whenever a user selects any colors from the Radio control, the circle displays the specific user radio selected color, and the label displays a message like:

If Red = "Stop there...Do not Go"
If Green = "Go Now"
If Orange = "Ready to Go"

Follow the steps below to workaround this:

1. Insert a Radio control and set its Items property as:

Items = ["Red", "Green", "Orange"]

2. Add a Circle [+ Insert -> Expand Shapes -> Circle] and apply the code below on its Fill property as:

Fill = If(
    rdTrafficColor.Selected.Value = "Red",
    RGBA(
        255,
        0,
        0,
        1
    ),
    rdTrafficColor.Selected.Value = "Green",
    RGBA(
        0,
        176,
        80,
        1
    ),
    rdTrafficColor.Selected.Value = "Orange",
    RGBA(
        255,
        165,
        0,
        1
    )
)

Where,

rdTrafficColor = Radio Button Name

3. Insert a Text label control and set its Text property as:

Text = If(
    rdTrafficColor.Selected.Value = "Red",
    "Stop there...Do not Go",
    If(
        rdTrafficColor.Selected.Value = "Green",
        "Go Now",
        "Ready to Go"
    )
)

OR

Text = If(
    rdTrafficColor.Selected.Value = "Red",
    "Stop there...Do not Go",
    If(
        rdTrafficColor.Selected.Value = "Green",
        "Go Now",
        If(
            rdTrafficColor.Selected.Value = "Orange",
            "Ready to Go"
        )
    )
)

Where,

• rdTrafficColor = Radio Button Name
• “Red”, “Green”, “Orange” = Radio control values
• “Stop there…Do not Go“, “Go Now“, etc. = Messages that will appear based on the conditions

4. Finally, Save and Publish the app. Click on Publish this version. Preview the app and select some value from the radio control. The circle color and label message will change according to the user selection.

This is how to use Radio Button in Power Apps.

Conclusion

I hope you know about Power Apps Radio Button Control, its key properties, and how to add a radio button in Power Apps.

Also, we learned the various ways to add items in Power Apps Radio Control and many more like:

• Change the layout from vertical to horizontal in Power Apps Radio Control
• What is the Power Apps Radio Button Side-by-Side
• How to set Radio Button value in Power Apps
• Radio Button Default Value in Power Apps
• Get selected value from Power Apps Radio Control
• Working with Power Apps Radio Button Alignment

Also, you may like some more Power Apps tutorials:

• Power Apps Modern Radio Group Control
• Power Apps Button Control
• Power Apps Modern Information Button Control
• Power Apps Modern Table Control
• Power Apps Show/Hide Button Based On The Current User