Create Toggle in bubble

Hi guys,

How do I create that toggle with day/hour below? And bonus: how do i get a nice effect when the bubble moves between hour and day?

Hey @adig :waving_hand:

Check this out:

Preview: Your Bubble app

Editor: 805testapp42 | Bubble Editor

Hope that helps! :blush:

1 Like

Hey! @adig You can build this pretty cleanly using a custom toggle rather than a native input. The usual approach is to place two text elements (e.g. “Day” and “Hour”) inside a group, then add a small rounded shape or group behind them that acts as the sliding “bubble.” Store the selected state in a custom state (like view = day/hour) and move the bubble’s position based on that state.

For the smooth effect, just enable animations on the bubble (or group) and use “move/slide” or “fade” transitions when the custom state changes. Bubble handles this surprisingly well without any plugins. Clicking “Day” sets the state to day, clicking “Hour” sets it to hour, and the bubble animates between the two.

It’s a really common pattern in Bubble, and once you set it up once, you can reuse it everywhere :+1:

1 Like