Power Apps Radio Button

This Microsoft Power Apps tutorial let you understand what is Radio Button in Power Apps, what are its properties, and how to add this control in the Power Apps app.

Also, by taking some simple scenarios, we will cover these topics below that are related to Power Apps Radio button control:

  • Power Apps radio button adds items
  • Power Apps radio button SharePoint choice column
  • Power Apps radio button horizontal
  • Power Apps radio button vertical
  • Power Apps radio button rename
  • Power Apps radio button alignment
  • Power Apps radio button default/ default value
  • Power Apps radio button selected value
  • Power Apps radio button spacing
  • Power Apps radio button size
  • Power Apps radio button reset
  • Power Apps radio button OnSelect
  • Power Apps radio button allows multiple selections
  • Power Apps radio button remove scrollbar
  • Power Apps radio button in the gallery
  • Power Apps reset radio button in the gallery
  • Power Apps radio button if
  • Power Apps radio button yes/no or convert dropdown to radio button
  • Power Apps radio button text
  • Power Apps radio button filter

Do you know what is radio button? A radio button is a graphical user interface (GUI) element that allows the user to select a single item from a predefined list of options.

If you are new to Power Apps, then refer to this complete tutorial that how to build a new app in Power Apps.

Power Apps radio button

The PowerApps Radio button is an input control having multiple options, where the user can only select one option at a time. This is a common HTML input control that has both horizontal and vertical layouts.

To find this button control, the following steps are:

  • Sign in to the Power Apps.
  • Create a blank canvas app and choose a layout for either Tablet or Phone.
  • It will open a Power Apps studio.
  • On the default screen, go to Insert tab > Input > Radio.
Power Apps radio button on SharePoint
Power Apps radio button

Also, read: Power Apps Gallery Filter [With Real Examples]

Power Apps radio button properties

There are different types of properties are available in the Power Apps radio button. We can find those properties, on the property drop-down bar.

Power Apps radio button properties
Power Apps radio button properties
  • Align- It specifies the text’s position about the horizontal core of its control.
  • BorderThickness- It will give thickness to the border of the radio control.
  • BorderColor- It will give color to the border of the radio control.
  • BorderStyle– It will style the border of the radio control i.e. solid or dashed.
  • Color- It reflects the font color in the Radio button control.
  • Default- It displays the value of control before letting the user change it.
  • Value- It defines the value of the input control.
  • Selected- It represents the data record’s selected item.
  • DisplayMode- It accepts user input (Edit), displays data (View), or is disabled (Disabled).
  • Reset- It allows resetting the control’s default value.
  • OnChange– It helps the app reacts when the value of a control is changed by the user.
  • OnSelect– It use when a user clicks a control, and the app reacts in a certain way.

Read Power Apps Gallery Control

Power Apps radio button adds items

By default, when we added a radio button on the screen it will display two sample values i.e.”1” & “2“.

But it allows you to customize the values and add items as per your requirement. Also, we can add items more than 2.

Let us take an example, where we will add multiple items to the radio control on the Power Apps screen.

  • After adding the radio button control, select it.
  • On the ‘Items‘ property, insert the below function. Make sure to insert the items within square braces ‘[]‘ and each item should be defined in between double quotes ” “.
Items = ["Developer", "Tester", "Manager", "Intern", "HR", "Finance"]
Power Apps radio button add items
Power Apps radio button add items

This is how to add multiple items to the Power Apps radio button.

Power Apps radio button choices/SharePoint list choice column

For this, we have recently posted an article where we will describe how to show the SharePoint choice columns via the Power Apps radio button. Click on that link to get the answer.

Power Apps radio button horizontal

Here we will see how to represent the radio button in horizontally. In such a case, select the radio button and insert the below function on the ‘Layout‘ property.

Layout = Layout.Horizontal

By applying the above formula, we can see the radio button will display in a horizontal format on the Power Apps screen.

Power Apps radio button horizontal
Power Apps radio button horizontal

This is how to show the radio button in a horizontal layout in Power Apps.

Read How to Update DataCard Value in Power Apps

Power Apps radio button vertical

