32
Views
9
Comments
Solved
Switch toggle with text inside (ON/OFF)
Question
Application Type
Reactive
Service Studio Version
11.55.16 (Build 64072)

Hi Team, 
I want to have a toggle switch with text inside, but I don't want to use JavaScript or any component.
I am trying to achieve this using customizing Html & CSS, but I am not getting output as expected. 
Switch toggle is not working because span tag is creating by default when using checkbox inside.

Please find attached oml file for your reference.


I want the expected output as below


SwitchToggleWithTextInside.oml
2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi @Mohammad Iqbal Yusuf Sheikh ,

I've updated your OML and added the switch as requested using only HTML and CSS. Feel free to customize it to your preference.


SwitchToggleWithTextInside.oml
2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Thank you Mihai, Working as expected.

2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Hi Mihai,

I want the switch value as dynamic, could you please help me on that.

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, are you referring to the label text ('On'/'Off') or the actual boolean value of the switch? 

2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Hi, 

I am referring actual boolean value to switch or Aggregate value from database

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

I updated the OML and created a reusable block with an input parameter for the variable, an OnChange event to update it, and an initialization for the switch. 


SwitchToggleWithTextInside.oml
2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Thank you so much Mihai, It's working now.

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

I updated the OML and created a reusable block with an input parameter for the variable, an OnChange event to update it, and an initialization for the switch. 


SwitchToggleWithTextInside.oml
2025-03-12 07-08-15
Nilesh Trivedi

Hi,

You can check out this Labeled Toggle switch component from forge: https://www.outsystems.com/forge/component-overview/14791/switch-kendo-reactive

Hope it helps.

Thank You.

2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Thanks for sharing but I don't want to use the component

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi @Mohammad Iqbal Yusuf Sheikh ,

I've updated your OML and added the switch as requested using only HTML and CSS. Feel free to customize it to your preference.


SwitchToggleWithTextInside.oml
2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Thank you Mihai, Working as expected.

2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Hi Mihai,

I want the switch value as dynamic, could you please help me on that.

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi, are you referring to the label text ('On'/'Off') or the actual boolean value of the switch? 

2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Hi, 

I am referring actual boolean value to switch or Aggregate value from database

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

I updated the OML and created a reusable block with an input parameter for the variable, an OnChange event to update it, and an initialization for the switch. 


SwitchToggleWithTextInside.oml
2023-10-03 13-56-29
Mohammad Iqbal Yusuf Sheikh

Thank you so much Mihai, It's working now.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.