|
| 1 | +--- |
| 2 | +slug: /resources/forms/form-triggers |
| 3 | +title: Form Triggers |
| 4 | +tags: [Form, Actions, Triggers] |
| 5 | +keywords: [FlutterFlow, Form Triggers, User Interactivity, Dropdown, Slider, Toggle, TextField, On Selected, On Toggled, On Change, On Focus Change] |
| 6 | +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. |
| 7 | +sidebar_position: 4 |
| 8 | +--- |
| 9 | + |
| 10 | +# Form Triggers |
| 11 | + |
| 12 | +**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. |
| 13 | + |
| 14 | +## On Selected |
| 15 | + |
| 16 | +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). |
| 17 | + |
| 18 | +:::tip[Possible use cases] |
| 19 | + |
| 20 | +- **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. |
| 21 | +- **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]. |
| 22 | +- **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. |
| 23 | + |
| 24 | +::: |
| 25 | + |
| 26 | +To use the **On Selected** trigger: |
| 27 | + |
| 28 | +1. Start by selecting a supported widget, such as a Dropdown. |
| 29 | +2. Open the **Actions** tab in the properties panel and click **+ Add Action**. |
| 30 | +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. |
| 31 | +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. |
| 32 | + |
| 33 | + |
| 34 | + |
| 35 | +## On Toggled On / On Toggled Off |
| 36 | + |
| 37 | +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. |
| 38 | + |
| 39 | +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. |
| 40 | + |
| 41 | +:::tip[Possible use cases] |
| 42 | + |
| 43 | +- **Switch – Enable Dark Mode:** User toggles a Switch to enable Dark Mode. Action under the *On Toggled On* trigger sets the dark mode. |
| 44 | +- **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. |
| 45 | +- **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. |
| 46 | + |
| 47 | +::: |
| 48 | + |
| 49 | +To use the **On Toggled On** or **On Toggled Off** trigger: |
| 50 | + |
| 51 | +1. Start by selecting a supported widget, such as a Switch. |
| 52 | +2. Open the **Actions** tab in the properties panel and click **+ Add Action**. |
| 53 | +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. |
| 54 | +4. Add your desired actions, such as updating a variable, showing a message, enabling a button, or triggering a backend call. |
| 55 | + |
| 56 | + |
| 57 | + |
| 58 | +## On Change |
| 59 | + |
| 60 | +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). |
| 61 | + |
| 62 | +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. |
| 63 | + |
| 64 | +:::tip[Possible use cases] |
| 65 | + |
| 66 | +- **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. |
| 67 | +- **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. |
| 68 | + |
| 69 | +::: |
| 70 | + |
| 71 | +To use the **On Change** trigger: |
| 72 | + |
| 73 | +1. Start by selecting a supported widget, such as a TextField. |
| 74 | +2. Open the **Actions** tab in the properties panel and click **+ Add Action**. |
| 75 | +3. Choose **On Change** from the list of available triggers. |
| 76 | +4. Define the actions to trigger, such as setting a variable, showing a message, or calling an API. |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | +--- |
| 81 | + |
| 82 | +## On Focus Change |
| 83 | + |
| 84 | +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. |
| 85 | + |
| 86 | +:::tip[Possible use cases] |
| 87 | + |
| 88 | +- **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”). |
| 89 | +- **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. |
| 90 | + |
| 91 | +::: |
| 92 | + |
| 93 | +To use the **On Focus Change** trigger: |
| 94 | + |
| 95 | +1. Start by selecting a supported widget, such as a TextField. |
| 96 | +2. Open the **Actions** tab in the properties panel and click **+ Add Action**. |
| 97 | +3. Choose **On Focus Change** from the list of available triggers. |
| 98 | +4. Define the actions to trigger, such as showing helper text, validating input, or updating the UI based on focus. |
| 99 | + |
| 100 | + |
0 commit comments