Radio: selection versus submitted value

Choose one value from a named group of alternatives.

Before you begin

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

Keep checked state separate from value

Radios with the same Name in the same form form one browser choice group. Give each option its own ID, label and Static Value. Use Radio Group when you need one binding for the selected value.

Configure the identity and payload

ID identifies the component. Name is the submitted field key. Static Value is the payload when selected; it is not the checked flag. Bind choice.checked to inspect selection. The value may remain ‘yes’ while checked is false. Read Only is not a way to lock a checkbox/radio; use Disabled when appropriate and account for omission from submission.

Select changes checked state

Select with Check true selects the control; false clears it. The underlying method can optionally trigger Changed/Checked/Unchecked events with its second argument, but the inspector’s Select action exposes only Check. Do not rely on Select firing a user event. Set Value changes the payload instead of selecting it. A bound Checked value can later restore selection.

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.

Example: verify the selected payload

Create a Radio Group with options basic and pro, both Name plan. Choose pro and read the group’s value as ‘pro’. In a FormData submit, inspect the plan field rather than expecting two checked booleans.

Handle selection events deliberately

User changes update checked and emit Changed plus Checked or Unchecked. Radio changes synchronize other radios with the same form/name. A programmatic change and a form reset do not have identical event semantics; attach server writes to a deliberate submit action rather than every selection event.

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.