Radio Button Border Color and Background Fill

[Tiksha]

I'm trying to set RadioBackgroundFill, and RadioborderColor property.

 Wanted to set the background and background fill property corresponding to text color.

Have used the following code in RadioSelectionFill property

Switch(Self.Selected.Value,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Gray",Gray,"Orange",OrangeRed)

Also is it possible to hide the text of radio button items? Please help me..

Need to create something like this using radio buttons

@RezaDorrani  @RandyHayes @AJ_Z  @WarrenBelz @ragavanrajan  @PowerAddict 

Thanks in advance:)

[RandyHayes]

@Tiksha 

You cannot set the colors of each radio button in that control.

You could simulate something like this in a component, but the Radio control itself will not do what you are looking for.

I hope this is helpful for you.

[AJ_Z · Accepted solution]

Well the way I hide radio text is by making the Font 0 it is not Ideal but it works. Randy is right in saying that a radio is not ideal for your scenario I have made Colour Pickers many times and a lot look like this one that you want but I do not Radios I use a horizontal Gallery.

So I would add a horizontal gallery and make it's items the following:

["Green","Yellow","Orange","Red","Purple","Blue","Grey","Black"]

Then I would add in a circle and a check (badge) icon into the gallery and adjust the height and width of the gallery:

Then set the OnSelect Property of the gallery to this:

Set(varColSel,ThisItem.Value)

Then click the circle and change the fill property to:

If(ThisItem.IsSelected,Switch(varColSel,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Purple",Purple,"Blue",Blue,"Gray",Gray,"Orange",Orange),White)

Change the visible property of the check badge to:

ThisItem.IsSelected

then move the circle behind the check (badge) like so:

I would use this as it functions and looks better I would however change the fill RGBAs to different values that might be prettier colours e.g. the green looks a tad dark.

let me know if this meets your needs and is a solution to your problem

[Tiksha]

Thank you @AJ_Z , I managed to get the solution, the same as I wanted.

Lemme just elaborate what changes I made to reach the exact solution.

Set the Fill & HoverFill property of circle to this:

If(ThisItem.Value="Red",Red,ThisItem.Value="Green",Green,ThisItem.Value="Yellow",Yellow,ThisItem.Value="Pink",DeepPink,ThisItem.Value="Black",Black,ThisItem.Value="White",White,ThisItem.Value="Purple",Purple,ThisItem.Value="Blue",Blue,ThisItem.Value="Gray",Gray,ThisItem.Value="Orange",Orange)

And PressedFill property of circle :

If(ThisItem.IsSelected,Switch(varColSel,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Purple",Purple,"Blue",Blue,"Gray",Gray,"Orange",Orange),White)

[AJ_Z]

@Tiksha I am really glad that this solution was able to help and it looks really elegant with those changes you made. Great work on it and good luck with your power app. 🙂