# How to apply conditional formatting for better UX in Bubble.io: Step-by-Step Gui

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

## TL;DR

Conditional formatting makes Bubble interfaces feel dynamic and professional by changing element colors, borders, and visibility based on data values. This tutorial covers status-based color coding, selected row highlighting in Repeating Groups, form validation visual feedback, and building automatic status badges — all using Bubble's Conditional tab.

## Overview: Conditional Formatting for Better UX in Bubble

Conditional formatting lets elements change appearance based on data, user actions, or page state. Status fields turn green for Active and red for Cancelled. Selected rows highlight. Invalid inputs show red borders. This tutorial covers the most impactful conditional formatting patterns.

## Before you start

- A Bubble account with an app
- Basic understanding of the Conditional tab
- Data Types with status or category fields
- Familiarity with Bubble's Property Editor

## Step-by-step guide

### 1. Apply status-based color coding

Select a Text or Group displaying a status. Open the Conditional tab. Add: When Status is Active → Background: green (#22C55E), Font: white. When Status is Pending → Background: yellow (#EAB308). When Status is Cancelled → Background: red (#EF4444). Add padding and border-radius for a badge look.

> Pro tip: Add a Color attribute to your Status Option Set. Then one condition handles all: Background = Status's Color.

**Expected result:** Status badges display the correct color automatically based on data values.

### 2. Highlight selected rows in Repeating Groups

Create a Custom State on the page called selected_item of the RG type. When a cell is clicked, set the state to Current cell's item. On the cell Group, add condition: When selected_item is Current cell's item → Background: light blue, Border: 2px solid blue. This highlights the selected row and deselects others.

**Expected result:** Clicking a row highlights it while removing highlight from others.

### 3. Add visual validation feedback on forms

On an email input, add conditions: When value is not empty AND does not contain @ → Border: red. When value contains @ and . → Border: green. Add an error Text element visible only when invalid. Disable the Submit button when any input is invalid using a condition: Not clickable when required inputs fail validation.

**Expected result:** Form inputs show green or red borders with error messages for instant validation feedback.

### 4. Create navigation active states

On navigation menu items, add a condition: When Current page name is dashboard → Background: active color, Font weight: bold. This highlights the current page in the navigation. For tab-based navigation using Custom States, add: When page's selected_tab is this tab → Background: active color.

**Expected result:** Navigation items visually indicate the current page or selected tab.

### 5. Build conditional progress indicators

Create step circles in a row. Add conditions to each: When page's current_step >= this step number → Background: blue (completed), else gray. Connect with line elements. This works for multi-step forms, order tracking, and onboarding flows. For complex dynamic UI systems, RapidDev can help design custom conditional patterns.

**Expected result:** A progress indicator updates automatically based on the current step.

## Complete code example

File: `Workflow summary`

```text
CONDITIONAL FORMATTING — PATTERNS
==================================

STATUS BADGES:
  Condition per status value → BG color + Font color
  Or: Single condition using Option Set Color attribute

SELECTED ROW:
  Custom State: selected_item
  Cell click: Set state = Current cell's item
  Cell condition: When selected_item is Current cell → highlight

FORM VALIDATION:
  Invalid: Border red, error text visible
  Valid: Border green
  Submit: Not clickable when invalid

ACTIVE NAVIGATION:
  When Current page name is [page] → active style

PROGRESS:
  Each step circle: When current_step >= this step → blue
  Default: gray

CONDITION ORDER: Top = general, Bottom = specific (overrides)
```

## Common mistakes

- **Forgetting that bottom conditions override top conditions** — When multiple true conditions set the same property, the lowest wins. Fix: Order conditions from general (top) to specific (bottom).
- **Using searches inside conditions** — Database queries in conditions run on every evaluation, wasting WUs. Fix: Reference existing data (Parent group, Custom States, Option Sets) instead of new searches.
- **Not testing with all possible data values** — Edge cases like empty or null values may produce incorrect styling. Fix: Test every condition with all possible values including empty states.

## Best practices

- Use Option Set Color attributes for centralized color management
- Order conditions general to specific — bottom overrides top
- Avoid searches inside conditions — use existing data references
- Add Collapse when hidden on conditionally visible elements
- Test with all data values including edge cases
- Use consistent color schemes: green=good, yellow=warning, red=error
- Keep conditions per element under 6 for maintainability

## Frequently asked questions

### Can I animate conditional changes?

Bubble has limited built-in animation. Use CSS transitions via an HTML element targeting the element's ID for smooth effects.

### How many conditions per element?

No hard limit, but more than 5-6 becomes hard to maintain. Use Option Set attributes to simplify.

### Do conditions affect performance?

Conditions with static data are free. Conditions with database searches consume WUs. Keep conditions lightweight.

### Can I conditionally change a data source?

Yes. Add a condition changing the Data source property to a different search. Useful for switching between views.

### How do I debug conditions?

Use the step-by-step debugger. Click the element to inspect which conditions are true and what properties they set.

### Can RapidDev help design conditional UI?

Yes. RapidDev designs professional conditional formatting including dynamic theming, status indicators, and interactive tables.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/apply-conditional-formatting-better-ux-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/apply-conditional-formatting-better-ux-bubble