Form inputs & bindings

Use common form controls as live App Connect data sources in Wappler, and learn how bindings, events, and type conversion interact while users type, select, and toggle values.

Form inputs & bindings

This tour uses real form controls to explain how App Connect reads and reacts to user input. You will inspect where values come from, how bindings expose those values in Wappler, and where event timing or string conversion changes the result you see.

What you’ll learn

This tour explains how real form controls behave once App Connect is involved: where their values come from, when those values are strings, how grouped inputs expose a shared result, and which bindings you reach for in day-to-day form work.

Bindings

dmx-bind:value and input.value

Types

Inputs are strings; use toNumber() when needed

Groups

Checkbox and radio groups expose one group value

Bind an input to a Variable

Read values from checkboxes/radios/selects

Use toNumber() for numeric logic

Where you configure it

This tour selects a real form field and then highlights its binding and event controls in Properties (so you know exactly where to configure it).

Bind an input to a Variable

A common pattern: store form state in a Variable, then bind an input to it.

Variable (state source)

This Variable holds the value used by the input binding.

Input (value source)

Inputs expose their current value as inputId.value, and can also be bound to App Connect state.

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Value binding (dmx-bind:value) and see how it fits into this area.

Value binding (dmx-bind:value)

This field’s value binding is configured visually in Properties. Use the picker to insert a valid expression.

Changed event action

This event is where you attach actions that should run after the value updates. This step matters because Changed event action is part of Selection Panels Properties Changedvalue, and understanding that context makes the next action easier to repeat in your own project.

Types: inputs are strings

Form inputs are strings by default. Convert to numbers explicitly when doing math or comparisons.

Age input

This number input is still a string value in expressions until you convert it.

Use toNumber() when needed

Convert strings to numbers to avoid surprising results (like ‘2’ + 1 → ‘21’).

important: When you read a value from an input or from Query Manager, treat it as a string unless you convert it.

ageInput.value.toNumber()

query.id.toNumber()

Use numeric comparisons after conversion

Checkboxes: checked vs value

Checkbox inputs expose a boolean checked state. Bind to checked when you want true/false.

Switch checkbox

This switch uses dmx-bind:checked to sync with App Connect state.

Checked binding (dmx-bind:checked)

This binding controls the checkbox checked state using an expression (true/false). This step matters because Checked binding (dmx-bind:checked) is part of Selection Panels Properties Checkedvalue, and understanding that context makes the next action easier to repeat in your own project.

Checked event action

Use the Checked event to run actions when the user toggles the checkbox. This step matters because Checked event action is part of Selection Panels Properties Checked, and understanding that context makes the next action easier to repeat in your own project.

Checkbox Group (multiple selection)

Use a Checkbox Group wrapper to treat a set of checkboxes as one value source.

tip: In Wappler, use the Checkbox Group component so you can bind to one group value and keep the structure clean.

Selects and radio groups

Select and Radio Group controls are common for single-choice input.

Country select (value)

A select control exposes the currently selected value as selectId.value.

Selected value binding (dmx-bind:value)

This binding controls the select’s selected value using an expression. This step matters because Selected value binding (dmx-bind:value) is part of Selection Panels Properties Selectvalue, and understanding that context makes the next action easier to repeat in your own project.

Changed event action (select)

Attach actions here when you need to react to the newly selected value. This step matters because Changed event action (select) is part of Selection Panels Properties Changedvalue, and understanding that context makes the next action easier to repeat in your own project.

Radio Group (single selection)

Use a Radio Group wrapper for a set of radios so you can read one group value.

Preview mode: see values update

Switch to Preview mode and change a few controls. The Live preview card updates immediately via bindings.

Preview mode

Switch the page to Preview mode so you can interact with it like a real app.

Wait for Preview mode

Wait for the page to finish switching modes.

Checkbox interaction

We’ll toggle the Agree switch. Notice how demoForm.agreeSwitch.checked updates in the Live preview.

Country select value

The tour selects another Country value so you can see demoForm.countrySelect.value update in the Live preview.

Checkbox group value

The checkbox group aggregates checked items into one array value (demoForm.interestsGroup.value).

Another checkbox selection

Selecting another interest appends another value to the group array.

Radio interaction

We’ll pick a plan option. demoForm.planGroup.value reflects the selected radio.

Try typing in the name field

Edit the Full name field and watch both fullName.value and demoForm.nameInput.value change in the preview panels.

Return to Edit mode

Switch back to Edit mode to continue inspecting components.

Event timing (change vs changed)

When you run actions based on input changes, prefer App Connect’s changed/updated events when you need the updated value.

Prefer changed/updated for "latest" values

If you attach actions to input events, ensure you’re using the event that runs after the new value is in state.

tip: Common workflow: dmx-on:changed → set value / run validations / trigger data reload.

Use changed/updated when actions depend on the new value

Keep logic in actions, not inline scripts

Use pickers to select actions safely

Where to attach actions

Attach actions on the selected field (or on the form) in Properties. This step highlights the Dynamic Events section, where dmx-on:changed is a common choice for “latest value” workflows.

Wrap-up

Next, validate inputs and submit them to the server.

Next steps

Pick a related tour to continue.