Similarly, we can change the layout from horizontal to vertical on Power Apps. For this, we need to insert the below formula on the ‘Layout‘ property of the radio button.

Layout = Layout.Vertical

It will represent the radion button items in a vertical format. We need to adjust the width and height of the button control on the screen.

Power Apps radio button vertical
Power Apps radio button vertical

This is how to show the radio button in a Vertical layout in Power Apps.

Also Read: Power Apps Gallery Patch [With Various Examples]

Power Apps radio button rename

In Power Apps, once the radio button is added to the screen, it is showing its default name i.e. Radio1, Radio2,….etc.

But we can rename a radio button control on the Power Apps screen as per our need. On the tree view, select the radio control > click on the ellipses (…) > Rename.

Power Apps radio button rename
Power Apps radio button rename

This is how to rename a radio button in Power Apps.

Power Apps radio button alignment

Here, we will see how to do an alignment on the Power Apps radio button. It allows the user to customize the alignment of the radio button as per the requirement on Power Apps such as center, left, right, and justify.

To do this, select the radio button control and set the below formula on the ‘Align’ property:

Align = Align.Center

It will keep the items in the center alignment like below:

Power Apps radio button alignment
Power Apps radio button alignment

Similarly, we can keep the item in the right alignment. For this, set the below formula in the ‘Align‘ property:

Align = Align.Right
radio button alignment in Power Apps
radio button alignment in Power Apps

This is how to align the radion button on Power Apps.

Power Apps radio button default/ default value

When we insert a Power Apps Radio button control, we can see no default value is selected in control. Also, all the options will be displayed as unselected.

But we can set a default choice on the radio button control. So that when a user opens the Power Apps screen or form the choice will be automatically selected.

In such a case, we need to specify an item (from the radio button) in the default property of the radio control.

Default = "HR"

In the above expression, we have mentioned ‘HR’ as a default choice. We can see the specified choice is automatically selected in the radio control.

Power Apps radio button default or default value
Power Apps radio button default or default value

This is how to set a default or default value in the Power Apps radio button.

Power Apps radio button selected value

Here, we will see how to work with the selected values on the Power Apps radio button.

Suppose, we want to retrieve the selected value from the radio control. For this, the following steps are:

  • On the Power Apps screen, add a label and place it beside the radio control. Go to the Insert tab > Label.
Power Apps radio button selected value
Power Apps radio button selected value
  • On the label, set the below formula in the ‘Text‘ property.
Text = Radio1.Selected.Value

By applying this above formula on the Text property of Label, we can see the selected choice will be shown in the label as below:

Show radio button selected value on Power Apps
Show radio button selected value on Power Apps

Similarly, if we select any values from the radio control, it will reflect on the label. This is how to show the radio button selected value on Power Apps.

Power Apps radio button spacing

Here, we will see how to give a space in between the radio button on Power Apps. We can customize the radio button spacing in Power Apps via the ‘LineHeight‘ property. The following steps are:

  • On the Power Apps screen, select the radio button control.
  • Set the height or provide the height number in the ‘LineHeight’ property.
LineHeight = 3

We can see it will give space in between Power Apps radio buttons.

Power Apps radio button spacing
Power Apps radio button spacing

But Power apps do not support the spacing between Horizontal Radio Buttons. This is how to give a space in the Power Apps radio button.

Power Apps radio button size

In certain requirements, we may need to customize the size of the radio on the Power Apps radio control.

There is another property ‘RadioSize‘ on the Radio control where we can increase or decrease the size of the radion by provided digit.

  • Select the radio button control.
  • Click on the ‘RadioSize‘ of the properties panel (on the left side) or select the ‘RadioSize‘ properties from the top of the screen.
  • Set a number as per your need.
RadioSize = 50
Power Apps radio button size
Power Apps radio button size

This is how to resize the radio buttons on Power Apps.

Power Apps radio button reset

Here, we will see how to reset the choices from the Power Apps radio buttons. For this, the following steps are:

  • On the radio button control, add a reload icon. Go to the Insert tab > Icons > Reload > Resize and place the icon on the radio control.
