Rewrite Form Triggers

docs/resources/control-flow/user-interactivity/forms/form-triggers.md

@@ -0,0 +1,100 @@
+---
+slug: /resources/forms/form-triggers
+title: Form Triggers
+tags: [Form, Actions, Triggers]
+keywords: [FlutterFlow, Form Triggers, User Interactivity, Dropdown, Slider, Toggle, TextField, On Selected, On Toggled, On Change, On Focus Change]
+description: Learn how to use Form Triggers in FlutterFlow to create dynamic, interactive user experiences by responding to user input on widgets like dropdowns, sliders, toggles, and text fields.
+sidebar_position: 4
+---
+
+# Form Triggers
+
+**Form Triggers** in FlutterFlow allow you to respond dynamically to user input on widgets like dropdowns, sliders, toggles, and text fields. Whether it’s selecting an option, toggling a switch, or typing in a field, these triggers help you create interactive, responsive experiences by executing actions based on user interaction.
+
+## On Selected
+
+The **On Selected** action trigger is used to perform actions when a user selects or changes a value from a widget that presents multiple options. This trigger is associated with form widgets where selection input is required, such as [Dropdown](form-widgets/dropdown.md), [RadioButton](form-widgets/radiobutton.md), [CheckboxGroup](form-widgets/checkbox.md#checkboxgroup), [ChoiceChips](form-widgets/choicechips.md), and [Slider](../../../ui/widgets/built-in-widgets/slider.md).
+
+:::tip[Possible use cases]
+
+- **Dropdown – Shipping Method Selection:** User selects a shipping method from options like "Standard", "Express", or "Next Day". Action under the *On Selected* trigger sets the app state variable `shippingOption`, which updates pricing or estimated delivery time dynamically.
+- **Slider – Show Volume Level in Snackbar:** User adjusts a Slider from 0 to 100. The *On Selected* trigger displays a Snackbar showing the current volume: Volume set to: [sliderValue].
+- **ChoiceChips – Filter Products by Category:** User taps a chip like "All", "Electronics", or "Clothing". The *On Selected* trigger might set an app state variable (e.g., `selectedCategory`) and update the product list to match the chosen category.
+
+:::
+
+To use the **On Selected** trigger:
+
+1. Start by selecting a supported widget, such as a Dropdown.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. You will notice that the **Type of Action** (aka callback) is already set to **On Selected**. That means actions added under this will be called whenever the selection changes.
+4. Finally, define the actions you want to perform when the user makes a selection, such as setting a variable, navigating to another page, or displaying a message.
+
+![on-selected](imgs/on-selected.avif)
+
+## On Toggled On / On Toggled Off
+
+The **On Toggled On** and **On Toggled Off** action triggers are used to perform actions when a user turns a toggleable widget on or off. These triggers are supported by widgets such as [Checkbox](form-widgets/checkbox.md), [CheckboxListTile](form-widgets/checkbox.md#checkboxlisttile), [Switch](form-widgets/switch.md), and [SwitchListTile](form-widgets/switch.md#switchlisttile), any widget that represents a binary state.
+
+These triggers are especially useful when you want to conditionally execute different actions based on whether a user enables or disables a setting, preference, or feature.
+
+:::tip[Possible use cases]
+
+- **Switch – Enable Dark Mode:** User toggles a Switch to enable Dark Mode. Action under the *On Toggled On* trigger sets the dark mode.
+- **Checkbox – Agree to Terms:** User checks a Checkbox labeled “I agree to the terms and conditions.” The *On Toggled On* trigger enables the Submit button. If the user unchecks it, the *On Toggled Off* trigger disables the button again.
+- **CheckboxListTile – Select Notification Channels:** User checks or unchecks options like Email, SMS, or Push Notifications. Each toggle fires either *On Toggled O*n or *On Toggled Off* to update selected preferences in the backend.
+
+:::
+
+To use the **On Toggled On** or **On Toggled Off** trigger:
+
+1. Start by selecting a supported widget, such as a Switch.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Toggled On** to define actions when the toggle is switched on, or **On Toggled Off** to define actions when it's switched off.
+4. Add your desired actions, such as updating a variable, showing a message, enabling a button, or triggering a backend call.
+
+![on-toggle](imgs/on-toggle.avif)
+
+## On Change
+
+The **On Change** action trigger is used to respond to real-time user input as they type or modify the contents of an input field. This trigger is supported by widgets such as [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md).
+
+It’s ideal for enabling live form validations, updating app state as the user types, or enabling/disabling UI elements based on the current input.
+
+:::tip[Possible use cases]
+
+- **TextField – Enable Button When Email Is Entered:** As the user types in an email TextField, action under the *On Change* trigger checks if the input is a valid email. If it is, it enables the Continue button.
+- **Pincode – Auto Submit When Complete:** When a user finishes entering a 6-digit code in a Pincode widget, action under the *On Change* trigger checks if the full code is entered and triggers form submission or a backend call.
+
+:::
+
+To use the **On Change** trigger:
+
+1. Start by selecting a supported widget, such as a TextField.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Change** from the list of available triggers.
+4. Define the actions to trigger, such as setting a variable, showing a message, or calling an API.
+
+![on-change](imgs/on-change.avif)
+
+---
+
+## On Focus Change
+
+The **On Focus Change** trigger fires whenever an input field gains or loses focus, like when a user taps into or out of a [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md) widget. It’s useful for providing user guidance (on focus) or performing validations.
+
+:::tip[Possible use cases]
+
+- **TextField – Show Hint on Focus:** When the TextField gains focus, action under the *On Focus Change* trigger displays a helper text or tooltip with input instructions (e.g., “Enter your phone number without dashes”).
+- **Pincode – Validate on Exit:** When the user finishes entering the code and the Pincode widget loses focus, action under the *On Focus Change* trigger runs validation logic to check if the input is complete or valid, and displays an error if it's not.
+
+:::
+
+To use the **On Focus Change** trigger:
+
+1. Start by selecting a supported widget, such as a TextField.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Focus Change** from the list of available triggers.
+4. Define the actions to trigger, such as showing helper text, validating input, or updating the UI based on focus.
+
+![on-focus-change](imgs/on-focus-change.avif)

docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox.md

@@ -77,7 +77,8 @@ Here is a simple way to do it:
 </div>
 <p></p>
 
-### Setting initial value
+
+### Setting Initial Value
 
 You might want to show the checkbox with a default value, either check or uncheck. For example, showing the checked checkbox for travel insurance.
 
@@ -112,45 +113,9 @@ To set the initial value:
 </div>
 <p></p>
 
-### Saving checkbox value
-
-You might want to save the checkbox's value as soon as it is checked or unchecked. For example, saving in an app state variable or Firestore document field. You can do so by adding the action on the checkbox widget.
-
-The checkbox widget provides you with the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
-
-1. **On Toggled On**: Actions added under this will be triggered whenever the checkbox is selected/checked.
-2. **On Toggled Off**: Actions added under this will be triggered whenever the checkbox is unselected/unchecked.
+### Saving Checkbox Value
 
-Here's how you do it:
-
-1. Select the **Checkbox** widget, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-2. Select **On Toggled On** or **On Toggled Off** and add an action that will update the value. (e.g., [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../ff-integrations/database/cloud-firestore/firestore-actions.md), etc.)
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/O8U6Xv5IbVwH9qDwVVfV?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+You may want to immediately save the checkbox’s value when it is checked or unchecked. To do this, [add an action using the trigger](../../forms/form-triggers.md#on-toggled-on--on-toggled-off) that responds to changes in the widget’s selection.
 
 ### Customizing
 
@@ -310,7 +275,11 @@ Here's an example of how you can use the CheckboxGroup widget in your project:
 </div>
 <p></p>
 
-### Setting initial selection
+### Trigger Action on Change
+
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
+
+### Setting Initial Selection
 
 Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup.
 
@@ -522,6 +491,3 @@ To customize the checkbox border:
 </div>
 <p></p>
 
-:::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
-:::

docs/resources/control-flow/user-interactivity/forms/form-widgets/choicechips.md

@@ -52,11 +52,11 @@ To add the ChoiceChips widget to your app:
 </div>
 <p></p>
 
-## Trigger action on change
+### Trigger Action on Change
 
-See how to [trigger an action when a selection changes](../../../../../resources/ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
 
-## Select or clear all choices [Action]
+## Select or Clear All Choices [Action]
 
 Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the **Clear All/Select All** action.
 
@@ -68,7 +68,7 @@ Before you add this action, ensure you [**allow multiselect**](#allow-multiselec
 
 You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
 
-### Allow multiselect
+### Allow Multiselect
 
 You might want to allow users to select multiple choices to filter the result.
 
@@ -165,7 +165,7 @@ To add a space between the chips, you can use the **Chip Spacing** ad **Row Spac
 </div>
 <p></p>
 
-### Align chips
+### Align Chips
 
 When you have chips in multiple rows, you can align them using the **Alignment** property. This is similar to setting main axis alignment for the Row widget.
 
@@ -195,7 +195,7 @@ When you have chips in multiple rows, you can align them using the **Alignment**
 </div>
 <p></p>
 
-### Customizing selected and unselected chip style
+### Customizing Selected and Unselected Chip Style
 
 Various properties under the **Selected Chip Style** and **Unselected Chip Style** section allow you to customize chips to match your design. Here's how you do it:
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md

@@ -76,7 +76,7 @@ Let's see how to add a *DropDown* widget and build an example that shows the sel
 </div>
 <p></p>
 
-### Setting initial value
+### Setting Initial Value
 
 Setting a default or initial value for the DropDown is a common requirement for many apps. It can provide a better user experience by pre-selecting the most likely option.
 
@@ -115,20 +115,19 @@ To set an initial value:
 </div>
 <p></p>
 
-### Saving DropDown value on selection change
+### Saving DropDown Value on Selection Change
 
 You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption.
 
-You can do so by adding an action such as [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../integrations/database/cloud-firestore/firestore-actions#update-document-action) that [triggers when a selection changes](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
+You can do so by adding an action such as [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../integrations/database/cloud-firestore/firestore-actions#update-document-action) that [triggers when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
 
-![Saving *DropDown* value on selection change](../../imgs/saving-dp-value-on-selection-change.webp)
 
 
 ## Customizing
 
 You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
 
-### Showing option label
+### Showing Option Label
 
 The dropdown widget allows you to show a label than the actual option value. By adding the option label, you can have a simple/short name or abbreviation (which is quite easy to compare and process in the backend) instead of a tricky name (e.g., Falkland Islands (the) [Malvinas]).
 
@@ -172,7 +171,7 @@ To show option label:
 </div>
 <p></p>
 
-### Searchable dropdown
+### Searchable Dropdown
 
 The *DropDown* widget is a good choice when you have a small number of options, up to around 10-20; however, If you have more options than that, consider using a searchable dropdown.
 
@@ -211,7 +210,7 @@ To make the dropdown widget a searchable one:
 
 ![Making dropdown searchable](../../imgs/making-dd-searchable.png)
 
-### Disable dropdown
+### Disable Dropdown
 
 You might need to disable a dropdown when certain conditions are not yet met or need to be fulfilled. For example, when the dropdown options are dependent on other fields, and those fields are not filled yet.
 
@@ -248,7 +247,7 @@ To disable the dropdown:
 
 ![Disabling dropdown](../../imgs/disabling-dropdown.png)
 
-### Allow multi select
+### Allow Multi Select
 
 You might want to allow users to select multiple options from the dropdown list. For example, on an e-commerce app, users might want to filter products based on multiple attributes, such as t-shirts in both 'blue' and 'red' colors.
 
@@ -284,12 +283,11 @@ To clear the selection, you can use the [Reset Form Fields](../form-actions/rese
 </div>
 <p></p>
 
-
-### Changing dropdown size
+### Changing Dropdown Size
 
 To change the height and width of the dropdown, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties > enter the Width and Height value**.
 
-### Set max height
+### Set Max Height
 
 If needed, you can also control the dropdown height using the **Max Height** property.
 
@@ -319,7 +317,7 @@ If needed, you can also control the dropdown height using the **Max Height** pro
 </div>
 <p></p>
 
-### Adding margin
+### Adding Margin
 
 Margin adds a space between the DropDown's text and its border. To change the margin, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties >** find the **Margin** property, and change the values.
 
@@ -349,13 +347,13 @@ Margin adds a space between the DropDown's text and its border. To change the ma
 </div>
 <p></p>
 
-### Changing background color
+### Changing Background Color
 
 To change the background color, move to the **Properties Panel > DropDown Style > set the Fill Color**.
 
 ![Changing background color](../../imgs/changing-background-color.png)
 
-### Changing menu elevation
+### Changing Menu Elevation
 
 Menu elevation adds a shadow to the dropdown, giving it a sense of depth and making it appear above the surface it is placed on.
 
@@ -365,11 +363,11 @@ To change the menu elevation (depth or Z-axis), move the **Properties Panel >**
 The higher value draws the bigger size of the shadow.
 :::
 
-### Adding border
+### Adding Border
 
 See how to [add a border](../../../../ui/widgets/widget-commonalities.md#adding-border).
 
-### Show/hide underline
+### Show/hide Underline
 
 To show or hide the dropdown underline, move the **Properties Panel >** **DropDown Style** > use the **Hides Underline** toggle.
 
@@ -399,12 +397,8 @@ To show or hide the dropdown underline, move the **Properties Panel >** **DropDo
 </div>
 <p></p>
 
-### Fix position
+### Fix Position
 
 By default, the dropdown options are displayed over/above the dropdown button. To display beneath/below the button, move the **Properties Panel >** **DropDown Style** > switch on the **Fix Position** toggle.
 
 ![Fix position for dropdown options](../../imgs/fix-position.webp)
-
-:::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
-:::

docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md

@@ -54,6 +54,10 @@ The RadioButton widget adds a single option named **Option 1** by default.
 </div>
 <p></p>
 
+### Trigger Action on Change
+
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
+
 ### Changing Option Name
 
 To change the name of the option:
@@ -486,9 +490,4 @@ To change the color of selected and unselected options:
         allow="clipboard-write">
     </iframe>
 </div>
-<p></p>
-
-
-:::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
-:::
+<p></p>