---
title: "Controlling Form Fields with Visibility Rules"
slug: "controlling-form-fields-with-visibility-rules"
description: "This document demonstrates how to use Visibility Rules to control which Form Fields are show or hidden. Using Visibility Rules allow users to trigger a field's visibility, via Form event such as submitting a text input, or clicking a checkbox. "
updated: 2024-12-12T21:59:18Z
published: 2024-12-12T21:59:18Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Controlling Form Fields with Visibility Rules

## Overview

On a Form, Users can use Visibility Rules to control if a Form control is displayed to the User based on End-User input.

## Example

1. In a Designer Project, select [Create Flow](https://documentation.decisions.com/docs/create-flows) to create a new Flow.
2. Attach a **Show Form Step** to the Start step and select **Pick or Create Form > Create New > Form** to create a new Form.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-06-26_14h28_08.png)
3. In the Form Designer, configure the Form with a **Check Box** (Shipping Address Same As Billing), two **Text Boxes** (Address),**Date Time Picker** (DoB), and a **Button**(Submit Purchase) control.
4. Select the workspace. On the **Properties** panel, under **Form Rules > Legacy > Visibility Rules**, select the plus button. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_14h56_02.png)
5. In the **Add Visibility Rules** dialog window, navigate to **Pick or Create Rule > Create**. Add a name to the**Form Rules[Validation/Visibility]**box and select **Create.**

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_16h37_17.png)

1. Click UPDATE INPUTS. Under the **Rule Inputs** field, click the pencil icon.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_16h43_37.png)
2. In the **Update****Rule Inputs** dialog window, select **Form Component** for the **Input Type** field. This will indicate which field on the Form the visibility rule will be triggered. Select **Shiping Address Same as Billing** from the **Form Data Name** dropdown list. Click **Ok**.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h29_18.png)
3. Under the **Behavior** category, select **Hide / Show** for the **Behavior**setting.  
Change the **Evaluation** field to **Hide if rule Evaluates as TRUE**.  
Under the **Triggers**field, select the **Shipping Address Same as Billing [CheckBox] : Value Changed** option.  
Under the **Apply to Controls**field**,** select **Address/Textbox**.
4. Click OK.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_16h47_19.png)
5. Under **FORM RULES > Legacy > Visibility Rules**,****click **Add**.
6. Name the Rule, click **Pick or Create New**, and click **Create New**. Select **Form Rule [Validation/Visibility]**, name the Rule, and click **Create**.
7. Select **Setup Input Data**.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h34_56.png)
8. In the **Input Data** window, enter "DOB" under**Name** and change the **Type** to **Date Time**. Click **Save** and close the window.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h37_01.png)
9. Configure the Rule to read "If DOB is After 7665 Days (In Past)" (for this example, it is assumed that 21 years = 7,665 days). Click **Save** and close the Rule Designer.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h39_06.png)
10. On the Add Visibility Rules window, click **Update Inputs** and select the pencil icon.
11. In the Edit Rule Inputs window, select **Form Component**for the Input Type field and select **Date of Birth**for the Form Input Name field. Click **Ok**.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h40_31.png)
12. Under the Behavior field select **Enable / Disable**.  
Change the Evaluation field to **Disable if rule Evaluates as TRUE**.  
Under Triggers, select **DoB [****DateTimePicker] : Value Changed**.  
Under Apply to Controls, select **Submit Purchase [Button]**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-12_15h42_05(7).png)
13. Click **Ok**. Click Save and close the Form Designer.
14. Connect the Submit Purchase path to the **End**step. Click **Save** to save changes to the Flow.

### Debug

1. On the top action bar, click **Debug**.
2. Select **Start Debugging**.
3. Set the Date Picker to be older than 21 years and younger than 21 years to disable/enable the Submit Purchase button. Click the Shipping Address Same as Billing checkbox to hide the text box field.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/ezgif.com-crop%20(3)(1).gif)

---

For further information on Forms, visit the [Decisions Forum](https://community.decisions.com/categories/Forms).