> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/advanced-dropdown.md). # 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/advanced-dropdown.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.