A smarter dropdown for Bubble.io. Search, scroll, and select from any data type or static list 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
· Case-insensitive search across all option labels
· "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

Selection

· Single option selection with full Bubble thing returned as state
· One-click clear button to deselect
· Initial value support for pre-populated forms
· Selected value persists correctly across Bubble state updates

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
· Four list styles: Flat, Divided, Striped, Inset
· Configurable item padding
· 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
· Loading spinner shown while dynamic data is being fetched
· Fit to value mode for multi-line selected value display
· Outside click closes the dropdown automatically

States Exposed

· selected_option — the full Bubble thing selected
· selected_static_item — label text of the selected static 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

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
· dropdown_focused — fires when the input receives focus
· dropdown_blurred — fires when the input loses focus