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.
Prerequisites
- 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
Apply status-based color coding
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.
Highlight selected rows in Repeating Groups
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.
Add visual validation feedback on forms
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.
Create navigation active states
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.
Build conditional progress indicators
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 working example
1CONDITIONAL FORMATTING — PATTERNS2==================================34STATUS BADGES:5 Condition per status value → BG color + Font color6 Or: Single condition using Option Set Color attribute78SELECTED ROW:9 Custom State: selected_item10 Cell click: Set state = Current cell's item11 Cell condition: When selected_item is Current cell → highlight1213FORM VALIDATION:14 Invalid: Border red, error text visible15 Valid: Border green16 Submit: Not clickable when invalid1718ACTIVE NAVIGATION:19 When Current page name is [page] → active style2021PROGRESS:22 Each step circle: When current_step >= this step → blue23 Default: gray2425CONDITION ORDER: Top = general, Bottom = specific (overrides)Common mistakes when applying conditional formatting for better UX in Bubble.io: Step-by-Step Gui
Why it's a problem: Forgetting that bottom conditions override top conditions
How to avoid: Order conditions from general (top) to specific (bottom).
Why it's a problem: Using searches inside conditions
How to avoid: Reference existing data (Parent group, Custom States, Option Sets) instead of new searches.
Why it's a problem: Not testing with all possible data values
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add conditional formatting to my Bubble.io app with status badges, row highlighting, and form validation feedback. Show me how to set up the conditions.
Add conditional formatting to a Repeating Group showing orders. Each row needs a colored status badge and the selected row should highlight in blue.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation