Toggle Switch Bubble Mobile Free

✅

Link to the plugin page: https://zeroqode.com/plugin/toggle-switch-bubble-mobile-free-1770215826138x612255780615020400

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-09.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Toggle Switch Free

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-09&plugin=1768415517857x531971223998955500_current&tab=Design&name=Toggle+Switch+Free&type=page&version=live&elements=bTJxH2

Introduction

Add a modern toggle switch for binary and choice-based interactions. This plugin provides a single toggle component with smooth animation and customizable colors.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/j73hHPR6

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Configure Properties

Plugin Element - Toggle Switch

A customizable, animated native toggle switch for Bubble that supports multiple presets (iOS/Android/IO/normal/transparent), smooth on/off transitions, and full workflow integration with programmatic control and disabled-state handling.

Title	Description	Type
Initial Value	The initial state of the toggle switch when first loaded (true = ON, false = OFF)	Yes/No
Style Preset	Visual style of the toggle switch. Options: "ios", "android", "io_switch", "normal", "transparent", "check", "yes_no", "square", "square_3d", "emoji", "icon_switch”	Dropdown
Color On	Background color of the track when toggle is in ON position (hex or rgba format, e.g.,	Color
Color Off	Background color of the track when toggle is in OFF position (hex or rgba format, e.g.,	Color
Handle Color	Color of the toggle handle/thumb (hex or rgba format, e.g.,	Color
Border Color	Color of the toggle border (hex or rgba format). Used primarily with "transparent" style preset	Color
Border Width	Border width in pixels (default: 0 for most styles, 2 for transparent)	Number
Shadow Color	Color of the shadow effect (hex or rgba format, e.g., #000000). Only visible on styles with shadow enabled	Color
Animation Enabled	Enable or disable animation when toggling between states	Yes/No
Animation Speed	Duration of the toggle animation in milliseconds. Set to 0 for instant toggle with no animation. Default is 250ms. Common values: 0 (instant), 150 (fast), 250 (normal), 400 (slow)	Number
Disabled	Disable the toggle switch, making it non-interactive with reduced opacity	Yes/No

Name	Description	Title
New Value	The value to set the toggle to (true = ON, false = OFF)	Yes/No

Name	Description	Type
Current Value	The current state of the toggle switch (true = ON, false = OFF). Updates whenever the toggle changes	Yes/No
Is Disabled	Indicates whether the toggle is currently in disabled state (true = disabled, false = enabled)	Yes/No

Name	Description
Value Changed	Triggered whenever the toggle value changes (either from ON to OFF or OFF to ON). Use this event to run workflows when any toggle action occurs
Toggled On	Triggered specifically when the toggle is switched to the ON position (true state). Use this event for workflows that should only run when enabling the toggle
Toggled Off	Triggered specifically when the toggle is switched to the OFF position (false state). Use this event for workflows that should only run when disabling the toggle

Toggle Switch Bubble Mobile Free

Demo to preview the plugin: