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

# Conditional Logic

> Add rules to control form fields based on other fields' values - show/hide, require, disable, and more.

# Conditional Logic

**Conditional Logic** lets you create dynamic forms that respond to user input in real time. You can show or hide fields, make them required, set them to read-only, disable them, or reset their values - all based on what the user enters in other fields.

This feature is available directly in the **component side panel** for each field in your form.

<Warning>
  **Plan Required** - Conditional Logic is an advanced feature and requires a **Personal (Pro)** or **Commercial (Scale)** subscription.

  [View Plans & Pricing](/plans/overview)
</Warning>

## How It Works

Each form field has a **Conditions** section in its side panel. You can add one or more condition rules that control the field's behavior based on another field's value.

A condition rule consists of:

1. **Action** - What happens when the condition is met
2. **Logic** - How multiple conditions combine (AND / OR)
3. **Source Field** - The field whose value is being watched
4. **Field Type** - The data type of the source field
5. **Operator** - The comparison to evaluate

## Adding a Condition

1. Select a form field on the Framer canvas
2. In the **side panel**, scroll to the **Conditions** section
3. Click the **Conditions** button (shows "0 Items" by default)
4. Click **Add Condition** to create a new rule
5. Configure the Action, Source Field, Field Type, and Operator

<Tip>
  The description under Conditions reads: *"Add rules to control this field based on other fields' values."* - this is exactly what each condition does.
</Tip>

## Actions

The **Action** dropdown determines what happens to the current field when the condition is met:

| Action          | Description                                              |
| --------------- | -------------------------------------------------------- |
| **Show / Hide** | Toggles the field's visibility based on the condition    |
| **Required**    | Makes the field required only when the condition is true |
| **Read-Only**   | Sets the field to read-only when the condition matches   |
| **Disable**     | Disables the field so users cannot interact with it      |
| **Value Reset** | Clears the field's value when the condition is triggered |

## Logic: AND vs OR

When you add multiple conditions to a single field, use the **Logic** toggle to decide how they combine:

* **AND** - All conditions must be true for the action to trigger
* **OR** - Any one condition being true will trigger the action

## Source Field

The **Source Field** is the name of the field whose value you want to watch. It must match the field's **Name** property exactly.

For example, if you have a field named `email`, enter `email` as the source field to base your condition on that field's value.

<Info>
  Make sure the Source Field name matches the target field's **Name** property exactly (case-sensitive). You can find a field's name in its properties panel.
</Info>

## Field Types

The **Field Type** dropdown tells the condition what kind of data the source field contains. This determines which operators are available:

| Field Type | Description                                         |
| ---------- | --------------------------------------------------- |
| **Text**   | For text-based fields (text, email, textarea, etc.) |
| **Number** | For numeric fields (number, slider, rating, etc.)   |
| **Date**   | For date and time fields                            |

## Operators

The **Operator** defines the comparison logic. Available operators depend on the selected Field Type.

### Text Operators

| Operator                         | Description                                                  |
| -------------------------------- | ------------------------------------------------------------ |
| **Is Empty**                     | True when the field has no value                             |
| **Is Not Empty**                 | True when the field has any value                            |
| **Contains**                     | True when the value includes the specified text              |
| **Not Contains**                 | True when the value does not include the specified text      |
| **Exact Match (Case Sensitive)** | True when the value matches exactly, including letter casing |
| **Match (Case Insensitive)**     | True when the value matches regardless of letter casing      |
| **Starts With**                  | True when the value begins with the specified text           |
| **Ends With**                    | True when the value ends with the specified text             |
| **Length Greater Than**          | True when the text length exceeds the specified number       |
| **Length Less Than**             | True when the text length is below the specified number      |
| **Regex**                        | True when the value matches a regular expression pattern     |

### Number Operators

Number fields support standard numeric comparisons such as equal to, not equal to, greater than, less than, and range checks - along with **Is Empty** and **Is Not Empty**.

### Date Operators

Date fields support comparisons like before, after, and exact date matching - along with **Is Empty** and **Is Not Empty**.

## Example: Show a Field Based on Another Field's Value

Here is a common use case - showing an "Other" text field only when a user selects "Other" from a dropdown.

1. Add a **Dropdown** field (e.g., named `reason`) with options including "Other"
2. Add a **Text** field (e.g., named `other_reason`) below it
3. Select the `other_reason` field and open its **Conditions**
4. Add a condition:
   * **Action**: Show / Hide
   * **Source Field**: `reason`
   * **Field Type**: Text
   * **Operator**: Exact Match (Case Sensitive)
   * **Value**: `Other`

Now the "Other reason" field only appears when the user selects "Other" from the dropdown.

## Example: Make a Field Required Based on Input

You can make a field conditionally required. For example, require a phone number only when the user enters a company name:

1. Select the `phone` field and open its **Conditions**
2. Add a condition:
   * **Action**: Required
   * **Source Field**: `company`
   * **Field Type**: Text
   * **Operator**: Is Not Empty

The phone field becomes required only when the company field has a value.

## Combining Multiple Conditions

You can add multiple conditions to a single field and combine them with **AND** or **OR** logic.

**AND example** - Show a discount code field only when the user is from the US AND has selected the "Enterprise" plan:

* Condition 1: Source `country`, Operator: Exact Match, Value: `US`
* Condition 2: Source `plan`, Operator: Exact Match, Value: `Enterprise`
* Logic: **AND**

**OR example** - Disable a field when either of two fields is empty:

* Condition 1: Source `email`, Operator: Is Empty
* Condition 2: Source `name`, Operator: Is Empty
* Logic: **OR**

## Things to Keep in Mind

* Source Field names are **case-sensitive** - make sure they match exactly
* Conditions are evaluated in real time as the user fills out the form
* You can add multiple conditions to a single field for complex rules
* The **Value Reset** action is useful for clearing dependent fields when a parent field changes
* Conditional Logic works alongside all other field settings (validation, placeholder, etc.)

## Next Steps

* [Form Fields](/creating-forms/form-fields) - Learn how to add and configure fields
* [Basic Fields](/field-types/basic-fields) - See all available basic field types
* [Advanced Fields](/field-types/advanced-fields) - Explore advanced field types
* [Plans & Pricing](/plans/overview) - Check which plan includes Conditional Logic