Custom State

A Custom State in Bubble is a temporary variable attached to an element that stores data during a user's session. It does not save to the database and resets when the page reloads.

Custom States are how Bubble apps manage in-memory data, like which tab is selected, whether a menu is open, or what step a user is on in a multi-step form. They make pages interactive without database reads or writes.

Key Takeaways

• Temporary storage: Custom States hold data in memory for the current session only. They reset on page reload and never write to the database.
• Attached to elements: Every Custom State belongs to a specific element, like a group or a page, and is accessed by referencing that element in expressions.
• Typed values: When you create a Custom State, you choose its data type, such as text, number, yes/no, or a database data type, which determines what it can hold.
• Changed by workflows: Workflows use the "Set state of element" action to change a Custom State's value, and any element referencing it updates instantly.

What is Custom State in Bubble?

A Custom State in Bubble is a temporary variable assigned to an element that stores a value during the current page session. It can hold any data type and is updated by workflows. Other elements read its value through dynamic expressions to respond to user interactions in real time.

Think of a Custom State as a sticky note on an element. You write a value on it during a workflow and other elements can read it to decide how to behave.

• Session-only: Custom States exist only while the user is on the page. Navigating away or reloading the page resets all states to their default values.
• Any data type: States can hold text, numbers, booleans, dates, lists, or even records from a database data type, giving them a wide range of uses.
• Multi-element access: Any element or expression on the page can read a Custom State from any other element using the element reference in an expression.

Custom States are one of the most versatile tools in Bubble's toolkit. Once you understand them, you will find uses for them across almost every page you build.

How Custom State Works in Bubble

To use a Custom State, open any element's properties and go to the States tab to define a new state with a name and data type. Then use "Set state of element" in a workflow to change its value, and reference that state in expressions on other elements to read and react to it.

Setting up a Custom State takes less than a minute. The state definition is separate from its use, so you define it first and then wire it into workflows and expressions.

• Define the state: In the element's States tab, click "Add a new state," give it a name, choose its type, and optionally set a default value.
• Set in a workflow: Add a "Set state of element" action to any workflow, select the element and the state name, and define what value to assign.
• Read in expressions: In any dynamic expression on the page, reference the element and then the state name to read the current value wherever you need it.

Bubble's state system is what makes single-page interactions possible without hitting the database on every user action. It is a key performance advantage when used correctly.

Why Custom State Matters for No-Code Apps

Custom States let you build interactive, stateful UI without database overhead. They are essential for tab navigation, multi-step flows, toggles, filters, and any feature that needs to remember something the user just did without writing to a database.

Without Custom States, every interactive behavior would require a database read or write. That would be slow, expensive in terms of Bubble capacity, and unnecessary for session-only data.

• Tab and menu navigation: Store the currently selected tab name in a Custom State and use it to conditionally show the right content panel.
• Multi-step forms: Track the current step number in a state and show or hide each step's group based on whether the state matches the step's number.
• Filter panels: Store the user's selected filter options in states and apply them as conditions in a Repeating Group's search without any database write.

Apps that use Custom States well feel fast and responsive. Pages update instantly in response to user actions because no server round-trip is needed for temporary UI changes.

Common Custom State Patterns in Bubble

The most common Custom State patterns are tab switching, modal open/close toggling, step tracking in multi-step flows, and storing a selected item from a Repeating Group for use in a detail panel or form.

These four patterns appear in most Bubble apps. Learning them gives you a strong foundation for building interactive pages efficiently.

• Tab switching: A page-level state holds the active tab name. Each tab's content group is visible only when the state matches its tab identifier.
• Modal toggling: A yes/no state on a group controls a floating panel's visibility. A button sets it to true, and a close action sets it back to false.
• Step tracking: A number state tracks the current step in a form or wizard. Next and back buttons increment or decrement the state value.
• Selected item: A state of type "your data type" stores the record a user clicked in a list, which a detail panel then reads to display the full record.

Once these patterns are in your toolkit, you can build almost any interactive layout in Bubble without reaching for complex workarounds or unnecessary database operations.

Conclusion

Custom States in Bubble are a lightweight but powerful tool for building interactive pages that respond to users in real time. They keep your app fast by avoiding unnecessary database operations for session-only data. At LOW/CODE Agency, we've helped 450+ clients build and scale apps on Bubble and other no-code platforms. Our clients include global brands like Medtronic, American Express, Coca-Cola, Zapier, and Sotheby's.

Frequently Asked Questions

Does a Custom State in Bubble save data to the database?

No. Custom States are session-only and never write to the database. They reset when the user reloads the page or navigates away.

Which element should I attach a Custom State to in Bubble?

Attach it to the element that makes logical sense as the owner. The page element is a common choice for states that multiple sections of the page need to read.

Can a Custom State hold a list of values in Bubble?

Yes. When creating the state, check the "List" option. The state can then hold multiple values of the chosen type, updated by list-based workflow actions.

How do I reset a Custom State to its default value in Bubble?

Add a "Set state of element" workflow action and leave the value field empty or explicitly set it to the default value you want the state to return to.

Can Custom States be read by elements on other pages in Bubble?

No. Custom States are scoped to the page they are defined on. They cannot be accessed from a different page or a different browser session.

Can I use a Custom State to store a database record temporarily?

Yes. Set the state's data type to match a data type from your database. The state will hold the record in memory without saving or modifying it.