Showing results for 
Search instead for 
Did you mean: 
New Member

Powerapps Portal, how to convert radio button (two option set) to a flip switch/toggle, is this possible?

Wondering how to convert a radio buttons (two option set) to flip switch/toggle or if it is even possible to do?


I am trying to do this on the Profile page of the portal which I have customised.




I have tried adding custom CSS styles to the page and to the field xxx_dailyjopurnal via JQuery on the web page not sure if this is the correct way.








$("#xxx_dailyjournalupdates").removeClass("control boolean-radio").addClass("switch slider");





I used the CSS style from


I added the CSS to the web page in the custom CSS area.


Nothing seems to render out so I assume I have done this incorrect.  Has anyone tried this before or has any pointers on how to accomplish this?


From this :


to this 


Is the aim.


Thanks in advance,




Super User
Super User

Hi, I was quickly playing around here and I think you will need to do a bit more of customization than just removing/adding classes.


First of all I think there is a typo in your JS there, the class you are looking for is "slider" instead of "silder", but anyways I don't think that's your main issue.


I think what you need to do is the following:

  • hide original control
  • re-build the control with your custom slider
  • either add a logic to the on change of the new control, setting the value against the original field;
  • or add a function on the validation of the form to set the value against the original field
  • finally play around with CSS. In my initial tests I couldn't get the colors working properly

This is a head start to your JS, hope it helps:


var customControl = '';
customControl += '<label class="switch">';
customControl += '  <input id="cr984_boolean_custom" type="checkbox">';
customControl += '  <span class="slider round"></span>';
customControl += '</label>';



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User

Oliver Rodrigues


New Member

@OliverRodrigues  Many thanks for the quick reply.  Good spot on the typo, I have created this in the post and code.


I will give the above suggestion a try and get back to you with the findings and hopefully a solution. 😊

Helpful resources

PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (1,081)