Power Apps radio button reset
Power Apps radio button reset
  • On the ‘OnSelect‘ property, set the below formula to reset the choices from the radio control.
OnSelect = Reset(Radio1)
radio button reset on Power Apps
radio button reset on Power Apps

In the above screenshot, we have selected a choice for our testing purpose. Let us save, publish, and play the Power Apps. Once the reload icon is clicked, we can see it will reset the radio control on Power Apps.

How to reset Power Apps radio button
How to reset the Power Apps radio button

This is how to reset the Power Apps radio button.

Power Apps radio button OnSelect

Here, we will see how to use the radio button ‘OnSelect‘ property on Power Apps. To implement this, the following steps are:

  • Select the radio control that we have created in the above example.
  • On the ‘OnSelect‘ property, set the below formula:
OnSelect = If(Radio1.Selected.Value="Developer",Set(VarR,"The selected option is Developer"),If(Radio1.Selected.Value="Tester",Set(VarR,"The selected option is Tester"),If(Radio1.Selected.Value="Manager",Set(VarR,"The selected option is Manager"),If(Radio1.Selected.Value="Intern",Set(VarR,"The selected option is Intern")))))

Here, VarR is the name of the variable(global).

Power Apps radio button OnSelect
Power Apps radio button OnSelect
  • Next, add a label to the screen and place it beside the radio control.
  • Select the label and insert the variable name in the ‘Text’ property.
Text = VarR

It will show the selected option from the radio control inside the label.

Power Apps radio button OnSelect property
Power Apps radio button OnSelect property

Similarly, if we select another option i.e. Tester, then it will show the respective result on the label of the screen.

This is how to work with the Power Apps radio button OnSelect property.

Power Apps radio button allows multiple selections

The radio button control only allows for one choice. But for multiple selections, we can use the checkboxes control on Power Apps.

Power Apps radio button remove scrollbar

In certain cases, the user may need to remove the scrollbar that appears when working with the Power Apps gallery.

For example, we have added a radio control in a Power Apps gallery.

Power Apps radio button remove scrollbar
Power Apps radio button remove scrollbar

To remove this scroll bar, we need to select Gallery > Properties > Show Scrollbar > Set it ‘Off’. It will hide the scroll bar from the Power Apps gallery and the radio control.

Power Apps radio button remove the scrollbar
Power Apps radio button remove the scrollbar

This is how to remove the scrollbar from the Power Apps radio button using Gallery.

Power Apps radio button in the gallery

Here we will see how to use a radio button in the Power Apps gallery. Also, we will see how to retrieve the selected text from the radio control.

For example, we have a SharePoint list of ‘Employees’ having some sample data.

Power Apps radio button in the gallery
Power Apps radio button in the gallery

Now we will add a radio button control in the Power Apps gallery. When we select a choice from the radio control, it will show a specified text of the respective item of the SharePoint list.

  • On the Power Apps screen, add a vertical gallery. Click on the Insert tab > Gallery > Vertical.
  • Select the Data source i.e. Employees SharePoint list.
  • Set the layout as Title and subtitle.
    • Select the Title label inside the gallery and set the below formula on the ‘Text’ property:
Text= ThisItem.SystemCode

It will show the system code in the gallery. Similarly, select the ‘subtitle‘ field and set the below formula in the ‘Text‘ property:

Text = ThisItem.'First Name' & " " & ThisItem.'Last Name'

It will show the first name and last name of the employee.

  • Next, select the gallery, insert a radio control, and set the ‘items‘ property as below:
Items = ["Manager", "Developer", "Tester", "Finance"]
Working With Radio Button Control In Microsoft PowerApps
Working With Radio Button Control In Microsoft PowerApps
  • Add a label control, inside the screen and set the below formula in the Text property.
 "By Proffessionally " & Gallery1.Selected.'First Name' & " is a " & Radio2.Selected.Value &". " & "The System code is" & " " & Gallery1.Selected.SystemCode 

Here, we have added some strings using the double quotes (” “) and Radio2 is the Radio control name. By applying the above formula, the text will appear on the label like below:

