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

Text displayed in the input while it has no value.

Color of the placeholder text.

Keeps the placeholder visible after a value is selected.

Defines whether the user can select one or multiple options.

• singleallows selecting only one option at a time.
• multipleallows selecting multiple options.

Controls whether the input icon is displayed.

Icon displayed in the input.

• chevrona chevron pointing down, which turns when the panel opens.
• chevron up downa pair of chevrons pointing up and down.
• filtera funnel drawn in outline, for filtering contexts.
• filter filleda solid funnel.
• filter listlines of decreasing length, for filtering contexts.

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

This property is not dynamic to facilitate control through native styles, since native styles in Bubble only support static properties.

Color of the input icon.

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

• leftpositions the icon on the left side of the dropdown trigger.
• rightpositions the icon on the right side of the dropdown trigger.

How the selected options appear in the input when the selection mode is multiple: the labels as text with the counter tag, or one chip per option, each with a button to remove it.

• counter
• chips

Order of the selected options in the chips, in the input text and in the published value (multiple): the order of the list, or the order in which they were selected.

• list order
• selection order

Sets the maximum number of options that can be selected in multi selection mode. Leave it empty for no limit.

Message displayed inside the panel when the selection limit is reached.

Font color of the limit reached message.

Sets when the counter tag is shown.

• alwaysalways shows the counter tag with the number of selected items.
• conditionallyshows the counter only when the selected items exceed the visible space.

Sets the background color of the counter tag.

Sets the border color of the counter tag.

Sets the text color of the counter tag.

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

This property is not dynamic to facilitate control through native styles, since native styles in Bubble only support static properties.

Wrap breaks the chips into new lines and the input grows with them, so turn on Fit height to content. Single line keeps one line and shows the chips that do not fit as +N, styled as the counter tag.

• wrap
• single line

Keeps the selected options in the list, marked as selected. Unchecked, they leave the list while they are chips and come back when removed. Keyboard users deselect through the list, so keep it checked when that matters.

Sets the background color of the chips.

Sets the border color of the chips.

Sets the text color of the chips. Empty uses the input font color.

Sets the color of the remove button on each chip. Empty uses the chip font color.

Background color of the circle behind the remove button on each chip, on hover. Empty uses the remove icon color at 10% opacity.

Sets the border radius (in pixels) of the chips.

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

• staticuse a manually defined list of options.
• dynamicuse data from Datatypes, Option Sets, basic types or values provided by other plugins.

Define the data source and default value(s) (if applicable) based on the Selection mode set for the input. For a dynamic source, also specify the field to be used as the caption.

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

Sets the list of static choices. Enter one option per line and press Enter between each option. With Type of choices set to number, write one number per line, with a dot for decimals and no thousands separator (3.5, 1000); lines that are not numbers are left out.

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.

Sets the list of dynamic choices.

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

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

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

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

This property is not dynamic to facilitate control through native styles, since native styles in Bubble only support static properties.

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

• auto-topopens upward if there is enough space above, downward otherwise. If neither side has enough space, opens toward the side with more space.
• auto-bottomopens downward if there is enough space below, upward otherwise. If neither side has enough space, opens toward the side with more space.
• topalways opens upward, regardless of available space.
• bottomalways opens downward, regardless of available space.

Opening animation of the floating panel.

• noneno animation, the dropdown appears instantly.
• dropslides down smoothly from the trigger.
• elasticadds a bouncing effect for a playful interaction.
• expandgrows from the trigger area outward.
• fadefades in gently.
• popquick scale in effect with a sharp feel.
• slideslides into view from a direction.
• zoomscales up smoothly from a smaller size.

Background color of the floating panel.

Sets the border color of the floating panel.

Intensity of the glassmorphism effect on the floating panel.

• noneno glass effect.
• subtleapplies a subtle glass effect.
• lightapplies a light glass effect.
• mediumapplies a medium glass effect.
• strongapplies a strong glass effect.
• intenseapplies an intense glass effect.

