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.
Prerequisites
- 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
Use element conditionals for visual changes
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.
Add Only When conditions to workflow actions
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.
Create auto-triggered workflows with Do when condition is true
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.
Combine conditions with and/or logic
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.
Understand condition precedence and best practices
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 working example
1CONDITIONAL STATEMENTS — WORKFLOW SUMMARY2==========================================34TYPE 1: ELEMENT CONDITIONALS (Design tab → Conditional tab)5 Example: Button Submit6 Condition 1: When Input Email's value is empty7 → This element isn't clickable: yes8 → Background color: gray9 Condition 2: When Input Email's value is not empty10 → This element isn't clickable: no11 → Background color: blue12 Precedence: bottom condition wins for conflicting properties1314TYPE 2: ONLY WHEN (Workflow actions)15 Example: Submit workflow16 Action 1: Create Order (no condition — always runs)17 Action 2: Send email18 Only when: Checkbox Send Confirmation is checked19 Action 3: Navigate to confirmation20 (runs regardless of whether Action 2 ran)21 Note: skipped actions return empty for Result of step X2223TYPE 3: DO WHEN CONDITION IS TRUE (Workflow events)24 Example: Auto-save draft25 Condition: Input Title's value is not empty26 and Input Title's value has been changed27 Run: Every time28 Action: Make changes to Current Draft29 title = Input Title's value30 Warning: "Every time" can fire frequently — add throttling3132COMBINING CONDITIONS:33 AND: both must be true34 Current User's role is Admin and Status is Active35 OR: either can be true 36 User's role is Admin or User's role is Manager37 Nested: use parentheses mentally38 (Admin or Manager) and Status is Active3940PRECEDENCE RULES:41 1. Workflow actions override element conditionals42 2. Element conditionals override default properties43 3. Bottom condition wins over top condition (same element)44 4. Only When skips one action, not the whole workflowCommon mistakes when adding conditional statements in Bubble.io: Step-by-Step Guide
Why it's a problem: Putting sensitive data in elements hidden by conditionals
How to avoid: Use Privacy Rules on the data type to prevent the data from being sent to the browser at all.
Why it's a problem: Using Do when condition is true with Every time on a rapidly changing expression
How to avoid: Use Just once where possible, or add debouncing logic with a custom state and pause.
Why it's a problem: Expecting the workflow to stop when an Only When condition is false
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and need to understand how conditional logic works. What are the three types of conditions, how do they differ, and what are the common gotchas with precedence and skipped actions?
Add conditional logic to my app. Set up element conditionals for a submit button that changes color when the form is valid, add Only When conditions to a workflow that optionally sends an email, and create a Do when condition is true event that auto-saves draft content.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation