Toggles are the kind of element that looks trivial until the change event fires three times and your workflow runs twice.
Toggles are the kind of element that looks trivial until the change event fires three times and your workflow runs twice.
Solid Toggle Switch is free and does the boring parts properly:
One event per change. Fires once, only when the value actually changed. Not on page load, not repeatedly on update. If you’ve ever wired a counter to a toggle to find out how many times it was really firing, that’s the bug this exists for.
Works in repeating groups. There’s an optional Sync key field — bind it to Current cell’s Thing’s unique id. When Bubble recycles the element onto a different row, it re-syncs to that row’s value instead of showing the last one. This is the part that took the longest to get right, and it’s the reason I built it rather than patching something existing.
A change-source state. Reports user, workflow, preset or reset. If you’ve built a workflow that reacts to a toggle changing and then changes it back, you’ll know why this matters.
Keyboard and screen reader support. role="switch", Tab focus with a visible ring, Space/Enter to toggle, aria-checked kept in sync.
Honest height in the responsive engine, clicks that don’t propagate to parent containers, no checkbox flash on load, and autobinding that only writes on real user interaction so it can’t echo.
Styling-wise it’s the usual set — track and handle colours for each state, width, height, roundness, handle size and inset, shadow offset/blur/colour, transition time — all dynamic, all style-enabled. Pill, square, Material, wide-with-a-label-over-it all come from the same element.
Demo: https://contact-73078.bubbleapps.io/version-test
Editor: https://bubble.io/page?id=contact-73078&tab=Design&name=index&elements=bTGYf
Two things I’d genuinely like feedback on before I call it stable:
The Sync key approach works but it needs you to know to bind it. If anyone has found a way to detect repeating-group recycling without a user-supplied key, I’d like to hear it.
And I’ve only tested the responsive-engine height behaviour in a handful of container setups. If it misreports inside something I haven’t tried, tell me and I’ll fix it.
Bug reports welcome — I’d rather hear about it here than find it in a review.