# Conditional Components

> The **Conditional** tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

The **Conditional** tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

The Conditional tab has two sections:

* Simple
* Advanced Conditions

**Simple conditions**

The Simple section of the Conditional tab allows you to hide or display a component, based on the value of another component.

The Simple section consists of three fields:

1. **This component should Display** - from this dropdown list, choose:
   * **True** if you want to condition when the component displays.
   * **False** if you want to condition when the component hides.
2. **When the form component** - from this dropdown list, choose a component in the form to act as a condition.
3. **Has the value** - type in the value that conditions the component when to display or hide.

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178660-1ea1cb38.webp)

**Advanced conditions**

The Advanced Conditions section allows you to use JavaScript code to make combinations of conditions.

Advanced Logic overrides the results of the Simple conditional logic.

In the JavaScript code section, enter a custom JavaScript code.

The **show** variable must be given a **true** or **false** value. The **data** variable is used to access other components in the form, through the API key.

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178372-1800910f.webp)

## Tutorial

#### **Simple conditions**

To configure a simple condition logic:

1. Open the **Form Designer** in the **Create Form** activity.
2. Drag and drop components into your form. For this example, drag and drop the following:
   1. Two **Checkbox** components.
   2. One **Number** component.
   3. One **Text Field** component. Pay attention to the field keys of each component. You need them to create your conditional logic.
3. Navigate to the Conditional tab of the **Text Field** component and go to the **Simple** section.
   1. **This component should Display** - choose **True** from the dropdown list. This creates the condition under which the Text Field component displays. If you want to hide the component, choose **False**.
   2. **When the form component** - choose the **Number** component from the dropdown list.
   3. **Has the value** - type in the value of the Number component that conditions the Text Field to display.
4. Save the component.

#### **Advanced conditions**

To configure an advanced condition logic:

1. Open the **Form Designer** in the **Create Form** activity.
2. Drag and drop components into your form. For this example, drag and drop the following:
   1. Two **Checkbox** components.
   2. One **Number** component.
   3. One **Text Field** component. Pay attention to the field keys of each component. You need them to create your conditional logic.
3. Navigate to the Conditional tab of the **Number** component.
4. Click **Advanced Conditions** and go to the JavaScript section.
5. If you want to create a condition, use the `show` variable and assign a condition to it using the equal `=` sign. Use the `data.field_key_component` variable to access the data in other form components. For this example, to display the **Number** component, you can type in this script:
   ```
   show = (data.checkbox1 === true && data.checkbox === true)
   ```

   If you want to hide a component under a condition, put an exclamation point `!` after the equal `=` sign and before the condition.
6. For this example, to hide the **Number** component, you can type in this script:
   ```
   show = !(data.checkbox1 === true && data.checkbox === true)
   ```
7. Save the component.

## Sample workflow

To check the complete workflow or to have a future reference, download the [XAML example](https://documentationexamplerepo.blob.core.windows.net/examples/Activities/Conditional_Components_Sample_Workflow.xaml)