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

Do you know how to change the Radio button layout from vertical to horizontal in Power Apps? If not, no need to worry!

This Microsoft Power Apps tutorial will provide all the information about the Power Apps Radio button change layout from vertical to horizontal.

Moreover, we will discuss the below topics. Such as:

• What is meant by Power Apps Radio button horizontal spacing
• Working with the Power Apps Radio button side by side

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

Here, we will discuss how to change the Power Apps Radio button layout from vertical to horizontal.

Example:

1. I have a Power Apps Canvas app, there is a Radio button control, and it has the Department choices, i.e., [“IT”, “Sales”, “Marketing”, “Finance”, “HR”].

Items = ["IT", "Sales", "Marketing", "Finance", "HR"]

2. When a user adds items to the Power Apps Radio button, it will default display items in a “Vertical” layout, as in the screenshot below.

Items = Layout.Vertical

3. But, if you want to change the Power Apps Radio button layout from vertical to horizontal, you should follow the below two ways. Such as:

• From the Radio button Layout property
• From Advanced properties of Radio button control

To achieve it, follow the below-mentioned steps. Such as:

4. Select the respective Radio button and change the Layout property using the below code.

Layout = Layout.Horizontal

OR

5. Select a Radio button control -> Click on the Advanced properties and change the Layout option from vertical to horizontal, as in the screenshot below.

6. Likewise, to modify the layout to a vertical orientation, apply this formula “Layout.Vertical” on the Radio button’s Layout property.

This is how to change the Power Apps Radio button layout from vertical to horizontal.

Power Apps Radio Button Side By Side

By default, when adding a Radio Button control to a Power Apps Screen, the button titles/ items will appear on the right-hand side of the control.

Also, if you want to change the position of the Power Apps Radio button titles on the left-hand side, as in the screenshot below, then follow the steps below.

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

2. For that, select and 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)

3. Then, only the Radio button choice values will disappear with the screen background color.

4. Next, add Text labels to the left side of the Power Apps Radio control and set its Text property with the corresponding value as shown below.

Text = "Personal"

5. Like this, you can add the remaining text labels and set their text properties with the corresponding values as in the screenshot below.

This is how to use the Power Apps Radio button side by side.

Power Apps Radio Button Horizontal 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.

Refer to the below screenshot:

To do so, follow the below steps.

1. On the Power Apps Screen -> Select the Power Apps Radio button control and set its LineHight property as:

LineHight = 4                       // You can change the number

This is all about the Power Apps Radio button spacing.

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.

Also, we discussed how to create a horizontal space between the Power Apps Radio button items. Last, we covered the Power Apps Radio button side by side.

Furthermore, you may like some more Power Apps tutorials:

• If Statement in Power Apps Radio Button
• Get Radio Button Selected Value in Power Apps
• Power Apps Button OnSelect
• Power Apps Combo Box Control