MARKETPLACE
PLUGINS
SIMPLE SEARCHABLE DROPDOWN
Simple Searchable Dropdown logo

Simple Searchable Dropdown

Published March 2026
   •    Updated today

Plugin details

A smarter dropdown bundle for Bubble.io. Search, scroll, and select from any data type or static list - single or multi-select - with full styling control, rich states, and events that work.
Link To Demo: https://stein-plugins.bubbleapps.io/version-test/searchable-dropdown/1774269983958x785405297703871900

Link To Editor: https://bubble.io/page?id=stein-plugins&tab=Design&name=searchable-dropdown&type=page&ai_generated=true&elements=bTGTC

Search & Filter

· Instant client-side filtering as the user types
· Searches against the full rendered label by default - including any Label Custom template output - no extra configuration needed
· Case-insensitive search across all option labels
· Optional additional search fields for searching by hidden fields not shown in the label
· "No results found" state when nothing matches
· Configurable maximum visible items before scrolling

Data Sources

· Connect any Bubble data type directly - no field name typing required
· Static comma-separated options for simple use cases
· Supports both dynamic and static sources simultaneously
· Smart label resolution across common field name patterns
· Label Custom field for building composite labels from multiple fields using [field_key] tokens
· Dot-notation support in Label Custom for nested data types and option sets - e.g. [restaurant_custom_category.name_text] or [status_order_status.display]

Selection

· Single option selection with full Bubble thing returned as state (Searchable Dropdown)
· Multi-select with checkbox indicators and full list of Bubble things returned as state (Multi Dropdown)
· Three display modes for multi-select: comma-separated values, removable tags, or a count summary
· Select All / Deselect All toggle for quick bulk selection (Multi Dropdown)
· One-click clear button to deselect
· Backspace key removes the last selected item (Multi Dropdown)
· Initial value support for pre-populated forms - single value or list
· Selected values persist correctly across Bubble state updates
· Selected items sort to the top of the list when the dropdown opens (Multi Dropdown)

Validation

· Optional Required mode - exposes is_valid state to block form submission or trigger error display
· is_valid is yes by default when not required, and becomes no when required and empty

Styling

· Inherits font, size, color, border, and border radius from Bubble's style panel - no double-styling
· Separate background color controls for input and dropdown list
· Custom chevron color and size
· Custom hover highlight color
· Custom checkbox color (Multi Dropdown)
· Custom dropdown text color
· Four list styles: Flat, Divided, Striped, Inset
· Configurable item padding
· Tag styling: background color, text color, border color, border width, border radius, and spacing (Multi Dropdown)
· Scrollbar styles: Auto, Thin, Hidden
· Disabled state with visual opacity feedback

UX Details

· Dropdown renders using fixed positioning - never clipped by Bubble groups or popups
· Smooth chevron rotation animation on open/close
· Full keyboard navigation - arrow keys, enter to select, escape to close
· Loading spinner shown while dynamic data is being fetched
· Fit to value mode for multi-line selected value display
· Auto-growing input when using tags or comma-separated wrapping display (Multi Dropdown)
· Outside click closes the dropdown automatically
· Reset action to clear selections and restore initial state

Searchable Dropdown - States Exposed

· selected_option - the full Bubble thing selected · selected_static_item - label text of the selected option
· search_value - current text typed in the search box
· is_open - whether the dropdown is currently open
· is_disabled - whether the dropdown is disabled
· is_focused - whether the input has focus
· is_valid - false when required is enabled and no option is selected

Multi Dropdown - States Exposed

· selected_dynamic_items - list of full Bubble things selected · selected_static_items - comma-separated label text of all selected options · selected_count - number of items currently selected
· search_value - current text typed in the search box
· is_open - whether the dropdown is currently open
· is_disabled - whether the dropdown is disabled
· is_focused - whether the input has focus
· is_valid - false when required is enabled and no option is selected

Searchable Dropdown - Events Triggered

· option_selected - fires when the user picks an option
· option_cleared - fires when the user clears the selection
· search_changed - fires on every keystroke
· dropdown_opened - fires when the list opens
· dropdown_closed - fires when the list closes

Multi Dropdown - Events Triggered

· option_selected - fires when the user selects an option
· option_deselected - fires when the user deselects an option
· selections_changed - fires on every select or deselect
· selections_confirmed - fires when the dropdown closes and selections have changed since it opened
· search_changed - fires on every keystroke
· dropdown_opened - fires when the list opens
· dropdown_closed - fires when the list closes

$8

One time  •  Or  $3/mo

