This article explains the Dropdown block that can be added as a block to design an app.
Help video
Used for
- Select a value from a pre-defined set of values
- Dependent drop-downs
Editing the block
Click on the block and start editing on the panel that appears on the right side.
Label
This is what appears as the name of the input block to the end-user.
Description
This is the text that goes below the input block to help the user.
Options
This is the place you need to enter the values of your dropdown. For example, we have entered values “Male”, “Female”, “Others” in a dropdown “Gender”. You need to press ↵ Enter key after each value.
Required
Tick this option if you want the user to compulsorily fill the input block.
Help video
Nested Dropdown
Nested dropdowns are used when you have multiple dropdowns dependent on the values selected in the previous dropdowns. Here we are taking an example of countries and cities inside those countries.
Dropdown 1 – Select Country
Dropdown 2 – Select City from a list of countries in the selected country of the Dropdown 1.
First dropdown
Add the first dropdown and enter a list of countries like mentioned in the first part of the article.
Second dropdown
Important: Configure the Dependency field names option available in the right panel and input the variable generated for the first dropdown.
Add the second dropdown and configure values in the pattern given below.
<value 1 from the first dropdown>||<value 1 to be shown against this selection>↵ Enter key
<value 1 from the first dropdown>||<value 2 to be shown against this selection>↵ Enter key
<value 2 from the first dropdown>||<value 1 to be shown against this selection>↵ Enter key
<value 2 from the first dropdown>||<value 2 to be shown against this selection>
