Conditional Logic
Show, hide, enable, or disable fields based on other field values. Build forms that respond to what users actually enter.
How it works
Every Form Kit field has a Condition section in the Properties Panel. Define a rule — when the rule matches, the action fires.
- Select any Form Kit field on your canvas
- In the Properties Panel, scroll to Condition
- Set the Field to watch (use the field's
nameproperty) - Pick an Operator (equals, not equals, contains, etc.)
- Enter the Value to compare against
- Choose the Action: Show Field, Hide Field, Enable Field, or Disable Field
Operators
| Operator | Description | Example |
|---|---|---|
equals | Exact match (case-sensitive) | country equals "US" |
not_equals | Does not match | role not_equals "admin" |
contains | Value includes the string | interests contains "design" |
not_contains | Value does not include | email not_contains "test" |
greater_than | Numeric greater than | age greater_than "18" |
less_than | Numeric less than | quantity less_than "100" |
is_empty | Field has no value | company is_empty |
is_not_empty | Field has any value | company is_not_empty |
Actions
The action determines what happens when the condition matches (or doesn't).
| Action | Match = True | Match = False |
|---|---|---|
| Show Field | Field is visible | Field is hidden |
| Hide Field | Field is hidden | Field is visible |
| Enable Field | Field is interactive | Field is disabled (grayed out) |
| Disable Field | Field is disabled | Field is interactive |
Match mode: All vs. Any
When you have multiple conditions on a single field, the Match setting controls how they combine:
Match All
Every condition must be true for the action to fire. Think of it as AND logic.
Match Any
At least one condition must be true. Think of it as OR logic.
Validation is skipped automatically
When a field is hidden or disabled by a condition, its validation is automatically skipped:
- A required field won't block submission if it's conditionally hidden
- A disabled field won't show validation errors
- Existing errors are cleared when a field becomes hidden or disabled
No layout gaps
When a field is conditionally hidden, Form Kit also hides the wrapper container that Framer creates around each component. This prevents empty gaps from appearing in your layout. The technique uses a CSS :has() selector and works in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+).
Common examples
Show "Company Name" only for business accounts
Field: accountType, Operator: equals, Value: business, Action: Show Field
Show "State" field only for US users
Field: country, Operator: equals, Value: US, Action: Show Field
Disable "Quantity" when out of stock
Field: inStock, Operator: equals, Value: no, Action: Disable Field
Show additional questions for age 18+
Field: age, Operator: greater_than, Value: 17, Action: Show Field