Power Apps radio button [With real examples]

In this Microsoft Powerapps Tutorial, We will discuss what is Powerapps Radio Button control and its all-important properties.

Also, We will see these below things that are related to Powerapps Radio button control as:

• How to add radio button control in Powerapps
• Add items in Powerapps radio button
• Display Powerapps radio button items from SharePoint List/Powerapps radio button SharePoint List choices
• Display the Powerapps radio button control in the gallery
• How to set Powerapps radio button default value
• Change the Powerapps radio button Layout as horizontal
• Powerapps radio button selected value
• Set Powerapps radio button alignment
• Display radio button side by side in Powerapps
• What is Powerapps radio button spacing
• Powerapps radio button OnSelect
• Powerapps radio button filter

Also, by taking a simple scenario, I will explain to you how to use Radio button control in Powerapps screen.

Powerapps Radio Button

PowerApps Radio button is an input control that can contain multiple options but the user can select only one option at a time.

This Radio input control is a standard HTML input control. Also, it has a horizontal layout and as well as a vertical layout.

• PowerApps Twitter Connector

Powerapps Radio button properties

Below represents some important and useful properties of Powerapps Radio button control:

• 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 = It specifies whether the Radio button control appears as horizontally or vertically.
• Value = It specifies the value of input control.
• Selected = It represents the selected item of the data record.
• Align = It specifies the location of the text that is related to the horizontal center of its control.
• Color = It represents the color of the text in the Radio button control.
• DisplayMode = It allows the user input (Edit), displays data (View), or disabled 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 = It helps to user to provide the diameter of the circles in a radio-button control.
• Reset = It helps to reset the control’s default value.

Read Power Apps Button Control

Powerapps add Radio button

Follow these below steps to add the Radio button control in Powerapps screen:

• Sign in the PowerApps app with your credentials.
• Create a new Blank Canvas app and choose any one Layout either Tablet or Phone. Then a Powerapps blank screen will appear.
• On the Blank Powerapps screen, Insert a Radio button control (Insert -> Radio) and rename it by double-clicking on it (optional). By default, the Radio button control name will be Radio1 and the Items property will be RadioSample as shown below.

Powerapps Radio button add items

When you will insert the Radio Button control in the Powerapps screen, by default, it will display only two sample values as “1” and “2“.

But in many cases, you may want to insert your own 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.

Let’s take an example. Suppose, there is a Radio button control on your Powerapps screen and you want to add multiple-choice options in that control. So what you can do is,

Just select the Radio button control and set its Items property as:

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

NOTE:

When you are providing choice values in the Radio’s Items property, at that time, do not forget to give a “[ ]” bracket at the starting and ending point of the formula. Otherwise, you will get an error.

Read Power Apps RSS Feed

Powerapps Radio button SharePoint list

Most people may want to display the choice values from their SharePoint list and use them in the Powerapps form.

In this below example, I will show you how you can get the choice values from a specific SharePoint list.

Example:

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

“Conros, TSInfoTechnologies, Intel, HCL, Dynamic Systems” as shown in below.

Next, I want to display all these choice values in the Powerapps Radio Button control. For that, we need to do these things:

• First of all, Connect the SharePoint Data Source with Powerapps app (View -> Data sources -> Connectors -> SharePoint -> Add a new or existing connection).

• Choose the specific SharePoint Site, Select the SharePoint Lists (Project Details), and hit on the Connect button. Now the SharePoint list is connecting to the Powerapps app.
• Insert a Radio button control and set its Items property as:

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

Where,

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

Read Power Apps Search Gallery

Powerapps Radio button in the gallery

To work with the Powerapps Radio Button in the Gallery control, follow these below steps:

• Insert a Vertical Gallery control (Insert -> Gallery -> Vertical) on the Powerapps screen.
• Select the Gallery control and go to the Properties pane. Select the Data source as your SharePoint List name.
• Select the Gallery Layout as Title. Resize the data card and insert a Radio button control with choice values as the below screenshot.
• Add a Label control and set the below formula on its Text property as:

Text = "Current Selected Gallery Radio Control Value: " & Gallery1.Selected.Radio4.Selected.Value

Where,

