(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!