powerapps radio button inside gallery
Power Apps radio button inside the gallery

Let’s save, publish, and play the app. Select a choice from the radio. We can see it will show the selected profession of the respective item.

power apps radio button gallery
power apps radio button gallery

This is how to use the radio button in the Power Apps gallery.

Power apps reset radio button gallery

In the above example, we saw how to reset the radion buttons in the Power Apps screen. Here we will see once the item is selected how to reset the radio button in the Power Apps gallery.

Approach-1: Use the Reset icon

We can use a reload icon on the Power Apps radio control to reset the selected item. Select the gallery control > Insert > Icons > Reload > Select and place it inside the radio control of the gallery.

powerapps reset radio button in gallery
Power Apps reset the radio button in the gallery

Select the icon and insert the below formula to reset the radio button.

OnSelect = Reset(Radio2)
power apps reset radio button in gallery
power apps reset the radio button in the gallery

Now save, publish and play the app. Select any item from the radio control and Click on the reload icon. We can see once the reset icon is clicked the button will reset. Also, we can see it will work individually for the respective item.

Approach-2: Using Reset action

In the radio control, there is a property ‘Reset‘. Set it as ‘true‘. We can see the data will reset in the radio control.

Or, we can find the ‘Reset‘ option under the radio control’s Advanced actions(on the left panel). Set it as ‘true’. Once the value is set, we can see the radio button will be reset in the Power Apps gallery.

Reset radio button in powerapps gallery
Reset the radio button in powerapps gallery

This is how to reset the radio button in powerapps gallery.

Power Apps radio button if

Here, we will see how a radio button works with the IF conditions or statements. For example, we will use a radio button control on the Power Apps screen and as per the button selection, the image will be displayed on the screen. To implement this, the steps are:

  • On the Power Apps screen, add a radio input. In the ‘Items’ property, add the below items:
Items = ["Up", "Down", "Right", "Left"]
Power Apps radio button if
Power Apps radio button if
  • On that screen, add the icons as per the radio buttons i.e. Arrow up, Arrow down, Arrow right, Arrow left.
Power Apps radio button if statement
Power Apps radio button if statement

On each arrow icon’s ‘Visible‘ property set the below expressions. Select the ‘arrow up‘ and insert the below expression in the ‘Visible’ property.

Visible = If(Radio4.Selected.Value = "Up", true, false)

Similarly, select the ‘arrow down‘ and insert the below expression in the ‘Visible‘ property:

Visible = If(Radio4.Selected.Value = "Down", true, false)

In the ‘arrow right‘ icon’s ‘Visible‘ property:

Visible = If(Radio4.Selected.Value = "Right", true, false)

In the ‘arrow left’ icon ‘Visible‘ property:

Visible = If(Radio4.Selected.Value = "Left", true, false)

Now, save, publish and play the app. We can see the icon will be displayed as per the selection. For example, select the option ‘Right‘, the icon will appear like below:

Power Apps radio button if condition
Power Apps radio button if conditions

Similarly, if we choose ‘Down’, then a down arrow will appear on the screen.

Power Apps radio button using IF
Power Apps radio button using IF

This is an example of how to use the IF function on the Power Apps radio button.

Power Apps radio button yes/no or covert toggle to radio button

Here we will see how to use the ‘yes/no‘ toggle on Power Apps or how to convert a SharePoint toggle to a Power Apps radio button. Here, we have prepared a SharePoint list ‘Voters list’ which contains a ‘yes/no’ type column named ‘Eligible’.

Power Apps radio button YesNo column
Power Apps radio button YesNo column

We have used this SharePoint list on the Power Apps by using an ‘Edit form’.

Power Apps radio button YesNo toggle
Power Apps radio button YesNo toggle

Now we will see how to convert this yes/no toggle to the Power Apps radio button and the following steps are:

  • From the above Power Apps edit form, remove the Yes/no toggle and add a Radio control to the form. It will appear with sample radio options such as ‘1’ & ‘2’.
  • Select the radio button and insert the below expression on the ‘Items‘ property.
