# \[NEW PLUGIN\] Free Toggle

**URL:** <https://forum.bubble.io/t/new-plugin-free-toggle/220282>\
**Category:** Plugins\
**Created:** [August 16, 2022, 9:28pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282 "2022-08-16T21:28:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [August 16, 2022, 9:28pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/1 "2022-08-16T21:28:50Z")

</div>

Hello Guys, Here is my first plugin

Its a toggle alternative to Ionic Toggle. Its 100% free and you can customize the main color

> **[Free Toggle Plugin for Bubble, by Moabe Vettore Ferreira Figueiredo Leite](https://bubble.io/plugin/free-toggle-1660311476391x288865870778204160)**
>
> Free Toggle Plugin page on Bubble, by Moabe Vettore Ferreira Figueiredo Leite. Add Free Toggle in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [August 23, 2022, 2:23pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/2 "2022-08-23T14:23:02Z")

</div>

I fixed some bugs. The plugin was not changing the color of all the toggles that were in the same page. And it wasn’t clickable inside repeating groups either.

---

<div class="post-metadata">

**Author:** ![aestela](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aestela/32/140161_2.png) [@aestela](https://forum.bubble.io/u/aestela)\
**Post date:** [September 13, 2022, 1:04am UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/3 "2022-09-13T01:04:08Z")

</div>

Hi @moabe.leite thanks a ton for this plugin! I was wondering how can we set the default state to be checked dynamically

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [September 14, 2022, 5:15pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/4 "2022-09-14T17:15:55Z")

</div>

Thanks for your request. I’m trying to do that. I ask only a little bit of patience, because I’m a beginer dev

---

<div class="post-metadata">

**Author:** ![dean2](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@dean2](https://forum.bubble.io/u/dean2)\
**Post date:** [October 16, 2022, 9:45am UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/5 "2022-10-16T09:45:59Z")

</div>

Can this toggle auto-bind a boolean parent data?

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [October 20, 2022, 2:51pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/6 "2022-10-20T14:51:39Z")

</div>

At this moment it isn’t possible. I’m sorry

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [October 24, 2022, 7:12pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/7 "2022-10-24T19:12:09Z")

</div>

Hello, How are you?

Now you can do autobinding. Update to version 2.0 and you can see in action

---

<div class="post-metadata">

**Author:** ![dean2](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@dean2](https://forum.bubble.io/u/dean2)\
**Post date:** [October 28, 2022, 1:05pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/8 "2022-10-28T13:05:46Z")

</div>

Hello Moabe,

This is great! it works well it does modify the field boolean correctly.  
The only thing I cant figure out is why the toggle always loads on the page as “no” even if the binding field is “yes”.

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [October 28, 2022, 6:33pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/9 "2022-10-28T18:33:38Z")

</div>

Thanks for your feedback. I’m working on that as soon as possible.

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [October 28, 2022, 8:12pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/10 "2022-10-28T20:12:44Z")

</div>

Its working

---

<div class="post-metadata">

**Author:** ![hammedakin111](https://avatars.discourse-cdn.com/v4/letter/h/7ea924/32.png) [@hammedakin111](https://forum.bubble.io/u/hammedakin111)\
**Post date:** [December 10, 2022, 5:43pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/11 "2022-12-10T17:43:49Z")

</div>

Thank you, it is difficult to know how to use it, but easy when you figure it out. Well it is free so no complain.

Tip: It is best to use it with custom state and autobinding. That works for me

---

<div class="post-metadata">

**Author:** ![dean2](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@dean2](https://forum.bubble.io/u/dean2)\
**Post date:** [April 4, 2023, 10:19am UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/12 "2023-04-04T10:19:10Z")

</div>

Hi Moabe,

This has been working well, so thank you for putting out the free plugin.  
I just wanted to bring to your attention there is a subtle vertical offset. for the toggle to appear to be centered I have to give it a 3px top margin other wise it doesn’t look right.

Please see my image:  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/f/6/f6ae0e621c5eb23b2fbfd83e3516fd80d254ffa4.png)

The top toggle is not centred so I have to put a 3px top margin on it to have it look like the bottom one.

Also would it be possible to customise the colours both the true and false states?

Cheers.

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [July 20, 2023, 4:03pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/13 "2023-07-20T16:03:58Z")

</div>

Free toggle v2 is Live (New element)

Some user requests are working as:

Preset Value (Checked, Unchecked) Obs: autobiding, not works on preset value, because it’s autobinding.

Background color is dynamic

---

<div class="post-metadata">

**Author:** ![andrewmccalister](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/andrewmccalister/32/98371_2.png) [@andrewmccalister](https://forum.bubble.io/u/andrewmccalister)\
**Post date:** [January 31, 2024, 4:03pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/14 "2024-01-31T16:03:03Z")

</div>

Am I doing something wrong or are there 3 visual values it can have:

1. 

![MOFO___MOFO_HQ](https://us1.discourse-cdn.com/bubble/original/3X/2/c/2ce612d35f42da46523bc743bebab1ebff09f543.png)

1. 

![MOFO___MOFO_HQ](https://us1.discourse-cdn.com/bubble/original/3X/5/f/5f50d0046f05e7bf68adab9206b62d6e6aea1bb0.png)

1. 

![MOFO___MOFO_HQ](https://us1.discourse-cdn.com/bubble/original/3X/6/e/6e78c935a275ae645597551843a86cb742c7992d.png)

Is #1 because it doesn’t have a value defined by default?

The big issue I have is that you set the main color (green) and then no matter if the toggle is checked or not (#2 or #3) green (ie positive color) is visible so users don’t know whether it is checked or not. I tried to set up a conditional but doesnt make a difference:

 ![MOFO___Bubble_Editor](https://us1.discourse-cdn.com/bubble/original/3X/3/e/3e71e0e598cdebbd4cee3352303f2079861f01ca.png)

---

<div class="post-metadata">

**Author:** ![moabe.leite](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/moabe.leite/32/259777_2.png) [@moabe.leite](https://forum.bubble.io/u/moabe.leite)\
**Post date:** [February 16, 2025, 12:34am UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/15 "2025-02-16T00:34:08Z")

</div>

Hello I just released a new version with some interesting upgrades:

Preset Value  
Resisable  
Disable Toggle

I hope this changes works well to all of you

Thanks

---

<div class="post-metadata">

**Author:** ![hamza.shahbaz](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@hamza.shahbaz](https://forum.bubble.io/u/hamza.shahbaz)\
**Post date:** [April 10, 2025, 2:15pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/16 "2025-04-10T14:15:44Z")

</div>

I am using toggle in my application and whenever toggle is checked and i change another field on my application (color picker). it reset the value back to unchecked.. it needs to be fixed

---

<div class="post-metadata">

**Author:** ![cbbtech](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@cbbtech](https://forum.bubble.io/u/cbbtech)\
**Post date:** [May 21, 2025, 6:50pm UTC](https://forum.bubble.io/t/new-plugin-free-toggle/220282/17 "2025-05-21T18:50:10Z")

</div>

Hi @moabe.leite. Is there any update on how to set the default state to be checked dynamically?
