Bubble.io Custom States: What They Are and How to Use Them
Custom states are the UI memory that makes Bubble apps interactive. Six patterns every Bubble builder needs to know, step-by-step creation guide, and when to use a state versus when to save to the database.
The UI Memory That Makes Bubble Apps Interactive
A custom state is a temporary value attached to a page or element that exists only in the current browser session — not in the database. Custom states are how Bubble apps remember things during a session without writing to the database: which tab is active, what filter is applied, whether a modal is open, what step of a multi-step form the user is on. Without custom states, dynamic UI interactions are impossible.
What States Are Actually Used For
Tab Navigation
A text state ‘active_tab’ on the page. Each tab button sets it to its own name. Each tab content panel is visible only when active_tab matches its label. Zero page reloads. Clean, fast tab switching.
Search and Filter
The current search term as a text state. Active filter selections as option set states. The repeating group data source reads these states as search constraints. Filtering without page reloads.
Modal Open/Closed
A yes/no state ‘modal_open’. Modal group visible when modal_open = yes. Open button sets it to yes. Close button sets it to no. Simpler than Bubble’s built-in popup for complex modal designs.
Multi-Step Forms
A number state ‘current_step’. Step 1 visible when current_step = 1. Next button sets current_step + 1. Back button sets current_step – 1. Progress bar width = current_step / total_steps * 100.
Selected Record
A ‘selected_project’ state of type Project. Clicking a list row sets selected_project to that row’s Project. The detail panel reads from selected_project. Master-detail layout without page navigation.
Editing Mode
A yes/no state ‘is_editing’. View elements visible when is_editing = no. Edit inputs visible when is_editing = yes. Edit button sets to yes. Save button saves data then sets to no.
Step-by-Step
Click on the page or element you want to attach the state to. In the element editor, scroll to ‘Add a new custom state’. Set the name (e.g. ‘active_tab’), the type (text, number, yes/no, or a data type), and an optional default value.
Action
: Set state
Element
: Page
Custom state
: active_tab
Value
: ‘Tasks’
// Read a state in a condition
Tasks tab visible when
: Page’s active_tab = ‘Tasks’
// Read a state in a data source
Search for Tasks [
project = Page’s selected_project,
status = Page’s active_filter_status
]
| Use Custom State When | Save to Database When |
|---|---|
| The value only matters during the current session | The value needs to persist after the browser closes |
| The value controls UI behaviour | The value is user-generated content |
| The value is a temporary filter selection | The value is needed by other users or for reporting |
| Resetting on page refresh is acceptable | The value must survive page refresh |
Put Long-Lived States on the Page Element
Custom states on an element reset when the element hides and reappears. If your state needs to persist while navigating between tabs or toggling modal visibility, put the state on the Page element. Page states persist for the entire browser session regardless of what happens to child elements.
Build Your Bubble.io App With Expert Help
Pakistan’s leading Bubble.io development team. Multi-tenant SaaS architecture, Stripe billing, and full product builds done right from day one.