stars   •   0 ratings
12 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Stein & Company logo
Stein & Company
Joined 2020   •   6 Plugins
View contributor profile

Instructions

Step 1 - Install the Plugin
Install the plugin from the Bubble plugin marketplace. Add the Searchable Dropdown element for single-select or the Multi Dropdown element for multi-select to your page like any other visual element.

Step 2 - Set Your Data Source

For a dynamic Bubble data type:

Set Data Source Type to Dynamic
Connect Options List to a search or list of your data type (e.g. Search for Products)
Set Option Type to your data type (e.g. Product)
Set Label Field to the field you want displayed (e.g. name)
For a composite or nested label:
Leave Label Field blank and use Label Custom instead. Build the label using [field_key] tokens in Bubble's internal fieldname_type format - e.g. [name_text] or [order_number_number]. [name_text]. To display a field from a related data type or option set, use dot-notation - e.g. [restaurant_custom_category.name_text] or [status_option_category.display]. Not sure of the field key? Check your data type in Bubble's editor.

For a static list:

Set Data Source Type to Static
Enter your options in Static Options as a comma-separated list
Example: Small,Medium,Large,Extra Large

Step 3 - Style It

Both elements inherit your font, text color, border, and border radius directly from Bubble's built-in style panel - style it there just like any native element. Use the plugin properties for dropdown-specific overrides:
· List Background Color
· Dropdown Border Radius
· Chevron Color & Size
· Hover Color
· Dropdown Text Color
· List Style (Flat, Divided, Striped, Inset)
· Item Padding
· Scrollbar Style
· Dropdown Max Height

Multi Dropdown only:
· Checkbox Color
· Tag Background Color
· Tag Text Color · Tag Border Color
· Tag Border Width
· Tag Border Radius
· Tag Spacing

Step 4 - Read the Selected Value

Searchable Dropdown:
For dynamic data use the state selected_option - this returns the full Bubble thing so you can access any field on it e.g. selected_option's name, selected_option's price, selected_option's unique id.
For static data use the state selected_static_item - this returns the label text as a string.

Multi Dropdown:
For dynamic data use the state selected_dynamic_items - this returns a list of full Bubble things.
For static data use the state selected_static_items - this returns all selected labels as a comma-separated string.
Use selected_count to display or check how many items are currently selected.

Step 5 - Configure Display Mode (Multi Dropdown)

The Multi Dropdown offers two display modes:
· Values - shows the selected items in the input. Choose Value Display Style: Comma for a comma-separated wrapping list, or Tags for removable tag chips with full styling control.
· Count - shows a summary like "3 options selected". Customize the suffix text with the Count Text field.

Enable Show Select All to add a Select All / Deselect All toggle at the top of the list.

Step 6 - Trigger Workflows

Searchable Dropdown:
· option_selected - save selection to DB, navigate, show a popup
· option_cleared - reset dependent fields
· search_changed - trigger a server-side search
· dropdown_opened - log analytics, show helper text
· dropdown_closed - validate form, hide helper text

Multi Dropdown:
· option_selected - fires when the user selects an option
· option_deselected - fires when the user deselects an option
· selections_changed - fires on every select or deselect
· selections_confirmed - fires when the dropdown closes and selections changed during that session
· search_changed - trigger a server-side search
· dropdown_opened - log analytics, show helper text
· dropdown_closed - validate form, hide helper text

Tips & Best Practices

Pre-selecting a value on page load - use Initial Value (Searchable Dropdown) or Initial Values (Multi Dropdown) to set a pre-selected thing or list. For static sources, use the Initial Values Static field with comma-separated labels. This only runs once on load.
Resetting the dropdown - use the Reset element action to clear all selections and restore the element to its initial state. This works for both elements.
Disabling the dropdown - set the Disabled property to yes dynamically using a Bubble condition. The element will appear faded and be non-interactive.
Using inside a popup - the dropdown list renders outside your popup's container using fixed positioning, so it will never be clipped.
Large data sets - use Max Items to limit how many options render at once.
Fit to Value mode - enable this if your selected labels can be long and you don't want them truncated.
Required validation - set the Required property to yes and use the is_valid state in a workflow condition to block form submission or show an error message. is_valid becomes no when required and no option is selected.
Searching nested fields - search works against the full rendered label automatically, including Label Custom output. You only need the Search Field properties if you want to search by a field that is not shown in the label.
Keyboard navigation (Multi Dropdown) - use arrow keys to move through options, Enter to toggle selection, Backspace to remove the last selected item, and Escape to close.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Productivity   •   Technical   •   Data (things)   •   Input Forms

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales