web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Radio Button Border Co...
Power Apps
Answered

Radio Button Border Color and Background Fill

(1) ShareShare
ReportReport
Posted on by Microsoft Employee

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

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

Tiksha_0-1641982142848.png

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

Tiksha_1-1641982230528.png

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

Thanks in advance:)

Categories:
I have the same question (0)
  • RandyHayes Profile Picture
    76,299 Super User 2024 Season 1 on at

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

  • Verified answer
    AJ_Z Profile Picture
    3,711 Super User 2024 Season 1 on at

    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"]

     

    AJ_Z_0-1642033742044.png

     

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

     

    AJ_Z_1-1642034900726.png

     

    Then set the OnSelect Property of the gallery to this:

    Set(varColSel,ThisItem.Value)

     

    AJ_Z_2-1642035642441.png

     

    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)

     

    AJ_Z_5-1642036589533.png

     

     

    Change the visible property of the check badge to:

    ThisItem.IsSelected

     

    AJ_Z_4-1642036361275.png

     

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

     

    AJ_Z_6-1642036640080.png

     

    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

     

  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    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.

     

    Tiksha_0-1642053213971.png

    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 Profile Picture
    3,711 Super User 2024 Season 1 on at

    @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. 🙂

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 530

#2
WarrenBelz Profile Picture

WarrenBelz 459 Most Valuable Professional

#3
Haque Profile Picture

Haque 314

Last 30 days Overall leaderboard