# How to use conditional visibility in Bubble

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

## TL;DR

Control element visibility in Bubble using the Conditional tab on any element, the 'This element is visible on page load' checkbox, and workflow Show/Hide actions. Combine these for role-based content (admin vs user), feature flags, premium content gating, and A/B testing. Always check 'Collapse when hidden' to prevent blank spaces when elements are hidden.

## Implement Conditional Visibility in Bubble

This tutorial covers advanced visibility patterns in Bubble — from basic show/hide conditions to role-based UI, feature flags, and premium content gating. Mastering conditional visibility is key to building apps that adapt to different users and contexts.

## Before you start

- A Bubble account with an active app
- Basic understanding of conditions and dynamic expressions
- User roles configured on the User data type

## Step-by-step guide

### 1. Set Element Visibility Conditions

Select any element and open the Conditional tab. Click '+ Add condition'. Set the 'When' field to a dynamic expression (e.g., 'Current User's role is admin'). In the properties section, set 'This element is visible' to 'yes' (to show) or 'no' (to hide). Multiple conditions can exist — they evaluate top-down with the bottom condition taking priority for conflicting properties.

> Pro tip: Always check 'Collapse when hidden' on the element's Layout properties. Without this, hidden elements still occupy space in the layout, creating blank gaps.

**Expected result:** Elements show or hide based on dynamic conditions.

### 2. Implement Role-Based Visibility

For admin-only content, add the condition: 'When Current User's role is not admin' → This element is visible = no. For premium features: 'When Current User's subscription_plan is free' → visible = no. For logged-out users: 'When Current User is logged out' → visible = no. Apply these conditions to groups containing multiple elements rather than individual elements for efficiency.

**Expected result:** Different users see different content based on their role and subscription.

### 3. Use Show/Hide Workflow Actions

In addition to conditions, use workflow actions for event-driven visibility. Create a workflow: When Button 'Show Details' is clicked → Element Actions → Show → target the details group. When Button 'Hide Details' is clicked → Hide the group. This is useful for toggles, expandable sections, and modals. The hierarchy: workflow Show/Hide overrides conditions, which override the default visible-on-page-load setting.

**Expected result:** Elements toggle visibility in response to user actions.

### 4. Build Feature Flags with Custom States

Create a Custom State on the page called 'show_new_feature' (yes/no). Set it based on your criteria — user role, random assignment for A/B testing, or an admin toggle from the database. Apply conditional visibility: 'When page's show_new_feature is yes' → show the new feature group. This lets you roll out features gradually without redeploying.

**Expected result:** Features can be toggled on/off for specific users using Custom States as feature flags.

### 5. Handle Sensitive Content Security

Important: hiding elements does NOT secure data. Hidden element content is still in the page HTML and accessible to tech-savvy users. For sensitive data, use Privacy Rules to prevent the data from reaching the browser at all. Conditional visibility should be used for UX, not security. Always pair visibility conditions with Privacy Rules for any sensitive information.

**Expected result:** You understand that visibility is for UX and Privacy Rules are for security.

## Complete code example

File: `Workflow summary`

```text
VISIBILITY PATTERNS:

1. ROLE-BASED (Conditional tab)
   Admin panel group → Condition: Current User's role is not 'admin' → visible = no
   Premium feature → Condition: Current User's plan is 'free' → visible = no
   Login prompt → Condition: Current User is logged in → visible = no

2. TOGGLE (Workflow actions)
   Show Details button → Show Group Details
   Hide Details button → Hide Group Details
   Or single toggle: If visible → Hide, If not visible → Show

3. FEATURE FLAGS (Custom State)
   Page state: show_beta_feature (yes/no)
   Set on page load based on User's is_beta_tester field
   Group BetaFeature → Condition: page's show_beta_feature is no → visible = no

4. VISIBILITY PRIORITY ORDER:
   Workflow Show/Hide > Element Conditions > Default 'visible on page load'

IMPORTANT: Always set 'Collapse when hidden' = checked
IMPORTANT: Visibility ≠ Security. Use Privacy Rules for data protection.
```

## Common mistakes

- **Not checking 'Collapse when hidden'** — Hidden elements still occupy layout space without this setting, creating unexplained blank areas. Fix: Check 'Collapse when hidden' on every element that may be conditionally hidden.
- **Using visibility as a security measure** — Hidden elements' content is still in the page HTML. Anyone can inspect the page and see hidden data. Fix: Use Privacy Rules to prevent sensitive data from reaching the browser. Visibility is for UX only.
- **Adding conditions to individual elements instead of container groups** — Managing conditions on 20 separate elements is error-prone. Changing the condition means updating 20 places. Fix: Wrap related elements in a Group and set visibility conditions on the Group.

## Best practices

- Set conditions on container Groups rather than individual elements.
- Always check 'Collapse when hidden' to prevent layout gaps.
- Use Privacy Rules alongside visibility conditions for sensitive data.
- Use Custom States for feature flags and A/B testing visibility.
- Keep visibility logic simple — deeply nested conditions are hard to debug.
- Document your visibility rules with Bubble Notes.

## Frequently asked questions

### Can I animate elements when showing/hiding?

Bubble supports basic transitions. On the element's Conditional tab or in the workflow Show action, you can enable fade transitions. For custom animations, use CSS transitions via the HTML header.

### Does hiding elements improve page performance?

No. Hidden elements are still loaded and rendered in the DOM. They just are not visible. For performance, use conditions on Repeating Group data sources rather than hiding loaded data.

### Can I set visibility based on screen size?

Yes. Use Bubble's responsive breakpoints. In the responsive editor, set elements to be visible or hidden at specific breakpoints (mobile, tablet, desktop).

### How do I test conditional visibility for different roles?

Open incognito browser windows and log in as different test users. Verify each role sees the correct elements.

### Can conditional visibility be used for A/B testing?

Yes. Randomly assign users to a group (store on User) and conditionally show variant A or B based on the assignment. For sophisticated A/B testing setups, RapidDev can implement analytics-tracked experiments.

### Why does my hidden element still show a blank space?

You forgot to check 'Collapse when hidden' in the element's Layout properties. Enable it for all conditionally hidden elements.

---

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