All Collections
Getting Started
Advanced Features
Conditionally Hide/Show Components
Conditionally Hide/Show Components

Let's explore how to dynamically hide and show components using conditional logic

Updated over a week ago

Conditional or branching logic can be used to hide and show components based on the response to previous questions. The condition can be as simple as only showing a question when something is true or as complex as using a Javascript expression that that checks multiple fields!

Simple Conditional

Conditional logic is available on the conditional tab settings of every component. The easiest way to create conditional logic is using the "simple" options. In this

ℹ️ When configuring a condition based on value selection fields (Radio, Select, Select Box and SharePoint data), ensure you are using the Value and not the Label when setting the value inside your condition.

Advanced Conditional

Advanced conditional logic can be used to hide and show components based on multiple conditions. Instead of a dropdown UI, the Advanced method utilizes JavaScript. This provides power users with the freedom and flexibility to write complex conditions to fit any use case.

Before writing your Javascript it's important to understand the available variables:

Variable / Function



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.


Returns a promise containing all values from a data source


Returns the logged-in user object


Returns the Id of the current team


Returns the response Id of the current form

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 a number and radio field. When referencing fields, ensure you are using the Property Name and not the label. 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, Select Box and SharePoint Data components.

The SharePoint data component will store all columns associated with the selected value. Therefore to reference a SharePoint data component response in a advance conditional please be sure to reference down the column e.g.

show = data.sharePointDropDown.ColumnName

Did this answer your question?