--- title: "Form Dropdown" description: "With the Form Dropdown Element, Editor can create a Dropdown." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-dropdown.html lastModified: 2025-11-05T10:31:36.857Z --- # Form Dropdown # Form Dropdown Element ### Information requested Which Form Element Catagory do you like? (Multi Selection) - Data Inputs - Selectors - Others [Info Icon Key: info-icon-1] [Info Icon Aria Label: info] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] Which Form Element Catagory do you like best? (Single Selection) - Data Inputs - Selectors - Others [How to Configure](#how-to) ### Description The Form Dropdown Element Component can be used to offer an Possibility to select different Options. - Single- and Multi-Select is possible - Dynamic Content can be provided - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-dropdown--interactive) ### Inspirations ### Information requested How should we contact you? - Phone - Mail - Post Tel. Number Mail Address Which Form Element Catagory do you like best? - Data Inputs - Selectors - Others [Info Icon Key: info-icon-2] [Info Icon Aria Label: info] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-2] You will find more about Data Inputs [here](/content/foundationNG/en/specials/form-elements/form-data-input.html). You will find more about Selectors [here](/content/foundationNG/en/specials/form-elements/form---selectors.html). You will find more about other Elements [here](/content/foundationNG/en/specials/form-elements/form---others.html). ### Usage Rules & Features ##### Features - Single- and Multi-Select is possible - Can provide dynamic Content based on Selection ##### Properties - Can be made mandatory - Add Help Text and User Messages (for required Hint as well as for Input Validation) ##### Design - Initial Value Selection can be defined - Add Info Icon for additional Information ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | no | ##### DO's - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-3] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-3] ##### Mulesoft & MT Captcha Mulesoft and MT Captcha are both needed for Forms. Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form. [Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Info Icon Content End: info-icon-3] ##### DONT's - Do never put dynamic Content into dynamic Content ! - Do not use it in smaller Grid then 6 Column Grid - Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_dropdown-prop_v2%3A3-4?fmt=webp-alpha) ### Set Properties For Dropdown, a Label and an Element Name is required. The Label is visible in the Form, while Element Name is needed for technical referencing. Beside that, Multi-Select can be activated. Then User can select multiple Items of that Dropdown. For Multiselect also Sort Order can be choosen. Furthermore, to show Chips for selected Items can be activated. Height Option can also be configured. This defines the Height of the opened Dropdown and must be entered as Percent (%) or Pixel (px). The Editor ist also able to search and filter Options directly within Dropdowns and Multiselcet Dropdowns. This Funcionality can be activated by the Editor via the checkbox "Enable Search Filtering". The Option is deactivated by default. When enabled, Users can dynamically filter available options. This Feature improves usability and helping unsers find Options faster. Furthermore, if Local Source is selected, multiple Options can be added. Each Option needs a Text and a Value. Beside that, it can be set as initially selected and a dynamic Area for Content can be enabled. Moreover, an Help Message can be entered and a Height for the Options can be defined. ### Rules for the Element Name: The Element Name is a technical Name and therefore, there are some Rules to make it work: - Name must be UNIQUE - Just use lower Case Letters - No special Signs - No Blancs - No Numbers #### Info Icon Tooltip For Info Icon an Experience Fragment of a Tooltip is needed. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ### Add an Info Icon Selecting "Enable Info Icon" Checkbox in Info Icon Accordion, editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_dropdown-dynamiccontentarea%3A4-3?fmt=webp-alpha) ### Provide dynamic Content Area If Checkbox to provide dynamic Area for an Option is selected, after confirming the Dialog, a Parsys under the Dropdown appears per Option that should have dynamic Content Area. In this Parsys the Content for that specific Option can be added.