Select (Dropdown)
A single-selection dropdown field with a configurable list of options.
Overview
The Select field renders a styled dropdown menu from which the respondent can choose exactly one option. It is the best choice when you have a finite list of mutually exclusive options and want to conserve vertical space (compared to radio buttons).
Options can be defined statically in the field configuration or loaded dynamically from an external API endpoint. For multiple selections, use the Multi-Select field. For dependent dropdowns that change based on a parent selection, see Cascading Dropdowns.
Tip: Keep dropdown lists under 7–10 items for best usability. For longer lists, consider adding a search-in-dropdown feature via the searchable prop.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| options | Option[] | [] | Array of { label, value } objects for the dropdown items. |
| searchable | boolean | false | Adds a search box inside the dropdown for long lists. |
| clearable | boolean | false | Shows an X button to clear the current selection. |
| dynamicOptions | object | undefined | Config for loading options from an external API. |
Options Format
Each option in the options array has a label (displayed to the user) and a value (stored in the submission):
"options": [
{ "label": "Option A", "value": "option_a" },
{ "label": "Option B", "value": "option_b" },
{ "label": "Other", "value": "other" }
]JSON Schema
{
"type": "select",
"label": "Country",
"name": "country",
"required": true,
"placeholder": "Select your country",
"searchable": true,
"clearable": false,
"options": [
{ "label": "Nepal", "value": "NP" },
{ "label": "United States", "value": "US" },
{ "label": "United Kingdom", "value": "UK" },
{ "label": "India", "value": "IN" }
]
}