How to Change the Radio Button Layout from Vertical to Horizontal in Power Apps?

Have you been working with a Power Apps Radio control and struggling to change the radio button layout to horizontal or vertical? If yes! I am here to provide a solution to your struggle.

This Power Apps tutorial will teach you how to change the Power Apps radio button control layout from vertical to horizontal.

Additionally, through our tutorial, you can learn to create a space between the Vertical Radio button control and adjust the label position of the radio button.

Change the Radio Button Layout from Vertical to Horizontal in Power Apps

Let’s see how to change the radio button layout from vertical to horizontal.

  • Sign in to your Power Apps with your valid Microsoft 365 credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Radio button control [Click on +Insert -> Expand Input -> Select Radio button].
Power Apps Change Radio Button Layout from Vertical to Horizontal
  • Select the Radio button -> Set its Items property to:
Items = ["IT", "Sales", "Marketing", "Finance", "HR"]
Change Radio Button Layout from Vertical to Horizontal in Power Apps
  • When a user adds items to the Power Apps Radio button, by default display items in a “Vertical” layout, as in the screenshot below.
Layout.Vertical
Change Radio Button Control Layout from Vertical to Horizontal in Power Apps
  • Select the respective Radio button -> Set the Layout property to:
Layout.Horizontal
How to Change Radio Button Layout from Vertical to Horizontal in Power Apps
  • Likewise, this is how the Power Apps radio button looks after changing its layout to horizontal.
Change Power Apps Radio Button Layout from Vertical to Horizontal

Now, you have a solution by changing the Power Apps radio button control layout from vertical to horizontal.

Power Apps Radio Button Vertical Spacing

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

Power Apps Radio Button Spacing

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
Power Apps Radio Button Control Spacing

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:

Power Apps Radio Button Side By Side

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.
Power Apps Radio Button Control Side By Side
  • 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:
Radio Button Control Side By Side in Power Apps

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

Conclusion

I trust that this tutorial on Microsoft Power Apps has provided all the information about changing the Power Apps Radio button layout from vertical to horizontal.

In Power Apps, there is no option to create space between the Horizontal Radio buttons, but I have shown you how to create a space between the Vertical Radio button control.

Additionally, you have learned how to change the radio button label position.

Furthermore, you may like some more Power Apps tutorials: