Newed UI - Component Library

NWD Dropdown+Search (Single/Multi) v1.5.0

NWD Dropdown+Search (Single/Multi) is the dropdown Bubble was always missing. Built to replace the native element, it brings single and multi selection, static and dynamic data, built in search, bulk selection and smart positioning together in one polished component, and delivers its value even while hidden. Fully customizable through 70+ properties, giving you complete control over every visual and behavioral detail.

No data collected This plugin does not collect user data.

Live demoGet plugin
← All plugins

Key features 6

Flexible Selection

Pick one option or many in the same element, with a live counter and a select all control for long lists.

Instant Search

Type to filter the list as you go, in a search field that takes the focus as soon as the panel opens.

Any Data Source

Works with data types, option sets and static lists, and gives your workflows back the same type you put in.

Complete Styling Control

Over 70 properties covering the input, the floating panel and every option state, with custom scrollbars and glass effects.

Accessible Experience

Walk the options with the arrow keys, Home and End, with an accessible label, screen reader support and reduced motion respected.

Workflow Ready

Read the selection from exposed states, set it from any workflow with the Set value action, and react to value changed.

How to use 3

  1. 01
    Insert the element on the page

    Place the plugin element wherever you need it.

  2. 02
    Configure the properties

    Adjust the settings to match your use case.

  3. 03
    Connect to your workflows

    Use the value changed event to capture confirmed selections and read the exposed states to use the selected values anywhere in your app.

INPUT 14

For basic styling of the dropdown input, use Bubble's native properties such as font, background, border, border radius, padding, and box shadow. Additional properties for the dropdown input field are configured in this section.

General

Selection mode

dropdown

Defines whether the user can select one or multiple options.

  • single
  • multiple

defaultno default

Appearance

Input placeholder

text

Text displayed in the input while it has no value.

defaultChoose an option...

Input placeholder color

color

Color of the placeholder text.

default#AAAAAA

Persistent placeholder?

yes/no

Keeps the placeholder visible after a value is selected.

defaultno

Input icon

Display input icon?

yes/no

Controls whether the input icon is displayed.

defaultyes

Input icon class

dropdown

Icon displayed in the input.

  • chevron up/down thin
  • chevron down thin
  • chevron down circle thin
  • chevron down circle thin outline
  • chevron up/down
  • chevron down
  • chevron down circle
  • chevron down circle outline
  • caret up/down
  • caret down
  • caret down circle
  • caret down circle outline
  • arrow down
  • arrow down circle
  • arrow down circle outline
  • filter
  • filter outline
  • filter list
  • filter list variation
  • slider
  • slider circle
  • slider circle outline
  • toggle
  • toggle outline

defaultchevron down

Input icon size

number

Icon size in pixels. When empty, it is calculated from the input font size.

defaultno default

optional

Input icon color

color

Color of the input icon.

default#AAAAAA

Input icon placement

dropdown

Whether the icon appears to the left or right of the input text.

  • left
  • right

defaultright

Counter tag

Counter display mode

dropdown

Sets when the counter tag is shown.

  • always
  • conditionally

defaultconditionally

Counter bg color

color

Sets the background color of the counter tag.

default#4DBEFF

Counter border color

color

Sets the border color of the counter tag.

default#4DBEFF

Counter font color

color

Sets the text color of the counter tag.

default#FFFFFF

Counter border radius

number

Sets the border radius (in pixels) of the counter tag.

default4

DATA SOURCE & DEFAULT DATA 8

Choices style

dropdown

Sets how the dropdown options are sourced, either from a static list or a dynamic data source.

  • static
  • dynamic

defaultno default

Type of choices

app type

Sets the type of the options. Static choices are converted to this type, and dynamic choices and default values must match it.

defaultno default

Static choices

Static choices source (press Enter between each option)

text

Sets the list of static choices. Enter one option per line and press Enter between each option.

defaultno default

optional

Default static value (if multiple, press Enter between each option)

text

Sets the default static value(s) selected for single or multiple selection (static choices). It should be of the same type as the type of content defined in Type of choices.

defaultno default

optional

Dynamic choices

Dynamic choices source

list dynamic value

Sets the list of dynamic choices.

defaultno default

optional

Option caption

text

Sets which field to display as the option label for dynamic choices.

defaultno default

optional

Default dynamic value (single)

dynamic value

Sets the default dynamic value selected for single selection (dynamic choices).

defaultno default

optional

Default dynamic value (multiple)

list dynamic value

Sets the default dynamic values selected for multi selection (dynamic choices).

defaultno default

optional

FLOATING PANEL 10

General

Max visible options

number

Sets the maximum number of visible options before scrolling. Accepts values between 1 and 30.

default10

Display scrollbar?

yes/no

Displays the scroll bar in the list of options when necessary.

defaultyes

Max selections

number

Sets the maximum number of options that can be selected in multi selection mode. Use 0 for no limit.

default0

Panel position

dropdown

Preferred or forced opening direction of the floating panel relative to the input.

  • auto-top
  • auto-bottom
  • top
  • bottom

defaultauto-bottom

Animation type

dropdown

Opening animation of the floating panel.

  • none
  • drop
  • elastic
  • expand
  • fade
  • pop
  • slide
  • zoom

defaultfade

Appearance

Panel bg color

color

Background color of the floating panel.

default#FFFFFF

Panel border color

color

Border color of the floating panel.

defaultno default

optional

Glass effect

dropdown

Intensity of the glassmorphism effect on the floating panel.

  • none
  • subtle
  • light
  • medium
  • strong
  • intense

defaultnone

Empty state

Empty state label

text

Message displayed inside the panel when there are no options to show.

defaultNo results found!

Empty state font color

color

Font color of the empty state message.

default#AAAAAA

BULK SELECTION 7

Enable bulk selection?

yes/no

Enables the bulk selection action inside the panel. Only available in multiple selection mode.

defaultyes

Bulk selection mode

dropdown

Sets the bulk selection action behavior.

  • select all
  • select custom

defaultselect all

Custom selection list

list dynamic value

Sets the custom list of options to be selected when using select custom mode.

defaultno default

optional

Bulk selection label

text

Sets the label for the bulk selection action.

defaultSelect all

Label font color

color

Sets the font and icon color of the bulk selection action in its default state.

default#AAAAAA

Label font color (selected)

color

Sets the font and icon color of the bulk selection action when all items in the given mode are selected.

default#4DBEFF

Divider line color

color

Color of the divider line below the bulk selection action.

default#EEEEEE

LIST OF OPTIONS 15

Available options

Option bg color (available)

color

Sets the background color of options in their default state.

defaultno default

optional

Option border color (available)

color

Sets the border color of options in their default state.

default#FFFFFF

Option font color (available)

color

Sets the font color of options in their default state.

defaultno default

optional

Hovered options

Option bg color (hovered)

color

Sets the background color of options when hovered.

default#F4F4F4

Option border color (hovered)

color

Sets the border color of options when hovered.

default#F4F4F4

Option font color (hovered)

color

Sets the font color of options when hovered.

defaultno default

optional

Selected options

Option bg color (selected)

color

Sets the background color of options when selected.

default#4DBEFF

Option border color (selected)

color

Sets the border color of options when selected.

default#4DBEFF

Option font color (selected)

color

Sets the font color of options when selected.

defaultno default

optional

Selection icon

Display selection icon?

yes/no

Displays the selection icon next to each option.

defaultyes

Selection icon class

dropdown

Sets the icon displayed next to each option.

  • check (empty)
  • check
  • square
  • square outline
  • circle
  • circle outline
  • toggle

defaultcheck

Selection icon size

number

Sets the size (in pixels) of the selection icon.

default14

Selection icon color

color

Sets the color of the selection icon in its default state.

defaultno default

optional

Selection icon color (selected)

color

Sets the color of the selection icon when the option is selected.

defaultno default

optional

Selection icon placement

dropdown

Sets the position of the selection icon.

  • left
  • right

defaultright

INPUT BEHAVIOR 9

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input bg color (disabled)

color

Input background color when disabled.

default#F4F4F4

Input border color (disabled)

color

Input border color when disabled.

default#CACACA

Input font color (disabled)

color

Input font color when disabled.

default#CACACA

Required state

This input is required?

yes/no

Marks the field as required and enables input validation.

defaultno

Input bg color (invalid)

color

Input background color when invalid (required with no value).

default#FFDEDE

Input border color (invalid)

color

Input border color when invalid (required with no value).

default#FF6666

Focused state

Input bg color (focused)

color

Input background color when focused.

default#FFFFFF

Input border color (focused)

color

Input border color when focused.

default#30B3FE

ACCESSIBILITY 2

Accessible label

text

Name read by screen readers. When empty, uses the placeholder or the visible label.

defaultno default

optional

Accessible description

text

Hint read by screen readers after the name. Empty for none.

defaultno default

optional

States 6

Values the element exposes for the rest of the page to read.

value (single)

dynamic value

Exposes the currently selected item in single selection mode. Returns empty when no option is selected.

value (multiple)

dynamic valuelist

Exposes the list of selected items in multi selection mode. Returns empty when no options are selected.

is clickable

yes/no

True when the component is not disabled.

is required

yes/no

True when the input is marked as required.

is valid

yes/no

True when the field is not required, or when it is required and has a confirmed and valid value.

is focused

yes/no

True when the panel is open.

Events 1

Where a workflow can start.

value changed

event

Triggered whenever the selection changes: when an option is selected, deselected, or the selection is reset.

Actions 3

What a workflow can tell the element to do.

The actions can be triggered from any workflow event. The plugin also responds to Bubble's native reset actions (Reset a group/popup).

Reset no params

Resets the component to its initial state, reapplying default values if configured, or returning to an empty state, and updates the exposed states accordingly.

Focus no params

Focuses the dropdown and opens its panel programmatically. Ignored if the component is disabled.

Set value 2 params

Sets the selection from a workflow, using the field that matches the current selection mode.

Value (single)

dynamic value

Option to select when the element is in single selection mode. It must be one of the current choices; empty clears the selection.

defaultno default

optional

Value (multiple)

list dynamic value

Options to select when the element is in multiple selection mode. Only options that exist in the current choices are applied; empty clears the selection.

defaultno default

optional

FAQ 6

Why use Searchable Dropdown (Single/Multi)?

Native Bubble dropdowns can feel limiting when you need features like searchable options, multi selection, smart defaults, better styling, and smoother interactions. This plugin brings all of that into one flexible and polished component built for real app use.

Is any specific or advanced knowledge required to use the plugin?

No. The plugin is designed to be easy to use. Just place the element on the page, configure the properties in the editor, and connect your preferred data source or static values.

Does it work with Bubble Datatypes and Option Sets?

Yes. The plugin supports Datatypes, Option Sets, static choices, and other dynamic values, allowing it to adapt to many different Bubble use cases without requiring complex workarounds.

Can I use it for both single and multi selection?

Yes. The same element supports both single and multi selection modes, making it easy to reuse across different forms, filters, and selection flows.

Does it support search and preselected values?

Yes. The plugin includes built in instant search and supports smart default values, making it easier to guide users and speed up selection.

The dropdown is not showing options, what should I check?

Make sure that: 1 - The data source or static choices were provided correctly 2 - The selected choices type matches the values being passed 3 - If using Dynamic choices, the source contains items 4 - If using Static choices, the values are separated correctly 5 - If using default values, they match the available options