Radio button need to be in horizontal

(5) Share

Report

Posted on by Community Power Pla... Microsoft Employee

How can I arrange radio buttons in horizontal?

Categories:

Building Power Apps

All responses (10)

Answers (1)

Sort by

Verified answer

Community Power Pla... Microsoft Employee on at

Like
a
(6)

Report
Copy link

Link copied!

I dont think we can do this yet, it's also something I wanted to make use of but i've had to change to a dropdown to save space vertically.

There is a suggesstion for it here: https://powerusers.microsoft.com/t5/PowerApps-Ideas/Horizontal-Radio-Control/idi-p/7356

You can vote for it which will hopefully raise its visibility 🙂
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Voted! Thank you so much!
Community Power Pla... Microsoft Employee on at

Like
a
(7)

Report
Copy link

Link copied!
Hi

You can actually have the desired functionality using circle icons:

on the screen set onvisible variable Set(varOptionChosen,0)
insert 3 (e.g.) circles;
for each circle set size 20x20, border thickness 3, border colour as you please (e.g. 77 77 77);
for each circle set fill as If(varOptionChosen=<circle number>, RGBA(77, 77, 77, 1), RGBA(255, 255, 255, 1));
for each circle set onselect Set(varOptionChosen, <circle number>);
add labels.

The solution is a work around, but looks nice and, what is more important, allows you to order this pseudo radio buttons even in a form of a perpendicular kitten.
tom.garvin 200 on at

Like
a
(40)

Report
Copy link

Link copied!

I'm arriving at this thread very late in the game, but today I had a need for a horizontal Radio Button group and found "Layout" options in the Advanced tab. Choices are Vertical or Horizontal. Voting gets results!
Community Power Pla... Microsoft Employee on at

Like
a
(15)

Report
Copy link

Link copied!

hello,

below is the method to change

go to layout of the radio button and change Layout.Horizontal.

Regards,
Saurabh
eopara 130 on at

Like
a
(5)

Report
Copy link

Link copied!

@Anonymous @Anonymous
This should be marked as The Answer... This is the most appropriate answer to this...
See attachment for how it works...

Thanks @Anonymous for this...
cthelin7 3 on at

Like
a
(0)

Report
Copy link

Link copied!

This should be the accepted solution, it works great!
rajesh-debnath 8 on at

Like
a
(3)

Report
Copy link

Link copied!

yes you can. select radio button and then go to "Layout", and then set "Layout.Horizontal"
Lawrence_Sprou1 42 on at

Like
a
(0)

Report
Copy link

Link copied!

At some point Microsoft added the Horizontal Layout to the radio buttons. I don't know when.
Using the Layout selector of the control is the easiest method to do this.
However, I needed additional functionality, so I made my own Horizontal Radio button as a custom component.
I did this by building a custom component with a horizontal gallery to hold the options and an output property to indicate which is selected. Using the Circle and the "selected Flag" to fill or not the circle. this is very flexible and customizable.
I set the Default of the Gallery to "First(Self.AllItems.Value)" but you could use any valid logic to set it.
My default Items List is: ["None", "Supplies", "Printables", "Kits"]
Here is a screenshot of the compnent:
My OnSelect for the gallery is: Set(varSelectedItem, ThisItem.Value);
And I use varSelectedItem in the Output Property.
I set the Fill Property of the Circle to: If(ThisItem.IsSelected, RGBA(56, 96, 178, 1), RGBA(0,0,0,0))

I tried using varSelectedItem for the Fill, but that didn't work for the initial default selection.
IPC_ahaas 1,401 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

Set the "Layout" for the Radio to "Horizonal"