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

As of server release 8.1.0, Form.io has released a code-free Conditional Show/Hide UI using simple dropdown fields. This update relieves the need to write custom Javascript when the Show/Hide workflow is dependent on multiple fields or values.

Conditions are set on a per-field basis. To configure a show/hide condition, open the component field settings you wish to apply the condition and click the Conditional tab.

There are two different methods to write your conditions, Simple and Advanced.

How Does It Work?

The Simple Conditional tab allows the user to show or hide fields based on the user input or value selection of other fields on the form. These conditions are configured using a code-free UI. Let's review each setting and what they do before we get into workflow options.

Show or Hide this field: Select whether you would like to Show the field or Hide the field when the conditions are met.

When: Select whether you want to show or hide the field when One or All conditions are met.

Conditions: The Condition section is the criteria that will execute the workflow. Multiple conditions can be added to create complex workflows using an easy-to-use UI. method. When the +Add Condition button is clicked, the following fields will be available to configure the condition:

  • When: Select what component within the form will execute the condition.

  • Is: Comparison Operator that evaluates and compares the value of the selected field before the condition is executed.

  • Value: The data entry of the field to execute the condition. When the conditional field has static values, like the Radio or Select components, those options will be available within a dropdown field to select as the Value.

The combination of all of these settings will determine when the condition is executed on the form.

Add multiple Conditions to the workflow to facilitate advanced conditional workflows.

Why You Should Use It

This logic interface is completely code-free and gives the user the ability to create advanced if/then statements for showing or hiding a component based on the interaction or response of one or many components.

In the example below, there's an email field that should only display when a Checkbox is ticked and a certain value of a Radio component is selected. We have added two conditions, one for the checkbox and one for the Radio, to trigger the workflow when both conditions are met.

Advanced Conditions

Unlock the power of JavaScript or JSON by writing custom code to conditionally show or hide fields on your form. Use this option when more complex or specific conditions are required in the workflow, like when the conditional relies on a sub-function within the Javascript code comparing different values. 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 The complete form JSON object


The complete submission object.


The complete submission data object.


Contextual "row" data, used within DataGrid, EditGrid, and Container components


The current component JSON


The current component instance.


The current value of the component.


The moment.js library for date manipulation.


An instance of Lodash.


An instance of the FormioUtils object.


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. There's also a sub-function that will show the field when the previous condition is met 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.

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.

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.

Follow this link for JSON Logic examples and documentation


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


Set the Trigger Type to determine how the condition is structured and triggered. Configuring the Trigger will depend on what type of Trigger Type is selected. 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.


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

Custom Validation

What are Custom Validations?

Write custom Javascript or JSON code to satisfy complex validation rules and workflows on a per-field basis.

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, custom validation rules may be needed to satisfy rules and requirements unique to an application. This ensures that the data a user enters in a field meets the standards specified by the form designer before the user can submit the form.

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.


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: 'Emails must match';

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.

Calculated Values

What are Calculated Values?

Calculated Values allow form designers to write custom Javascript or JSON code to facilitate data calculation between different 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, click the Calculated Value panel, and add your Javascript code to the code block

Review the Advanced Conditions documentation to reference the available Javascript variables and functions.


In the following example, we are going to set up Javascript calculation between two fields and populate that data into a 'Total' field

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.

value = data.fieldA + data.fieldB

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.

Last updated