• Gallery1 = Vertical Gallery Control Name
• Radio4 = Radio Button Control Name

Just preview (F5) the app, then select one choice from the Radio button control. You can see the current selected choice value in the Label control as shown below.

Powerapps Radio button default value

While inserting a Powerapps Radio button control, you can see, there will be no default value selected in the control previously. All choices will appear with unselected option.

Suppose you want to see a default radio choice option while opening the Powerapps form or screen. In this case, you need to set a Default Value in Powerapps Radio button control.

Select the Radio button control and type one of the available choice-value on its Default property as:

Default = "Personal Leave"

You can refer this below screenshot:

Powerapps Radio button horizontal

Most of the time, as the requirement basis, people may want to change the Radio buttons layout from Vertical to Horizontal. In that case, simply they can use Radio button’s Layout property.

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

Layout = Layout.Horizontal

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

After putting the above formula, just increase the width of the Radio control data card. Then only you can see the difference.

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

Powerapps Radio button selected value

Here I will show you two different scenarios where and how you can use the Powerapps Radio button Selected value.

Scenario-1:

• Insert a Radio button control and a Label control. By default, The Radio will be using Items = RadioSample.
• Select the Label and set its Text property as:

Text = Radio1.Selected.Value

Where,

Radio1 = Radio button control name

Just preview (F5) the app and select different options from the Radio control. You can see, the label text will also change depending upon your radio button selection as like 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 Powerapps screen depending upon the PowerApps Radio button selected value.

• I have a Powerapps Radio Button control having with some choice values like “Conros”, “TSInfoTechnologies”, “Intel” etc.
• When I will select one option (suppose Conros) from that Radio control, it will navigate to Screen 1. Similarly, When I will select another option (TSInfoTechnologies) from control, then it will navigate to Screen 2 and so on.
• Both of the Powerapps screen (1 and 2), you can see in the below screenshot.

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

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

Where,

• Radio2 = Radio Button Control name
• Screen1 = Powerapps Screen Name
• Screen2 = Powerapps Screen Name

• Preview the app and select Conros option, then it will navigate to the Screen1. Similarly, if you will select TSInfoTechnologies, then 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.

Powerapps Radio button alignment

Sometimes what happens is, When you are adding a paragraph or a sentence to the Radio control, it is always coming to its centered position (in the Vertical align).

People would really like to modify this thing as it is difficult for them to see what they are selecting. See the below screenshot for your reference:

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

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

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

Powerapps Radio button side by side

While inserting a Radio Button control to your Powerapps screen, you can see the button titles are appearing right-hand side bydefault.

Suppose, you want to set the Radio button title to left-hand side as like below screenshot.

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.

But if you want to do this thing, then follow this below easiest and tricky way as:

• Select the Radio button control and set its Color property as same with your Powerapps screen color as shown below: (So that the radio choice values will disappear with the same screen color)

• Next, Insert Labels (Depends upon your number of choices) on the left side of your Radio control. Set the Labels Text property with your choice value as:

Powerapps Radio button spacing

As of now, Powerapps does not provide any property for control spacing between the Horizontal Radio Buttons.

That’s why currently you can not change the spacing between Horizontal radio buttons. In the case of Vertical Radio Buttons, you can provide the spacing by using the LineHeight property, but there is no equivalent for Horizontal spacing.

Powerapps Radio button OnSelect

In this below example, I will show you how to give each radio button a different OnSelect function. To change the OnSelect property of different values, We can use an If or Switch statement.

Also, I am setting a variable with different values based on what is being selected.

Select the Radio button control and set its OnSelect property as:

OnSelect = If(Radio1.Selected.Value = "Sick Leave", Set(varTestRadio, "This is the Leave for Sick."), If(Radio1.Selected.Value = "National Leave", Set(varTestRadio, "This is the National Leave.")))

Where,

• Radio1 = Radio Button Control name
• varTestRadio = Variable name

Next, I inserted a Label control and set its Text property as the variable name (varTestRadio) as shown below.

Now preview the app and select the Sick Leave or National Leave from Radio control. You can see the text in the Label as like below screenshot.

Powerapps Radio button filter

Suppose, you want to use the Radio button control to filter the information from the gallery control.

