Skip to main content

​
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.
Plan Required - Conditional Logic is an advanced feature and requires a Personal (Pro) or Commercial (Scale) subscription.View Plans & Pricing

​
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
The description under Conditions reads: “Add rules to control this field based on other fields’ values.” - this is exactly what each condition does.

​
Actions

The Action dropdown determines what happens to the current field when the condition is met:
ActionDescription
Show / HideToggles the field’s visibility based on the condition
RequiredMakes the field required only when the condition is true
Read-OnlySets the field to read-only when the condition matches
DisableDisables the field so users cannot interact with it
Value ResetClears 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.
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.

​
Field Types

The Field Type dropdown tells the condition what kind of data the source field contains. This determines which operators are available:
Field TypeDescription
TextFor text-based fields (text, email, textarea, etc.)
NumberFor numeric fields (number, slider, rating, etc.)
DateFor date and time fields

​
Operators

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

​
Text Operators

OperatorDescription
Is EmptyTrue when the field has no value
Is Not EmptyTrue when the field has any value
ContainsTrue when the value includes the specified text
Not ContainsTrue 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 WithTrue when the value begins with the specified text
Ends WithTrue when the value ends with the specified text
Length Greater ThanTrue when the text length exceeds the specified number
Length Less ThanTrue when the text length is below the specified number
RegexTrue 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