Let the visitor pick one option from a dropdown list. Compact when you have many choices.
In the builder: Elements → Form Widgets → Select
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Variable name (required), e.g. country, loan_term. |
| Value | Default selected option value. |
Options
Click Edit Options to add choices with value and caption.
Field Option
| UI field | Description |
|---|---|
| Label | Label above the dropdown. |
| Status | See Status below. |
| Prefix | Text or icon before the select. |
| Suffix | Unit or hint after the select. |
Status
| Value | Behavior |
|---|---|
| Editable | Visitor can type and change the value (default). |
| Readonly | Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled | Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
On Change
Run actions when the selection changes — e.g. Toggle View Mode or Calculate.
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Label | Text above the dropdown. |
| Control Area | Region around the select control. |
| Select | The dropdown element (.cp-value). |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
select.cp-value |
The select element. |
select[name="{Name}"] |
Dropdown for a given Name. |
Select vs Radio
| Select | Radio | |
|---|---|---|
| UI | Dropdown | Visible options |
| Best for | Long lists (countries, terms) | Few options (2–6) |
Use Select to save space when there are many options.