In this below example, I have a Radio button control and a Gallery control. When a user will select a choice value from the Radio control, it will filter and shows the information in the Gallery related to that specific choice.

Select the Radio button control and set its Items property as:

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

Where.

• Project Details = SharePoint List name
• Client = Choice field from the SharePoint List

Select the Gallery control and set the below formula on its Items property as:

Items = Filter('Project Details',Client.Value=Radio2.Selected.Value)

Where,

• Project Details = SharePoint List name
• Client = Choice field from the SharePoint List
• Radio2 = Radio Button control name

Preview and select one Radio button choice. Then in the Gallery control, it will show the related information about that specific choice as shown below.

Microsoft PowerApps Radio Button Example

Here I have taken 3 radio button control and one circle icon and 3 labels. Once a user will select one radio button, the circle color will change and a text will display in the Label control.

Check Out Microsoft PowerApps and Flow Video Training Course (Lifetime Access)

Example: If a user selects the radio button choice value as Green, it will display a green color circle and it will display a message like “you can go now” in the label control.

Follow the below steps to work with PowerApps Radio button control.

Open the PowerApps log in page. Go for creating a new PowerApps using the “Blank App” template.

If you are new to Microsoft PowerApps, then read a Microsoft PowerApps tutorial on Create your First form using Microsoft PowerApps in SharePoint Online.

On the PowerApps screen, Add one Label control (Insert -> Text -> Label). I have changed the Screen name to “TrafficColorScreen” and the Label control name as Heading.

I have set the label Text property as “Traffic Colour Rule“. Select the Underline property of Label and in the rule box, change the false to true to give the underline for label text.

Now, add a Radio button control in the PowerApps screen as shown below.

I have renamed the Radio button control name as “ColorRadioButton” and set the Items properties as:

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

Next, Inserted one Circle icon from the PowerApps icons tab.

After adding the circle icons in the PowerApps form, set its Fill properties as:

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

Next, I have added 3 label control and renamed as “redlbl“, “greenlbl“, and “orangelbl“. Select redlbl label and set its Text property as:

Text = If("Red" in ColorRadioButton.Selected.Value,"Stop There Donot Go")

Similarly, select the greenlbl label, set its Text property as:

Text = If("Green" in ColorRadioButton.Selected.Value, "You can go now")

At last, For the orangelbl label, apply the below rule on its Text property as:

Text = If("Orange" in ColorRadioButton.Selected.Value, "Ready to Go")

Now our PowerApps forms look like below. When we select the choice value as “Red“, then the circle becomes red color and shows the text as “Stop there do not go”.

I have resize the circle icon and drag it to beside of radio button to look better. I have also drag the label below the circle icon.

When I have selected the “Green” option, then the circle color becomes green and showing the message “you can go now” in the PowerApps screen.

Similarly, The circle becomes orange when we select the Orange option from the radio button control and showing the message “Ready to Go” .

You may like following PowerApps tutorial:

• PowerApps Send an Email on Submit Button
• Create a PowerApps App from PowerApps template
• How to Customize SharePoint Online List form using PowerApps
• Microsoft PowerApps: Get Current Logged In User Details like Email ID, UserName in SharePoint Online
• Microsoft PowerApps: Create Login Screen
• Display SharePoint Online List Columns in multiple screens in Microsoft PowerApps
• Embed PowerApps in Modern SharePoint Online Site Page

In this Microsoft PowerApps Tutorial, We learned about the Powerapps Radio control, its important properties.

Also, We saw how to work with PowerApps radio button control by taking some simple scenarios.

Also, we covered these below things that are related to Powerapps Radio Button Control:

• How to add radio button control in Powerapps
• Add items in Powerapps radio button
• Display Powerapps radio button items from SharePoint List/Powerapps radio button SharePoint List choices
• Display the Powerapps radio button control in the gallery
• How to set Powerapps radio button default value
• Change the Powerapps radio button Layout as horizontal
• Powerapps radio button selected value
• Set Powerapps radio button alignment
• Display radio button side by side in Powerapps
• What is Powerapps radio button spacing
• Powerapps radio button OnSelect
• Powerapps radio button filter