|
| 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, RadioButton, CheckboxGroup, ChoiceChips, and Slider. |
| 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". The On Selected trigger might set 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, CheckboxListTile, Switch, and 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. 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 On 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** and **Pincode**. |
| 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, 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, 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** or **Pincode** 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, 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, 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