The Dropdown component provides a clean, compact way for users to select from a long list of options. Users can select one option or many, if you enable multi select. By offering a scrollable or expandable list of choices, dropdowns save space and keep your form uncluttered.
Example Dropdown
Dropdowns allow users to select from a long list of options
When should I use a Dropdown?
The Dropdown component is perfect when you need users to pick one option from a long list. Here are some common use cases:
Selecting a Grade Level
Let staff, students, or parents choose a grade level from a standardized list, like “Kindergarten” through “12th Grade.”
Let staff, students, or parents choose a grade level from a standardized list, like “Kindergarten” through “12th Grade.”
School Location
Use a dropdown to allow staff or families to select a specific school from your district, especially when managing large districts with multiple campuses. Even better — populate the options from a dataset!
Use a dropdown to allow staff or families to select a specific school from your district, especially when managing large districts with multiple campuses. Even better — populate the options from a dataset!
Choosing a Supervisor to use as an Approver
You can list relevant supervisors and have the submitter select them from a dropdown. This person can then be used as a dynamic assignee in the workflow.
You can list relevant supervisors and have the submitter select them from a dropdown. This person can then be used as a dynamic assignee in the workflow.
Features & Configuration
Adding a Dropdown component to your form is easy. Simply select the Dropdown option from the component library and drag it onto the canvas.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Label
This text appears above the dropdown, explaining what the user is selecting.
This text appears above the dropdown, explaining what the user is selecting.
Width
Adjust the width of the component (1-12 columns) based on your form layout.
Adjust the width of the component (1-12 columns) based on your form layout.
Required
Enforce that users must select at least one of the options to proceed.
Enforce that users must select at least one of the options to proceed.
Hide Search
You can enable this to hide the search box that appears at the top of your list of dropdown options by default. You may want to do this for shorter dropdown lists.
You can enable this to hide the search box that appears at the top of your list of dropdown options by default. You may want to do this for shorter dropdown lists.
Multi Select
You can enable this to allow more than one option to be selected, like a checkbox component...but more compact and better for longer lists of options.
You can enable this to allow more than one option to be selected, like a checkbox component...but more compact and better for longer lists of options.
Options
You can configure the options using one of the following methods:
List
Manually enter a list of options for users to choose from.
Manually enter a list of options for users to choose from.
Logic
Write an expression to pull options from a dataset or another form field.
Read more about connecting and referencing datasets
Write an expression to pull options from a dataset or another form field.
Read more about connecting and referencing datasets
Key Value
Use Key Value to match shorter keys with longer values, making it easier to reference complex options elsewhere in your form.
For example, if you have an option like “Yes, please record my name under this group,” but want to refer to it as simply “Yes” in your workflows or notifications, you can set “Yes” as the Key and the longer text as the Value. This way, the form displays the full option, but you can work with a simpler label behind the scenes.
Use Key Value to match shorter keys with longer values, making it easier to reference complex options elsewhere in your form.
For example, if you have an option like “Yes, please record my name under this group,” but want to refer to it as simply “Yes” in your workflows or notifications, you can set “Yes” as the Key and the longer text as the Value. This way, the form displays the full option, but you can work with a simpler label behind the scenes.
Logic
Display Logic
Control when this component shows or hides based on other inputs.
Control when this component shows or hides based on other inputs.
Validate Logic
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Details
Hint
Hints are short pieces of text that appear beneath the options to provide extra clarity.
Hints are short pieces of text that appear beneath the options to provide extra clarity.
Tooltip
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Name
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article