Dropdown

A dropdown in Bubble is a UI element that presents a list of choices the user can select from. When clicked, it expands to show the available options, and the user picks one to set the input value.

Dropdowns are one of the most common input elements in any app. Bubble's dropdown element supports static lists, dynamic database options, and option sets, making it flexible for a wide range of use cases.

Key Takeaways

• Selection input: Dropdowns let users pick one option from a predefined or dynamically generated list.
• Dynamic options: You can populate a Bubble dropdown from a database search, an option set, or a list of values you type manually.
• Data types supported: Dropdowns can hold references to data types, text values, numbers, or option set values depending on configuration.
• Workflow integration: The selected value from a dropdown is accessible in workflows, letting you use the choice to filter data or trigger actions.

What is a Dropdown in Bubble?

A dropdown in Bubble is an input element that collapses to show the current selection and expands to reveal a list of options when clicked. It can display text, data type records, or option set values, and returns the user's selection for use in workflows and data filters.

The dropdown element is found in Bubble's UI elements panel in the Design tab.

• Choices source: Set to "option set," "yes/no," or "dynamic choices" from a database search depending on what the dropdown should display.
• Display field: When showing data type records, you choose which field to display as the visible label for each option.
• Placeholder text: Set a hint that appears before the user makes a selection, guiding them on what to choose.

Dropdowns save you time by replacing long lists of radio buttons or manual text inputs with a clean, compact selection element.

How Dropdowns Work in Bubble

A Bubble dropdown evaluates its choices source when the page loads or when conditions change. The options render in the expanded list. When the user selects one, the dropdown stores that value and makes it available to other elements and workflows on the page.

Configuring a dropdown involves three key decisions: where options come from, what is displayed, and what value is returned.

• Static list: Type the options directly into the dropdown's choices field for simple fixed lists like country selections or categories.
• Dynamic database list: Use "Do a search for" as the choices source to pull records from your Bubble database into the dropdown options.
• Option set source: Option sets are the cleanest source for fixed category lists. They are faster than database searches for simple selections.

Understanding Bubble's option sets helps you decide when to use them instead of a database-driven dropdown.

Why Dropdowns Matter for No-Code Apps

Dropdowns make forms faster to complete and harder to fill incorrectly. When users type free text, they introduce spelling variations, inconsistent formatting, and errors. A dropdown standardizes input and keeps your database clean.

Data quality in your app is largely determined by how inputs are constrained. Dropdowns are a primary tool for that.

• Input standardization: Dropdown selections ensure every user picks from the same value set, preventing inconsistent database records.
• Faster completion: Selecting from a list is faster than typing, especially on mobile where typing is slower and error-prone.
• Filtering integration: A dropdown selection can feed directly into a page filter, updating a repeating group's results without a workflow.

Dropdowns are also commonly used as search filters, sorting controls, and step selectors in multi-step forms within Bubble apps.

How to Use Dropdown Values in Bubble Workflows

Access the dropdown's current value in a workflow by referencing the dropdown element's "value" property. This value can be used to filter searches, set fields on database records, or trigger conditional workflow steps.

The selected dropdown value is one of the most useful inputs available in Bubble's workflow system.

• Saving the selection: Use "Make changes to a thing" in a workflow and set a field equal to the dropdown's value to save the selection to your database.
• Filtering repeating groups: Set a repeating group's data source search to constrain by a field matching the dropdown's current value for live filtering.
• Conditional workflows: Add a condition to a workflow step that checks the dropdown's value before running specific actions based on the selection.

Connecting dropdown values to your workflows and data sources is where the element becomes truly useful beyond just being a visual component.

Conclusion

Dropdowns in Bubble are simple to add but powerful when connected to your database and workflows. They enforce data consistency, improve user experience, and enable dynamic filtering that makes your app feel responsive and smart. Getting comfortable with all three choices sources, static, option set, and dynamic, opens up most of what you will need dropdowns to do. 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

What is a dropdown in Bubble?

A dropdown in Bubble is an input element that shows a collapsible list of options the user can select from, supporting static, option set, and database-driven choices.

How do I populate a dropdown with database records in Bubble?

Set the dropdown's choices source to "Do a search for" and choose the data type. Then select which field displays as the label for each record.

Can I make a Bubble dropdown dependent on another dropdown's selection?

Yes. Set the second dropdown's choices source to a search constrained by the first dropdown's current value. The options update when the first changes.

How do I get the selected dropdown value in a Bubble workflow?

In the workflow editor, reference the dropdown element and select "value" to access what the user has currently selected.

What is the difference between a dropdown and a search box in Bubble?

A dropdown shows a fixed or dynamic list. Bubble's search box element allows users to type and filter options, making it better for long lists.

Can a dropdown in Bubble show images alongside text?

Not natively. The standard dropdown shows text labels only. For image-based selection, you typically use a repeating group styled as a selector instead.