# How to add conditional statements in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Master the three types of conditional statements in Bubble: element conditionals in the Conditional tab for visual changes, Only When conditions on workflow actions for execution control, and Do when condition is true for auto-triggered events. This covers the fundamentals of and/or logic, condition precedence, and common patterns.

## Overview: Conditional Statements in Bubble

This tutorial covers all three types of conditional logic in Bubble. Element conditionals change visual properties dynamically, Only When conditions control whether workflow actions execute, and Do when condition is true creates auto-triggered workflows. Understanding these three mechanisms is fundamental to building any dynamic Bubble app.

## Before you start

- A Bubble account with an existing app
- At least one page with elements and workflows
- Basic understanding of Bubble's Design and Workflow tabs
- Familiarity with dynamic expressions

## Step-by-step guide

### 1. Use element conditionals for visual changes

Select any element on the Design tab and click the Conditional tab in the Property Editor. Click Define another condition. Enter a When expression that returns yes/no (e.g., When Current User's role is Admin). Below it, select the property to change (background color, visibility, font, text, data source, etc.) and set the new value. You can add multiple conditions — they are evaluated top to bottom, with the bottom condition overriding conflicting properties from conditions above.

> Pro tip: Use conditions on Groups rather than individual elements. Changing a Group's visibility hides all its children, which is more efficient than conditioning each element.

**Expected result:** Elements change their visual properties dynamically based on conditions you define.

### 2. Add Only When conditions to workflow actions

Go to the Workflow tab and click on any action within a workflow. At the bottom of the action's property panel, find the Only when field. Click it and build a yes/no expression. The action will only execute if this expression evaluates to yes. If it evaluates to no, the action is skipped but the workflow continues to the next action. This is different from workflow-level conditions which stop the entire workflow.

**Expected result:** Individual workflow actions are conditionally skipped based on Only When expressions.

### 3. Create auto-triggered workflows with Do when condition is true

Go to the Workflow tab and select the page events area. Click Click here to add an event and choose Do when condition is true. Define the condition expression (e.g., Custom State count > 5). Choose whether it should run Just once per page load or Every time the condition becomes true. Add actions that execute automatically when the condition is met. Be careful with Every time — frequent triggering can cause performance issues.

**Expected result:** A workflow triggers automatically whenever its condition expression becomes true.

### 4. Combine conditions with and/or logic

In any condition field, you can chain multiple checks with the and and or operators. For example: Current User's role is Admin and Current Page Thing's status is Active. This requires both conditions to be true. Use or for either/or logic: Current User's role is Admin or Current User's role is Manager. Bubble evaluates and before or by default. Use parentheses in complex expressions to control evaluation order.

**Expected result:** Complex conditions with multiple checks using and/or logic work correctly.

### 5. Understand condition precedence and best practices

Key rules: on elements, multiple conditions read top-down with the bottom one winning for conflicting properties. Workflow actions with Only When that are skipped still allow subsequent actions to run (but Result of step X will be empty). Do when condition is true fires client-side and will not run if the page is closed. Visibility precedence: Actions override Conditions override Default visible on page load. Never put sensitive data in hidden elements — tech-savvy users can still access it. For complex conditional logic architectures, consider working with RapidDev.

**Expected result:** You understand how Bubble evaluates conditions and can avoid common precedence mistakes.

## Complete code example

File: `Workflow summary`

```text
CONDITIONAL STATEMENTS — WORKFLOW SUMMARY
==========================================

TYPE 1: ELEMENT CONDITIONALS (Design tab → Conditional tab)
  Example: Button Submit
    Condition 1: When Input Email's value is empty
      → This element isn't clickable: yes
      → Background color: gray
    Condition 2: When Input Email's value is not empty
      → This element isn't clickable: no
      → Background color: blue
  Precedence: bottom condition wins for conflicting properties

TYPE 2: ONLY WHEN (Workflow actions)
  Example: Submit workflow
    Action 1: Create Order (no condition — always runs)
    Action 2: Send email
      Only when: Checkbox Send Confirmation is checked
    Action 3: Navigate to confirmation
      (runs regardless of whether Action 2 ran)
  Note: skipped actions return empty for Result of step X

TYPE 3: DO WHEN CONDITION IS TRUE (Workflow events)
  Example: Auto-save draft
    Condition: Input Title's value is not empty
             and Input Title's value has been changed
    Run: Every time
    Action: Make changes to Current Draft
      title = Input Title's value
  Warning: "Every time" can fire frequently — add throttling

COMBINING CONDITIONS:
  AND: both must be true
    Current User's role is Admin and Status is Active
  OR: either can be true  
    User's role is Admin or User's role is Manager
  Nested: use parentheses mentally
    (Admin or Manager) and Status is Active

PRECEDENCE RULES:
  1. Workflow actions override element conditionals
  2. Element conditionals override default properties
  3. Bottom condition wins over top condition (same element)
  4. Only When skips one action, not the whole workflow
```

## Common mistakes

- **Putting sensitive data in elements hidden by conditionals** — Hidden elements are still in the page HTML. Users with browser dev tools can see the content Fix: Use Privacy Rules on the data type to prevent the data from being sent to the browser at all.
- **Using Do when condition is true with Every time on a rapidly changing expression** — This creates a loop that fires many times per second, freezing the browser and consuming resources Fix: Use Just once where possible, or add debouncing logic with a custom state and pause.
- **Expecting the workflow to stop when an Only When condition is false** — Only When on an action only skips that action. Subsequent actions still run, potentially with empty data Fix: To stop the entire workflow, put the condition at the workflow event level or use Terminate this workflow.

## Best practices

- Use element conditionals for visual changes and Only When for workflow logic
- Apply conditions to Groups rather than individual elements for efficiency
- Remember that bottom conditions win for conflicting properties on the same element
- Use Privacy Rules instead of visibility conditions for security-sensitive data
- Be cautious with Do when condition is true set to Every time
- Put conditions at the workflow level when all actions share the same criteria
- Test conditions with the Debugger to verify which path executes

## Frequently asked questions

### Can I nest conditions (if/else if/else)?

Bubble does not have explicit if/else blocks. Use multiple conditions on the same element with specific When expressions. The bottom matching condition takes precedence, effectively creating an else-if chain.

### Do conditions affect workload units?

The conditions themselves are free (client-side). However, if a condition expression includes a Do a search for, that search runs every time the condition is evaluated and consumes WUs.

### Can I copy conditions between elements?

Not directly. You need to recreate conditions manually on each element. For repeated patterns, use Styles with built-in conditions or Reusable Elements.

### How do I debug which condition is active?

Use the Debugger in Preview mode. Click on an element to see which conditions are evaluating to true and which properties are being overridden.

### Can RapidDev help with complex conditional logic?

Yes. RapidDev specializes in Bubble development and can help architect complex conditional systems including role-based interfaces, multi-step form logic, and dynamic pricing rules.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-conditional-statements-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-conditional-statements-in-bubble