How to Use Power Apps Radio Button Control? [With Various Examples]

Recently, our organization conducted a series of webinars and used a Power Apps form to collect feedback. For this, we used a Power Apps Radio control for feedback rating instead of a dropdown in the form, which eliminated the need to scroll through a long dropdown list.

In this article, I will explain Power Apps radio button control and how to add items to a radio button manually or from a SharePoint list. Also, we will see some more topics below:

• Filter a gallery with the Power Apps radio button
• Power Apps Radio Button Vertical Spacing
• Power Apps Radio Button Side By Side
• Convert the toggle button to a radio button in Power Apps
• Power Apps radio control examples
  • Display Star Ratings Based on Power Apps Radio Control
  • Display an Emoji based on Power Apps Radio Control
  • Display Progress Bar Values (with different colors) Based on Power Apps Radio Control
  • Set Text Value Based on Power Apps Radio Button
  • Convert SharePoint list number Field to Power Apps Radio Button

Power Apps Radio Button Control

The Radio control in Power Apps displays multiple options, allowing users to select only one at a time.

The screenshot below represents how a radio button looks like:

In Power Apps, you can customize the appearance of a radio button control by setting its layout to horizontal or vertical. You can also modify its properties, such as the circle color, label text, and size.

Look at some of the key properties of Power Apps radio control.

NOTE: Use the function below to get the SharePoint list choice column in Power Apps.

Distinct( DataSource, ColumnName.Value )

How to Use Radio Button in Power Apps

Here, we’ll see how to use Radio control in Power Apps and customize it. Let’s get started!

1. In Power Apps, click the +Insert tab-> Select Radio control.

2. You’ll get the sample radio control like the one below. It will default display the “1” and “2” options.

3. To add items manually, put the code below in the Items property of radio control.

["Excellent","Good", "Average","Poor"]

4. Look at some customizations of Power Apps radio control. Such as,

• Providing “Default” value,
• Line height
• Radio size
• Visible
• Color
• Font
• Font size
• Font Weight, etc.

Follow the example below.

5. Add one Text label and provide the context in the Text property. Then, it will be easy for the user to understand the purpose of radio control.

6. To change the radio control layout to horizontal. Select the Layout property and provide the formula below.

Layout.Horizontal

In this way, you can customize the radio control in Power Apps.

Power Apps Radio Button Items from SharePoint List

Here, we’ll see the process of binding the SharePoint list choice column values to Power Apps radio control.

I have a SharePoint list named Employee Leave Request. It has a choice field column named Leave Type. This choice field has the following options:

• Sick Leave
• Vacation
• Personal Leave
• Compensatory Leave

Look at the example below after adding radio control to the SharePoint list choice column in Power Apps.

Follow the steps below to achieve this.

1. Review the Leave request form in The Power Apps after connecting with the SharePoint list. By default, the “Leave Type” choice column comes into a dropdown in Power Apps.

2. Copy the “Leave Type” choice field Items property value.

3. Now, click on the Leave Type_DataCard ->Then, click on +Insert tab -> Select Radio control.

4. Now, paste the copied formula in the Items property of radio control.

Choices([@'Leave Request Form'].LeaveType)

5. Remove the leave type data card value. Then, to remove the errors, replace the” Radio control name” with the “data card value name“, as shown in the example below.

Also, change the layout of the radio control.

After making adjustments, save the changes and preview the app. Now, users can see all the multiple options at once and select one option.

Power Apps Radio Button Vertical Spacing

In Power Apps, there is no option to create space between the Horizontal Radio buttons. But, we can make space between the Vertical Radio button using the “LineHeight” property as shown below:

Follow the below steps to achieve it:

• On the Power Apps Screen -> Select the Power Apps Radio button control and Set its LineHight property as:

4                       // You can change the number

This is all about the Power Apps Radio button spacing.

Power Apps Radio Button Side By Side

Note,

The PowerApps Radio button control has no property to change the Title’s position from the default right-hand side to the left-hand side.

When adding the Radio Button control on the Power Apps screen, it’s worth noting that the button titles/items will appear on the right-hand side of the control by default.

We can change the position of the Power Apps Radio button titles on the left-hand side, as shown below:

