Select Input

The Select Input element shows a drop-down list of options, and the person filling the form picks one option or, if you allow it, several.

The Select Input element shows a drop-down list of options. The person filling the form opens the list and picks one option, or several options if you turn on Multiple. Use it when the answer must be one of a known set of values, for example a country, a department or a priority.

Each option has a label, which people see in the list, and a value, which is what the form submits. Only the value reaches your process and the submission. The label is never sent.

Add the element

In the Form Designer toolbar, open the Fields tab and drag Select input onto the canvas. Click the element to open its settings on the right.

General settings

Setting	What it does
Label	The title shown above the list.
Placeholder	The text shown in the field while nothing is selected.
Tooltip	Help text next to the label. It shows only when the element has a label.
Info text	Extra text shown with the field.
Searchable	On by default. Adds a search box inside the open list. Typing filters the options by their label. The match is not case-sensitive and finds the text anywhere in the label, so `bl` finds Blueberry and Blackberry.
Clearable	Off by default. Adds a clear icon to the field, so a person can remove the selection and leave the field empty.
Multiple	Off by default. Lets a person pick several options. The list stays open between picks, and each picked option shows as a tag with its own remove icon.
Readonly	The field shows its value but can't be changed.
Visible	Turn it off to hide the element.
Name	The element's name. Scripts, mappings and processes use it to find the element, and the form's data model uses it.
ID	The element's ID.

Options (Data Source)

Open the Data Source group to choose where the options come from. Pick the Source type first, then fill in the Source value.

Source type	How to give the options
Static list	Type the options in a table with a Label column and a Value column. Give every option a unique value.
JSON	Paste a JSON array. Each item needs a `label` (or `name`) and a `value`.
URL	Enter the address of a JSON file that returns the same kind of array.

A JSON source looks like this:

[
  { "label": "Yes", "value": "yes" },
  { "label": "No", "value": "no" }
]

Options from a URL

With the URL source type, the browser of the person filling the form downloads the options when the form opens. Keep these points in mind:

The address must be reachable from that person's browser, and the server must allow the request from the form's page (CORS).
The response must be a JSON array of { "label": ..., "value": ... } items. Any other response, such as a JSON object or an error page, gives an empty list. The rest of the form still works.
The options are downloaded once per address while the page is open. Another element that uses the same address reuses them.

For a quick test you can use https://procesio-email-hosting.fra1.cdn.digitaloceanspaces.com/test.json.

Default value

Default value lists the options you defined. Pick one to have it selected when the form opens. If the person does not change it, the form submits that option's value.

Validation

Turn on Required in the Validation group to make a selection mandatory. A required field shows an asterisk next to its label, and the form can't be submitted while the field is empty.

What the form submits

Situation	Submitted value
One option picked	The option's value, for example `"val-b"`. A number value stays a number, for example `2`.
Multiple is on	A list of the picked values, in the order the options appear in the list, not the order they were picked. For example `["val-a", "val-c"]`.
Nothing picked	No value.

Events

The Events group has an onInput event. It runs each time the selection changes, and it receives the new value. It does not run when the value is set by a default, a script, a mapping or a process. See Trigger events for form and elements.

Change the options while the form runs

A process started by the form can replace the options. Map a process output that holds a JSON list of { "label": ..., "value": ... } items to the element's Source value. The same mapping works for the element's other settings, such as Visible, Required and Readonly. A script can also read and change the element through ProcesioForm.data.fields. See Trigger JavaScript.

The Radio Button element uses the same three source types.

For support, please join our Discord community for further assistance and support.

Select Input

On this page