(How to use)
Install & Place: Drag the ToggleIt element onto your page.

Size It: Resize the element freely. The toggle automatically calculates the perfect ratio for the handle and track based on your dimensions.

Choose a Theme: Select a preset like iOS or Material in the properties, or choose None to customize every color and border yourself.

Workflows:

Start a workflow using the "A ToggleIt Value is Changed" event.

Access the value via ToggleIt A's value.

Icons: You can paste Emojis, Image URLs, or raw SVG code into the Icon fields.

📘 Advanced Logic & Workflows
ToggleIt is designed to handle complex app logic. Unlike standard checkboxes that change immediately, this plugin allows you to intercept the user's click before the value is committed.

Here is how to set up the two most common scenarios.

🟢 Scenario 1: Async / Server-Side Validation
Use this when you need to save data to the database or an API, and you want to show a loading spinner on the toggle while waiting.

1. Element Setup:

  - Select the Toggle element.

  - Check the box Is Async.

2. The Workflow:

  - Go to the Workflow tab.

  - Create a new event: Elements > A ToggleIt Clicked Request.

  - Note: Do NOT use "Value is Changed" here. The value hasn't changed yet!

  - Step 1: Add your backend action (e.g., Make changes to a thing, API Call, etc.).

  - Step 2 (If Success): Add action Element Actions > Set Value.

     - Element: ToggleIt A

     - Value: ToggleIt A's Requested Value (This sets the toggle to the value the user wanted).

  - Step 3 (If Error): Add action Element Actions > Reject / Revert.

This will stop the spinner, return the toggle to its original position, and trigger a "Shake" error animation.

🟠 Scenario 2: Confirmation Dialog ("Are you sure?")
Use this when turning a setting OFF requires a warning popup (e.g., "Deactivate Account").

1. Element Setup:

  - Select the Toggle element.

  - Set Confirm Condition to "When turning OFF" (or "Always").

2. The Trigger Workflow:

  - Create a new event: Elements > A ToggleIt Clicked Request.

  - Action: Show your Popup (e.g., Popup AreYouSure).

     - The toggle will visually stay ON while the popup opens.

3. The "Yes/Confirm" Workflow (Inside Popup):

  - When the user clicks "Yes" in the popup:

  - Step 1: Add action Element Actions > Set Value.

     - Element: ToggleIt A

     - Value: ToggleIt A's Requested Value (or simply No).

  - Step 2: Hide Popup.

     - Now the toggle will animate to the OFF position.

4. The "No/Cancel" Workflow:

  - When the user clicks "Cancel":

  - Action: Hide Popup.

     - The toggle remains ON. No interaction needed.


How to setup the new Responsive Labels (Smart Switch):

Place the ToggleIt! - Smart Switch on your page.

Under the Layout tab in Bubble, uncheck "Make element fixed width", set "Min width" to 0, and MUST CHECK "Fit width to content".

Go to the plugin properties. Under --- SIZING & SHAPES ---, define the physical size of the switch itself using Toggle Width and Toggle Height (e.g., 60 and 30).

Under --- LABEL SETTINGS ---, type your text, pick the position (Left/Right), and adjust the gap. The Bubble canvas will now automatically expand to perfectly wrap your text and switch!
Tip: To use custom Lottie animations or SVG code inside the sliding handle, simply paste the raw code into the existing Icon Handle Active/Inactive fields.

How to setup the Segmented Control:

Place the new ToggleIt! - Segmented element on your page.

In the Options field, provide a dynamic list of texts (e.g., a static list or a database search).

(Optional) Set the Initial Value to match one of the texts in your list.

Customize the colors, and use the value state in your workflows to read the user's selection!



Setting up a Multi-State Toggle (3-Way)

Place the ToggleIt element on your page.

Check the is_multi_state box.

Define your Neutral Color (e.g., #FBBF24 for a warning yellow) and your Neutral Icon.

Use the new current_state state (which outputs 0, 1, or 2) in your Bubble conditionals instead of the standard Yes/No value.

Setting up Native Validation

Add a standard Bubble Input element to your page and give it an ID Attribute (e.g., my_input).

In your ToggleIt element properties, type my_input into the validation_input_id field.

That's it! If the user tries to click the toggle while the input is empty, the toggle will securely reject the click, shake, vibrate with an error pattern, and fire the validation_failed event.

Using the Batch Action (Toggle All / Reset All)

To toggle multiple switches at once, use the new Batch Toggle All action in your workflows.

Set the target_state to "yes" (to turn them all on) or "no" (to turn them all off).

Pro Tip: If you only want to reset a specific group of toggles, put them inside a Bubble Group, give that group an ID Attribute (e.g., filters), and type filters into the group_class field of the action.