Links

Logic & Conditions

Create intelligent workflows using Form.io's Conditions and Logic system. Show or hide your fields, merge component JSON schema, conditionally set field settings, and more, all based on user interaction on your forms. Conditions and Logic provide more power and flexibility to the form designers. This gives end users a more personalized and structured experience when filling out a form.

Conditional Show and Hide

What is Conditional Show and Hide?
The Conditional Show and Hide feature allows the form designer to apply conditional logic to a field. Using conditional Show and Hide, you can control what fields will display based on the user input on other fields.
Why should I use Conditional Show and Hide?
When designing a form, it's best to present the end user with the most relevant fields possible. Not only does this save time for the end user, but it also provides a better user experience and form flow. Conditional Show and Hide is a great way to facilitate this!
How do I use Conditional Show and Hide?
Conditions are set on a per-field basis. To configure a show/hide condition, open the component field settings you wish to apply the conditions and click the Conditional tab.
There are two different methods to write your conditions, Simple and Advanced.

Simple Conditions

Use the Simple option to trigger a condition based on the data input of a single field on a form. There are three settings to configure when setting up a Simple condition:
This component should Display: Select whether you want the field to Show (true) or Hide (false)
When the form component: Select what field will trigger the condition
Has the value: Input what value will trigger the condition based on the field selected above.
When configuring a condition based on value selection fields (Radio, Select, Select Box), ensure you are using the Value and not the Label when setting the value inside your condition.
In the example above, the Email component will display when the Preferred method of contact component has the email value.
Example Form
Watch Video
Copy Form
Guidance
Import the Simple Conditional form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/simpleconditional
Use the Simple method when setting up a condition that is dependent on one field.
  • Ensure you are using the Value, not the Label, of the trigger field when setting up your condition.
  • Save form space by showing relevant fields based on user input
  • Create a cohesive and personalized experience for your form users
  • Design a 'Choose your own adventure' form workflow with branching fields
  • Save time setting conditionals on multiple fields by including those fields inside a Layout component and applying the condition to the Layout component.

Advanced Conditions

Use the Advanced option when setting up a conditional workflow based on multiple fields on the form. Instead of a dropdown UI, the Advanced method utilizes Javascript code to execute the condition. This provides the user with the freedom and flexibility to write complex conditions as they see fit.
Before writing your Javascript it's important to note the available variables:
form
form The complete form JSON object
submission
The complete submission object.
data
The complete submission data object.
row
Contextual "row" data, used within DataGrid, EditGrid, and Container components
component
The current component JSON
instance
The current component instance.
value
The current value of the component.
moment
The moment.js library for date manipulation.
_
An instance of Lodash.
utils
An instance of the FormioUtils object.
util
An alias for "utils".
Use the show function to start your line of javascript when conditionally showing or hiding. In the following example, this conditional field will display when the Currency field has a value less than $45,000 and the Radio field has the value 'single' or 'widowed':
show = (data.income < 45000) & (data.maritalStatus == 'single' || data.maritalStatus == 'widowed');
The data variable is being used here to reference the input data from the 'Enter your annual income' and the value selection from the 'Select your marital status' field. When referencing fields, ensure you are using the Property Name of the trigger component inside your Javascript. The Property Name can be found within the API Tab of the component settings.
Use the Property Name when referencing a component inside your code
When referencing a value selection, ensure you are using the Value and not the Label inside your Javascript code. Component values can be found in the Data Tab of the component settings. This applies to the Radio, Select, and Select Box components.
Use Values when referencing selection data inside your code

JSON Logic

Use JSON Logic as an alternative to Javascript when writing Advanced Conditions. The same concepts detailed in the Advanced Conditions section still apply. Replace the Javascript variables and operators with JSON Logic.
Form Example
Watch Video
Copy Form
Guidance
Import the Advanced Conditional form into your project using the following Embed URL:
Use the Advanced method when setting up a condition based on data input from multiple fields on the form.
  • Ensure you are using the fields Property Name and Value of the trigger field when setting up your condition.
  • Save form space by showing relevant fields based on user input
  • Create a cohesive and personalized experience for your form users
  • Design a 'Choose your own adventure' form workflow with branching fields
  • Save time setting conditionals on multiple fields by including those fields inside a Layout component and applying the condition to the Layout component.

Logic

What is the Logic feature?
The Logic feature provides a more robust rules engine to conditionally control and manipulate field settings, JSON schema, data values, and custom events. The Logic feature is applied on a per-field basis with the ability to add multiple Logic instances to the field if needed.
Why should I use Logic?
Use the Logic feature when complex conditions are required and you need to conditionally control things like field settings, schema, or data values. The Logic system also allows the user to set multiple triggers and different branches of conditional actions on a single field. Whether you're setting up simple one-to-one condition or creating complex workflows, the Logic feature is available to meet those needs.
How do I use Logic?
To access the Logic feature, open the components settings of the conditional field and click the Logic tab. Click the +Add Logic button to create a new logic instance. Give the Logic instance a name that is easily identifiable in the future.

