Dropdown

This article explains the Dropdown block that can be added as a block to design an app.

Used for

  1. Select a value from a pre-defined set of values
  2. 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.

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>