Dropdown
Capture user input from a list of choices.
Dropdown components are useful for capturing user input for a single choice or multiple choices of various options.
Manually set dropdown options
Start by dragging a Dropdown component from the Components panel.
The default data that populates the dropdown is an array of objects, where each object contains a label
and value
key. The label is the text shown in the dropdown option, whereas the value is the output resulting from selecting that item in the dropdown. This value can be fed into other components and APIs via {{<DROPDOWN_NAME>.selectedOptionValue}}
for a single choice or {{<DROPDOWN_NAME>.selectedOptionValues}}
for multiple choices. (see section for Trigger an API on select).
Alternatively, you can configure Options as a simple array of strings if the value and label for each option are expected to be the same.
Customize dropdown label and default text
Edit the dropdown Label and Default selected value string(s), or Placeholder text if no default value is selected.
Toggle interaction and display settings
To allow users to select more than one option in the dropdown, toggle the Enable Multi-select switch. If selecting an option in the dropdown is necessary before proceeding to subsequent steps, enforce user input via Required. Additionally, the dropdown can be disabled by either setting user interaction as Disabled or toggling the Visible option to hide the component.
Note, to set multiple default selected values for a multi-select dropdown, add an array of the value strings inside bindings. For example, {{["TORONTO", "NEW YORK"]}}
.
Dynamically set dropdown options from API response
Create an API called getOrders
that queries the [Demo] Orders
Postgres Database.
Reference the API response in the dropdown component Options via {{getOrders.response}}
. Superblocks automatically configures the Value Field with one of the table columns from the resulting SQL response. Here we've configured the order id field to allow users to select specific orders from the dropdown and perform additional processing or investigation on those.
Trigger an API on select
Using the previous example, the user can next filter a table of order statuses based on the selected order id. To do so, first create an API that gets the Shipping History for an order from Snowflake. Reference the selected order id from OrderDropdown
with {{OrderDropdown.selectedOptionValue}}
.
To ensure this API is called when the dropdown option is selected, configure the dropdown's onOptionChange trigger.

Add a Table component below the dropdown and configure the Table Data to bind to {{getShippingHistory.response}}
. The table will now update to reflect the order id selected in the dropdown.
Use Python to convert lists to an array of JSON objects
In order to convert a list of labels and values to an array of objects to be used within the Dropdown component, a list comprehension can be used in Python to do this. For example, take the following list of labels and values:
my_labels = ["New York", "Toronto"]
my_values = ["NEW YORK", "TORONTO"]
The following code can be used in a Python step in order to generate an array of JSON objects seen below:
return [{"label": i, "value": j} for i,j in zip(my_labels, my_values)]
[
{
"label": "New York",
"value": "NEW YORK"
},
{
"label": "Toronto",
"value": "TORONTO"
}
]
Dropdown Properties
Component Properties
Property | Description |
---|---|
Label | Set the text label for the dropdown |
Options | Enter an array of objects with a label and value property, these the labels will be presented to the user and values used with {{dropdown.selectedOptionValue}} |
Default selected value strings | Choose the default value |
Placeholder | Text to inform the user of action like "Select a city" |
Enable Multi-select | Allows the user to select multiple options from the dropdown. This can be access via {{dropdown.selectedOptionValues}} |
Enable Clearing | When enabled, allows the user to clear selected options with an x button, values are a boolean |
Required | Makes selecting an option mandatory, values are a boolean |
Loading Animation | Controls the loading state of the component, values are a boolean |
Visible | Set true to show and false to hide. Set dynamically using Javascript with {{}} |
Vertical | Toggles the location of the label, values are a boolean |
Disabled | Disables user interaction with this component, values are a boolean |
Settable Properties
Property Via Form / Via RunJS | Type | Example Value |
---|---|---|
Selected Option / selectedOptionValue | string ,Array<string> | "TORONTO" , ["TORONTO", "NEW YORK"] |
Reference Properties
Properties can be accessed from other frontend components and backend APIs by adding the name of the Dropdown, and dot referencing the property. For a Dropdown named Dropdown1
:
Property | Description |
---|---|
Dropdown1.selectedOptionValue | Returns a string of the selected value of the dropdown |
Dropdown1.selectedOptionValues | Returns an array of the selected values of the dropdown |
Dropdown1.options | Returns an array of the options of the dropdown |
Dropdown1.isVisible | Returns the boolean value of the component's visibility (True, if it is visible) |
Dropdown1.isDisabled | Returns the boolean value of the component's disabled state (True, if it is disabled) |
Events
The following events are triggered by user interactions with Dropdown components. Use event handlers to trigger actions in response to user events.
Property | Description |
---|---|
onOptionChange | Trigger an action when the selected option is changed |
onSearchTextChange | Triggers an action when a user types in the search box |
onClear | Trigger an action when the dropdown is cleared |