Items = ["Yes", "No"]
Power Apps convert dropdown to radio button
Power Apps convert dropdown to radio button
  • Select the Datacard (i.e. Eligible_DataCard) and set the below expression on the ‘Update’ property:
Update = If(EligibleRadioBtn.Selected.Value="Yes", true , false )

EligibleRadioBtn – The radio control name.

Power Apps how to convert dropdown to radio button
Power Apps how to convert dropdown to radio button
  • Add a button control to the form to save the data and the name is ‘Save‘.
  • Set the below expression on the ‘OnSelect‘ property of the button control.
OnSelect = SubmitForm(VotersDetailsForm); NewForm(VotersDetailsForm)
powerapps convert dropdown to radio button
Powerapps convert dropdown to radio button

Now save, publish and play the app. We can see the data will save as per the radio choice on the SharePoint list. This is how Power Apps convert dropdown to radio button.

Power Apps radio button text

Here we will see how to change the text position on the Power Apps radio input. Follow the below steps to execute this.

  • On the Power Apps screen, add a radio button.
  • Set the ‘layout’ property of the radio control as horizontal.
  • Select the radio control and set the color property as below. It will disappear the choices from the radio control. Or you can set the ‘Font Size‘ as 0 on the properties panel.
Color = RGBA(251, 251, 251, 1)
Power Apps radio button text
Power Apps radio button text
  • Add 2 labels to the screen. Give texts as per your need. Suppose, we are going to give the texts as: Save and Cancel.
Power Apps radio button text position change
Power Apps radio button text position change

This is how to change the text position on the Power Apps radio button.

Power Apps radio button filter

Here, we will see how to filter using the radio button on Power Apps. For example, we have a SharePoint list named ‘Employee‘ having a choice column i.e. Department.

Power Apps radio button filter
Power Apps radio button filter

Now we will filter the above data using a power Apps radio control on the basis of the department. The following steps are:

  • On the Power Apps screen, add a data table. Add the SharePoint list as a data source to get the data. Go to the Insert tab > Select Data table > Data Source.
Power Apps radio button filter data
Power Apps radio button filters data
  • Add a Radio input to the screen. Set the below expression on the ‘Items‘ property of the radio input.
Items = Choices(Employees.Department)

It will show all the choices on the radio input.

Power Apps radio button filter data source
Power Apps radio button filters data source
  • On the data table’s items property, set the below expression:
Items = Filter(Employees,Department.Value = DepartmentRadio.Selected.Value)

Where,

DepartmentRadio = Radio button control name

How to do filter with Power Apps radio button
How to do filter with the Power Apps radio button

Let’s save, publish, and play the app. Select a choice (ex- Developer) from the radio input. We can see the data will filter as per the selection.

Power Apps radio button filter the data source
Power Apps radio button filters the data source

This is how to filter a data source using the Power Apps radio button.

Also, you may like the below Power Apps Tutorials:

Conclusion

In this Microsoft Power Apps tutorial we learned what is Power Apps Radio Button, its properties, and how to add this control in the Power Apps app.

Also, we discussed these below topics:

  • How to add items on the Power Apps radio button?
  • How to work with the SharePoint choice column using the Power Apps radio button?
  • How to make the Power Apps radio button horizontal?
  • How to make the Power Apps radio button vertical?
  • How to rename the Power Apps radio button?
  • How do an align on the Power Apps radio button?
  • How to set the Power Apps radio button default/ default value?
  • What is the Power Apps radio button selected value?
  • How to do Power Apps radio button spacing?
  • How to custom the size of the Power Apps radio button?
  • How to reset the Power Apps radio button?
  • How to work with the Power Apps radio button OnSelect property?
  • Does the Power Apps radio button allow multiple selections?
  • How to remove the scrollbar from the Power Apps radio button?
  • How to work with a Power Apps radio button in the gallery?
  • How to reset the power apps radio button in the gallery?
  • How to use the IF statement in the Power Apps radio button?
  • How to convert the dropdown or yes/no to the Power Apps radio button?
  • How to change the text position on the Power Apps radio button?
  • How do filter on the Power Apps radio button?
>