Select: options, labels and selected values

Offer static or data-driven choices and bind the selected value.

Before you begin

• An App Connect page; a named form when the values will be submitted.

Separate the option label from its key

Use a Select when the user should choose a known value. The visible label can be a name while the submitted value is a stable id.

Configure static or dynamic options

ID is the component binding name; Name is the submitted key. Options edits static choices. For dynamic choices, set Data Source, Text Field and Value Field. Each field expression is evaluated in the option record’s scope.

Control or value	Meaning and use
Selected Value	Matches an option by its value, not its text or position. Values read back as strings.
Multiple	Switches to an array of selected strings in component.value. In a single select, value is one string.
Disabled	Prevents interaction and omits the control from normal form submission.
Set Selected Index	Uses a zero-based position. Prefer Set Value for a stable record id when sorting or loading options can change positions.
Data Source / Text Field / Value Field	For [{id:1,name:'Notebook'},{id:2,name:'Pencil'}], use name as Text Field and id as Value Field. Dynamic options are added alongside existing static options, so keep a static placeholder only if intended.

Read and change a form control

Form-control data is directly under its component name, for example titleInput.value. It is not titleInput.data.value.

Control or value	Meaning and use
Set Value	Changes the current control value. A later change to its bound Value can replace it and also change the form-reset default. Set Value emits Updated when the value changes; it does not simulate a user Changed event.
Disable	Pass true to disable and false to enable. Disabled controls are omitted from normal form submission. Read Only, where the input type supports it, prevents editing while leaving the value eligible for submission.
Focus	Moves keyboard focus to the control. Give the field a visible label and a useful place in the form’s focus order.
Validate	Invokes the App Connect validation helper. Load the validation extension for this action; client validation does not replace the endpoint’s validation.
value / disabled / focused	Current value and UI state. Text-based controls expose strings, including most number-input reads. Convert intentionally before arithmetic.
invalid / validationMessage	Client validation state/message. Render a useful field error when invalid, and handle server field errors on the form too.
Changed / Updated	Changed accompanies user input/change handling when the value changes. Updated also accompanies programmatic value updates. Do not make an Updated handler unconditionally write a different value back into the same field.

Read the right selection data

A single select exposes value, selectedValue, selectedText and selectedIndex. A multiple select exposes the full array in value; the selectedValue/selectedText inherited fields describe a single selected option, not the full selection. Check that a saved value exists in the loaded options before presenting an edit form.

Example: restore a product selection

Use the two-product Data Source above. Set Selected Value to 2 and confirm the label is Pencil while the component value is ‘2’. In Multiple mode, Set Value [‘1’,‘2’] selects both. Change the order of the source and confirm that selecting by id still chooses the intended record.

Make option loading and defaults explicit

Changing the dynamic option source rebuilds the generated options and matches the configured Value. Load the choices before relying on an edit form’s current selection. Native option text is written as textContent; it is not an HTML-rich label.

Continue with a complete form workflow

Use the related workflow to connect these controls to data and a verified submit result.

Check your result

You can configure the control, use its actual value shape and verify the example without confusing page state with a submitted or saved value.