Dropdown
The Dropdown lets a visitor select one option from a list, optionally with search. Use it when the answer is one of a fixed set of choices, for example a service type, a product choice, or a property type.
Properties
The properties live in the inspector under the Dropdown group. The Default, Label, and Value fields appear only when their parent property is enabled.
Property | What it does | Default |
|---|---|---|
Placeholder | Text shown when no option is selected | Choose an option |
Active | Starts the dropdown open | Off |
Disabled | Prevents visitors from using the dropdown | Off |
Is searchable | Lets visitors type to filter the options | Off |
Hide clear option | Removes the button that clears the selection | Off |
Required | Marks the dropdown as required | Off |
Options | The selectable options, as records or a formula | Option #1 to 1, Option #2 to 2, Option #3 to 3 |
Has default | Preselects an option when the page loads | Off |
Default | The preselected option; shown when Has default is on. A select for record options, a formula for formula options | First option |
Label | The column that supplies option labels; shown when Options is a formula | None |
Value | The column that supplies option values; shown when Options is a formula. Leave empty to number the options 1, 2, 3, ... | Empty |
Go to next view when answered | Moves the visitor to the next view after they answer | Off |
Label and Value accept columns from A to Z. Disabled and Required accept a Boolean or a formula; Options accepts records or a formula. The Logic group holds a separate Visibility control with the choices Always and Formula.
References
References expose the visitor's answer as data you can use in formulas and other elements. Assign a reference to store the dropdown's value in a variable.
Value: the value of the selected option.
Label: the label of the selected option.
Index: the position of the selected option.
Touched: whether the visitor has made a selection.
Count: the number of options.
Last touched at: when the visitor last made a selection.
Styling
The Dropdown can be styled per state and per part of the element.
Style states: Active, Default, Disabled, Error, Focus, Hover, Placeholder.
Named targets: wrapper, dropdown-trigger, dropdown-trigger-input, dropdown-trigger-icon, dropdown-trigger-clear-icon, dropdown-menu, dropdown-menu-item, error-label.
Named styles: Dropdown, Dropdown - brand background, Dropdown - underlined.
Apply general styling from the Style tab: quick styles, style sets, and CSS overrides per state and per breakpoint. See the styling reference for the full system.
There is no empty-state message when the option collection has no options; the menu renders empty.
Related articles
UI Elements: overview of the elements.
FormulaScript Overview: using formulas in properties.