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