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 values

Power Apps Radio Button Properties

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

PropertyDescription
ItemsThe source of data that appears in a control such as a gallery, a list, or a chart.
DefaultsIt specifies the value of control before a user changes it.
LayoutSpecifies whether the Radio button control appears horizontally or vertically.
ValueSpecifies the value of input control.
SelectedRepresents the selected item of the data record.
AlignIt specifies the text’s location related to the horizontal center of its control.
ColorRepresents the color of the text in the Radio button control.
DisplayModeAllows the user to input (Edit), display data (View), or disable mode (Disabled).
OnChangeHow the app responds when the user changes the value of a control.
OnSelectHow the app responds when the user taps or clicks a control.
RadioSizeHelps the user to provide the diameter of the circles in a radio-button control.
ResetIt helps to reset the control’s default value.
SelectedTextA 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.

See also  How to Get Power Apps Environment ID

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

Power Apps Radio Button

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.
powerapps radio button items

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

Power apps radio button control

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.

powerapps radio control

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
Radio Button in Power Apps from SharePoint List

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:

Set Radio Button Value in Power Apps

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
radio button in powerapps

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]
power app radio button

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.

See also  Power Apps Play Video from SharePoint

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:

Radio Button Default Value in Power Apps

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:

Powerapps Radio button selected value

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.

Powerapps Radio button control selected value

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
Powerapps Radio button selected values

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.

Change Power Apps Radio Button Layout from Vertical to Horizontal

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

See also  Power Apps Modern Spinner Control - How to Use

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:

Powerapps Radio button side by side

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).

Powerapps Radio button control side by side

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"
Power apps Radio button control side by side

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:

Powerapps Radio button alignment

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
Powerapps Radio button control alignment

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

LineHeight = 2.0
Powerapps Radio button control alignments

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:

power apps radio button values

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

Items = ["Red", "Green", "Orange"]
powerapps radio button

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

powerapps radio button selected value

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
powerapps radio button choices

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.

Radio button power apps

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:

  • I was able to add the radio button to my power app from my sharepoint list app but how do you get it to write back to the list? The list does not seem to pull in that radio button column. And yes it is connected to the list and the yes/no column that already exists. Hope you can help. I didn’t see the answer anywhere in the tutorial.

    • I am also looking for this function. I should say, the tutorial was well put together and exhaustive in the aspects covered, thank you so much @Bijah!!

  • Thank you Bijay for the detailed explanation. I am running a survey on powerapps which is connected to a SharePoint list. For one of my survey questions, a radio button choice requires explanation on a textfield. I am using patch function and don’t know how I can give the condition that “If radio button is selected, send textfiled value to SharePoint list instead of radio button value. Hope this makes sense.

  • >