Application Builder - Dropdown element

A dropdown lets users pick from a list of choices. It looks like a list that comes down when you click on it.

In this section, we’ll guide you through the process of setting up a dropdown element and explain each configuration option in detail.

Overview

Dropdown elements are versatile components used for various purposes, including creating navigation menus and selecting options from a predefined list. They offer a user-friendly way to present choices without overwhelming the interface.

You can configure the element properties and style from the element settings.

The Application Builder allows you to bind the text to data sources. This enables the text to update dynamically based on user input or application logic.

Add and configure dropdown elements

To add a dropdown element, access the elements panel and select Dropdown.

Once added, place the dropdown wherever you want it on the page. Don’t worry if it’s not perfectly positioned initially; you can always move it later.

Learn more about how to add and remove an element from a page.

Now, you’ll configure the dropdown’s properties to make it function and look the way you want. This involves settings related to dropdown style.

Dropdown element configuration

Dropdown elements are frequently used for navigation menus, or selecting options from a list.

Users can choose from one of the predefined list of options you add.

The dropdown element has the following settings:

• Label: This is a clear and concise text displayed above the dropdown element. It acts as a description for the dropdown.

• Default value: This pre-selects an option from the list when the dropdown opens. If no default value is chosen, the first option is usually selected by default.

• Placeholder: This provides a hint to the user about what they should select when the dropdown is empty.

• Required: When enabled, users must choose an option from the list before continuing. This ensures they provide a necessary selection.

• Options: These are the individual choices presented within the dropdown menu. Each option has two properties:

  • Value: An internal identifier associated with the option. This value is typically used to store the user’s selection in your application.
  • Name: The text displayed to the user when presenting the options in the dropdown menu. Choose clear and concise names that accurately reflect the corresponding value.