To achieve it, follow the below steps:

• Copy the Power Apps Screen Fill property and paste this property code into the Radio button’s “Color” property as shown below:

Color = RGBA(241, 244, 249, 1)

• The radio button choice values will disappear with the screen’s background color.

• Next, add Text labels to the left side of the Power Apps Radio control -> Set its Text property to:

"Personal"

• This way, you can add the remaining text labels -> Set their Text properties with the corresponding values, as in the screenshot below:

When there is no property where we can change the radio button label position, this is how we can achieve this.

Covert Toggle Button to Radio Button in Power Apps

In Power Apps, we can also convert the toggle control to a radio control. Selecting one option from the radio control instead of On and Off in the toggle improves the user experience.

Here, I have a SharePoint list named “Webinar Feedback List.” It has a “Yes”/ “No” column that I marked below.

See the example below after converting the toggle control to radio control in Power Apps.

Follow the steps below to achieve this.

1. In Power Apps, The “Webinars Feedback Form” by default gets the “Yes/No” column with toggle control.

2. Remove the existing yes/no toggle control from the Power Apps form.

3. Click the yes/no data card. Then, add a radio button control to the form.

4. Set the Items property of the radio button control to the code below.

["Yes","No"]

5. Set the Default property of the radio button control to the value of the SharePoint yes/no column.

ThisItem.'Would you recommend this webinar to a colleague?'

6. To remove the errors, replace the toggle name data card value with the radio control name. Then, save the app and preview it once.

Filter a Gallery with Power Apps Radio Button

Here, we’ll see how to use a radio button in Power Apps to filter the items displayed in a gallery.

When the user selects a particular option using the radio button, only the relevant items are displayed in the gallery, making it easier for them to find the information they need.

I have a SharePoint list named “Musical Instruments Details,” with the “Instrument Type” as a choice column.

Follow the steps below to filter the gallery items based on the value selected in radio control.

NOTE: Create one horizontal gallery and customize it according to your needs.

1. In Power Apps, from the +Insert tab, select the Radio control and place it on top of the gallery. Change the layout to “Horizontal”

2. Set the below formula to the Items property of radio control.

Distinct('Musical Instruments','Instrument Type'.Value)

In the formula, change ‘Musical Instruments’ to your data source name, and also, change the ‘Instrument Type’ to your choice field name.

3. Put the formula below in the Items property of the gallery control in Power Apps.

Filter('Musical Instruments','Instrument Type'.Value=rad_instrument_type.Selected.Value)

This formula filters the gallery items based on the selected value in the radio control.

4. Add one Text label on the left of the radio to represent the purpose of radio control. Set some context to its Text property.

"Instrument Type"

Now, save the app. While previewing, click the radio control options. The Power Apps gallery will display the related items.

Power Apps Radio Control Examples

With the Radio control, we can improve the user experience in Power Apps by adding visual effects that respond to the selection of values in a radio control.

Let’s see some examples of using radio control in Power Apps.

Example 1: Display Star Ratings Based on Power Apps Radio Control

In this example, we’ll see how to display star ratings based on the value selection.

To achieve this, follow the steps below.

1. In Power Apps, from the +Insert tab, add the Star icon next to the radio control four times.

2. Put the formulas below in the Visible property of each star.

Star 1:

true

Star 2:

If(rad_feed_back.Selected.Value<>"Poor",true,false)

Star 3:

!(rad_feed_back.Selected.Value="Poor"||rad_feed_back.Selected.Value="Average")

Star4:

If(rad_feed_back.Selected.Value="Excellent",true,false)

3. Set the Fill property of the star to the formula below.

Color.Gold

Now, save the app and select the radio control options. It will display the stars according to that.

Example 2: Display an Emoji based on Power Apps Radio Control

Here, we’ll see how to display the face icons/emojis based on the value selected in radio control.

Follow the steps below to achieve this.

1. In Power Apps,from +Insert tab-> Under Icons -> Select the Emoji‘s

2. Now, provide the formula below in the Visible property of the Icon related to the “Excellent” value.

If(rad_feed_back.Selected.Value="Excellent",true, false)

