Advanced Dropdown

A fully styled dropdown that connects to any Adalo collection. Pick which field to use as the display label, set a default selection using Magic Text, and output the chosen value to forms and actions. Perfect for category pickers, status selectors, country lists, or any field where users need to choose from a dynamic list.

Getting Started

Add the Advanced Dropdown to your screen, connect it to a collection under Items, then go to Item Fields and bind Label (display text) to the field you want shown in the list (e.g. Current Items > Name). Optionally bind Value (output) to a different field (e.g. Current Items > ID) if you want to store the ID rather than the label. The component shows a "Select..." placeholder until the user makes a choice.

Settings

Items

The collection that populates the dropdown list. Connect to any Adalo collection. After connecting, configure the field bindings in the Item Fields section below.

Item Fields — Label (display text)

The field shown as each option's label in the dropdown. Use Magic Text scoped to Current Items to pick the field (e.g. Current Items > Name). This is what the user sees in the list.

Item Fields — Value (output)

The value stored in Selected Value when the user makes a choice. Bind to a unique field like Current Items > ID if you need to identify the record precisely. If left empty, the label is used as the value.

Default Selection

A Magic Text value used to pre-select an item on load. The component searches the list for an item whose label matches this value exactly. For example, bind to Logged In User > Category to pre-select the user's current category. (default: empty)

Placeholder

The text shown when no item is selected. (default: Select an option...)

On Select

An action that fires whenever the user picks an item. Passes Selected Value as an argument so you can use it in linked actions -- for example, to update a database record immediately when a choice is made.

Selected Value (Magic Text output)

The value of the currently selected item, available as Magic Text throughout your screen. Use this to update a database field, filter a list, or control conditional visibility.

Style Settings

Background

Background color of the dropdown button. (default: white)

Text Color

Color of the selected label or placeholder text. (default: #333333)

Placeholder Color

Color shown when no item is selected. (default: #AAAAAA)

Border Color

Color of the button border. Changes to Accent Color when the dropdown is open. (default: #DDDDDD)

Accent Color

Highlight color used for the open-state border, selected item checkmark, and open arrow icon. (default: #6B4EFF)

Corner Radius

Border radius of the dropdown button in pixels. (default: 8, range: 0--28)

Font Size

Size of the label text in pixels. (default: 15, range: 10--36)

Font Weight

Weight of the label text -- Normal, Medium, Semi Bold, or Bold. (default: Normal)

Font Style

Normal or Italic. (default: Normal)

Show Arrow Icon

Toggle the dropdown arrow on or off. Turn off for a minimal, border-only look. (default: on)

Arrow Icon (Closed)

The icon shown when the dropdown is closed. Choose any Material Icons name from the Adalo icon picker. (default: keyboard-arrow-down)

Arrow Icon (Open)

The icon shown when the dropdown is open. Lets you use a different icon to signal the open state. (default: keyboard-arrow-up)

Tips & Best Practices

• Connect Items before binding Item Fields -- the Magic Text picker for Label and Value only shows your collection's fields after you've connected a collection to Items.

• Use ID as Value, Name as Label -- store the record ID in Value so you can reliably look up or update the record later, even if the label changes.

• Default Selection matching is exact -- the text passed to Default Selection must match the label exactly (case-sensitive). Use the same field for both.

• Re-add after updating -- Adalo sometimes caches the old component version. If new style props don't appear, remove and re-add the component to pick up the latest manifest.

• On Select fires on every pick -- wire it to an Update action to write the selected value to the database immediately, without needing a separate Save button.

• Use No Formatting for date Magic Text -- if your label field is a date, set the Magic Text to No Formatting so the exact string is passed for default matching.

• Accent Color controls the open state -- the border, checkmark, and open arrow all use Accent Color, so changing it gives a consistent active highlight.

Example Use Cases

Category selector on a listing form Connect to a Categories collection, bind Label to Name, bind Value to ID. On Select, update the listing record's Category field with the selected ID.

Country or region picker Connect to a Countries collection. Set Default Selection to Logged In User > Country to pre-select the user's saved country when they open a settings screen.

Status filter above a list Place the dropdown above a collection list. Use Selected Value in the list's filter (e.g. Status = Selected Value) to filter the list as the user picks a status.

Role picker in a user profile Connect to a Roles collection. On Select, update Logged In User > Role with the selected value. Use Default Selection bound to Logged In User > Role Name to reflect the current role.

Event type selector Connect to an Event Types collection. Use the selected value in conditional visibility rules to show or hide sections of a form based on the type chosen.