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:
  • 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

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 352 Super User 2026 Season 2

#2
M Bilal Khan Profile Picture

M Bilal Khan 323

#3
Mohsin Ali Profile Picture

Mohsin Ali 226

Last 30 days Overall leaderboard