As in the example above, for the remaining icons, add the formulas below on its Visible property.

For “Good” value:

If(rad_feed_back.Selected.Value="Good",true,false)

For “Average” value:

If(rad_feed_back.Selected.Value="Average",true,false)

For “Poor” value:

If(rad_feed_back.Selected.Value="Poor",true,false)

3. Provide the related colors to icons in its Fill property.

Now, save the changes. Then, hold the “Alt” key and click the options in radio control. The related emojis will automatically display.

Example 3: Display Progress Bar Values (with different colors) Based on Power Apps Radio Control

In this example, we’ll see how to display the progress bar values with different colors based on the value selected in the radio control.

To achieve this, follow the steps below.

Note: Make sure you enable the "Modern control" to get the progress bar. So, click the Settings in Power Apps navigation -> Under General -> Enable the Modern control and themes.

1. In Power Apps, from the +Insert tab -> select the Progress Bar control.

2. Put the formula below in the BasePaletteColor property of the progress bar control.

If(rad_feed_back.Selected.Value = "Excellent",RGBA(127, 178, 57, 1), rad_feed_back.Selected.Value= "Good",RGBA(102, 182, 227, 1), rad_feed_back.Selected.Value = "Average", RGBA(251, 188, 159, 1),rad_feed_back.Selected.Value="Poor",RGBA(246, 88, 16, 1))

This formula will change the colors in the progress bar based on the value we selected in the radio control.

3. Put the formula below in the Value property of the progress bar control.

If(rad_feed_back.Selected.Value="Excellent",100,rad_feed_back.Selected.Value="Good",70,rad_feed_back.Selected.Value="Average",50,rad_feed_back.Selected.Value="Poor",30)

This formula sets the value of the progress bar based on the value we selected in radio control.

4. Now, save the changes. Hold the “Alt” key and select the options in the radio control; the progress bar will change color and value.

Example 4: Set Text Value Based on Power Apps Radio Button

Here, I have a “Book My Show” application in Power Apps; when I select the options in “Ticket type,” the “Ticket Price” will automatically displayed.

Follow the steps below to achieve this.

In the “Book My Show” application in Power Apps. I have the “Ticket Price” type as a text label.

1. Provide the formula below in the Text property of the label.

If(rad_ticket_type.Selected.Value="Silver[1-50 seat numbers]","$250",rad_ticket_type.Selected.Value="Gold[50-100 seat numbers]","$350",rad_ticket_type.Selected.Value="Daimond[100-150 seat numbers]","$450")

This formula displays the “Ticket Price” based on the ticket we selected.

2. Now save the changes. While previewing the app, select the radio control values[ticket type]. The ticket price will automatically display.

Example 5: Convert the SharePoint list number Field to the Power Apps Radio Button

In this example, we’ll see how to convert the SharePoint list number column to radio control in Power Apps.

Here is the Sharepoint list, “Webinar Feedback List,” which contains the number column for rating.

Look at the example below. After converting the number column to radio control in Power Apps form.

Let’s get started!

While connecting the Power Apps form with the SharePoint list, the number filed for rating looks like the one below.

1. Remove the existing Datacard value of the number field. Click the ellipses (…) next to the data card value -> Click on the Delete option.

2. Add Radio control to that rating field. Then, set the Items property to the below list.

[1,2,3,4,5]

3. Within that rating field, add two Text label controls. Then, set one text label on the left side of the radio control and the other one on the right side.

Provide the code below on the left side label Text property.

Text: "Poor"

Put the code below on its Text property for the right-side text label.

Text: "Excellent"

4. Finally, the rating field looks like this.

Now, save the changes and publish them. When you select the ratings from 1 to 5, it will be stored in the SharePoint list.

Additionally, you may like some more posts:

• If Condition in Power Apps Radio Button
• Change Power Apps Radio Button to Checkbox
• Data Table Control in Power Apps
• Set Default Value in Power Apps Dropdown
• How to Use PDF Viewer Control in Power Apps
• Filter Power Apps Collection

I hope you found this article informative. I have explained the Power Apps radio button control and how to use it, along with some examples.

Using radio control in Power Apps applications, you can use these examples to improve the user experience.

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.