Look of the scrollbar in the panel lists: hidden (the list still scrolls), minimal (a handle only) or arrows (a handle with an arrow at each end), each in thin or regular width. Firefox shows its own scrollbar for arrows.

• hidden
• minimal thin
• minimal regular
• arrows thin
• arrows regular

Fades the top and bottom edges of the panel lists while there are more items to scroll to on that side.

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

Font color of the empty state message.

Enables the built-in search input.

Height of the search field, in pixels. Leave it empty to follow the element's height.

Sets the placeholder for the search input.

Text read by screen readers after each search. {count} is replaced with the number of options found.

Sets the font color of the search input placeholder.

Sets the background color of the search input.

Sets the border color of the search input.

Sets the border color of the search input when focused.

Sets the color of the text typed in the search input. It is optional, if not set falls back to the native font color set in the main input.

Enables automatic clearing of the search text when the panel closes.

Displays the search icon inside the search input.

Sets the icon displayed next to the search input.

• searchthe standard magnifier.
• search widea magnifier with a larger lens.
• search extra widea magnifier with the largest lens.

Sets the color of the search icon.

Sets the icon used to clear the search input.

• closea plain X.
• close circlean X inside an outlined circle.
• close circle filledan X inside a filled circle.

Sets the color of the clear icon.

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

Sets the bulk selection action behavior.

• select allselects all available options in the dropdown.
• select customselects a predefined subset of options based on a custom list.

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

Sets the label for the bulk selection action.

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

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

Color of the divider line below the bulk selection action.

Sets the background color of options in their default state. Empty leaves them transparent.

Sets the border color of options in their default state. Empty leaves them without a visible border.

Sets the font color of options in their default state. Empty follows the element font color.

Sets the background color of options when hovered.

Sets the border color of options when hovered.

Sets the font color of options when hovered.

Sets the background color of options when selected.

Sets the border color of options when selected.

Sets the font color of options when selected.

Displays the selection icon next to each option.

Sets the icon displayed next to each option. Check keeps the space of the icon on unselected options, so the text stays still; check ghost does not.

• checka check on selected options. The space stays reserved on the others, so the text does not move.
• check ghostthe same check, without the reserved space: the text can shift when an option is selected.
• squarean empty square that gets a check inside when selected.
• square filledan empty square that turns solid, with a check, when selected.
• circlean empty circle that gets a check inside when selected.
• circle filledan empty circle that turns solid, with a check, when selected.

Sets the size (in pixels) of the selection icon. When empty, it is calculated from the font size.

This property is not dynamic to facilitate control through native styles, since native styles in Bubble only support static properties.

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

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

Sets the position of the selection icon.

• leftdisplays the selection icon on the left side of each option.
• rightdisplays the selection icon on the right side of each option.

Disables the component, preventing any interaction.

Disabling an input (native input or plugin input) makes it read-only in the UI, but it's not a secure way to prevent edits. Because it's handled client-side, users can still tamper with it. Use server-side protections like privacy rules, workflow conditions, or backend workflows to enforce security.

For styling, you can use the exposed is clickable state to apply conditionals at the element level, or use the properties below to define global styles for the disabled state.

Input background color when disabled.

Input border color when disabled.

Input font color when disabled.

Marks the field as required and enables input validation.

Unlike native Bubble inputs, this does not prevent workflows from running automatically. You should use the is valid state in your workflows to handle validation logic.

For styling, you can use the exposed is valid state to apply conditionals at the element level, or use the properties below to define global styles for the invalid state.

Input background color when invalid.

Input border color when invalid.

Input background color when focused.

For styling, you can use the exposed is focused state to apply conditionals at the element level, or use the properties below to define global styles for the focused state.

Input border color when focused.

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

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

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

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

True when the component is not disabled.

True when the input is marked as required.

True when the value is accepted. False when it is required and has no confirmed selection. It updates on every change, so a workflow can rely on it; the invalid style only shows after the person leaves the field or closes the panel, or when a workflow sets the value.

True when the panel is open.

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