Triggers

Set the Trigger Type to determine how the condition is written and triggered. Configuring the Trigger will depend on what Trigger Type you select. The Trigger Types are listed below:
Simple: The Simple Trigger type utilizes the same UI and configuration methods found in the Conditional tab. Refer to the Simple Conditional Documentation for more information.
Javascript: Write your own custom conditionals using Javascript code. The Javascript Trigger type utilizes the same UI and configuration methods used for Advanced Conditionals. Refer to the Advanced Conditions Documentation for more information.
JSON Logic: Use JSON Logic as an alternative to Javascript when writing Logic Conditions. Refer to the JSON Logic Documentation for more information.
Event: Use the Event option when creating your own custom events on your form.

Actions

Now that our Trigger is set, add an action that will execute when the condition is triggered. Click the +Add Action button, give the Action a name, and select an action Type. This will dictate what type of action will execute when the condition is triggered.
There are four Action Types you can choose from:
Property: Conditionally change field settings such as Required, Label, Disabled, and more! Depending on the selected Component Property, configure the Set State to True or False (EX setting a required flag) or input the conditional property Text (EX changing the Label property).
Value: Change or populate data values in the conditional field using Javascript. The following variables are available to use in your Javascript code:
"row", "data", "component", and "result"
Merge Component Schema: Not all field settings and configurations are offered with the Property action type. Directly update the field Schema Definition to configure additional settings using Logic conditions, dynamically change labels or value selections, and populate interpolated data from other fields.
Custom Action Execute a custom event workflow. Typically coincides with other fields such as the Hidden Field, Data Source, and Button components.
Add multiple actions to a single Logic instance or add multiple Logic instances to your conditional field to facilitate more complex workflows
Example Form
Watch Video
Copy Form
Guidance
Import the Logic form into your project using the following Embed URL:

Custom Validation

What are Custom Validations?
Custom Validations allow form designers to write their own custom code to satisfy complex logic validations and rules on a per-field basis within the Validation tab of the component settings.
Why should I use Custom Validations?
While Form.io offers pre-defined validation rules such as required fields, min/max input values, and unique data submissions, at times, you will need to customize your own set of validation rules in your form to satisfy rules and requirements unique to your project. Form.io allows you to write these custom rules using Javascript or JSON.
These custom rules provide a unique form experience for end users, allowing form designers to create customized validations specific to their application and form needs.
How do I use Custom Validations?
Open the components settings of the field you want to apply the validation rule to and click the Validation tab. Open the Custom Validation panel and write Javascript or open the JSON Logic Validation panel to write custom JSON.
Review the Advanced Conditions documentation to reference the available Javascript variables.
Example
In the following example, I need to validate that the data of the 'Confirm Email' field matches the 'Primary Email' field data using Javascript.
Use the valid function to start the line of code. Add the input variable to reference the data from the Primary Email field. Use the ? true: variable to input the custom message when the validation is triggered.
valid = (input === data.email) ? true: 'Email must match Primary Email field';
When referencing another field, use the Property Name of the referenced field in your code. The Property Name is found in the API tab of the component settings.
Example Form
Watch Video
Copy Form
Guidance
Import the Custom Validation form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/customvalidation
-Use Custom Validation to validate matching fields like email or passwords
-Setup complex password requirements
-Use Validate On options in the Validation settings to determine when the Validation will be triggered

Calculated Values

What are Calculated Values?
Calculated Values allows form designers to write custom javascript to facilitate calculation of data input between fields on a form.
Why should I use Calculated Values?
A common requirement for modern web forms is business based calculations between fields on your form. Whether you're creating order forms, quote request forms, payroll forms, and the like, Form.io equips you to satisfy complex calculation requirements for modern web forms necessary in today's industries.
How do I use Calculated Values?
To apply field calculations, open the component settings and click the Data tab. Scroll down the settings window and click the Calculated Value panel and add your Javascript code.
Review the Advanced Conditions documentation to reference the available Javascript variables and functions.
Example
In the following example, we are going to set up Javascript calculation between three fields and populate that data into a 'Full Name' field on the form.
Use the value function to start the line of code. Next, add the data variable and reference the Property Name of the fields you wish to calculate. Use empty single quotes to apply spaces between the calculated values.
value = value = data.firstName + ' ' + data.middleInitial + ' ' + data.lastName;
When referencing a field, use the Property Name of the referenced field in your code. The Property Name is found in the API tab of the component settings.
Example Form
Watch Video
Copy Form
Guidance
Import the Calculated Value form into your project using the following Embed URL:
https://kiajjsgmjcrqziu.form.io/customvalidation
-Merge strings of data together into one field
EX Merging First Name and Last Name field into a Full Name field
-Setup a workflow to copy and paste data from one field to another
EX Copying Address fields into Mailing Address fields by ticking a checkbox