Form Input Components

Give every form component a name prop. Validation requires it for Textarea, DatePicker, Checkbox, and RadioGroup; it does not check Input or Select, but without a name their value has no state key, so always set it. In a remote-dom widget (the default content type), the component's live value is written into local widget state under that key as the visitor interacts with it. Text fields, dates, selects, and radios write strings; checkboxes write booleans. An undefined key is initialized from the field's value, defaultValue, or defaultChecked; existing values, including empty strings and false, survive action rerenders.

The state value can be read as {name} when the widget next renders, for example after a setVariable action. Typing or selecting alone updates state without rerendering other text or state branches. Declare the matching variable when using it in a conditional state or targeting it with setVariable. Server args and additionalInputs do not interpolate these values.

In a rawHtml widget, native form fields can still be edited, but edits don't write back to widget state. See Widgets Overview for the difference between content types.

Input

Renders a standard <input>.

Prop	Type	Description
name	string	State key updated on input. Not checked by validation, but needed for the value to be stored.
type	string	HTML input type (e.g. "text", "email", "number"). Defaults to "text".
placeholder	string	Placeholder text. Supports {variable} interpolation.
value	string	Initial value. Supports {variable} interpolation.

Select

Renders a <select> with a fixed option list.

Prop	Type	Description
name	string	State key updated on selection. Not checked by validation, but needed for the value to be stored.
options	{ label: string, value: string }[]	Required. The dropdown's options.
defaultValue	string	Pre-selected option value.
placeholder	string	Shown as a disabled placeholder option when no value is selected.

Textarea

Renders a multi-line <textarea>.

Prop	Type	Default	Description
name	string	—	Required. State key updated on input.
placeholder	string	—	Placeholder text.
defaultValue	string	—	Initial value.
rows	number	4	Visible row count.

DatePicker

Renders a native <input type="date">.

Prop	Type	Description
name	string	Required. State key updated on input.
placeholder	string	Accepted in the spec; the native date renderer does not emit a placeholder.
defaultValue	string (yyyy-MM-dd)	Initial date.
min	string (yyyy-MM-dd)	Earliest selectable date.
max	string (yyyy-MM-dd)	Latest selectable date.

Checkbox

Renders a labeled <input type="checkbox">.

Prop	Type	Description
name	string	Required. State key updated on toggle.
label	string	Text shown next to the checkbox.
defaultChecked	boolean	Initial checked state.

RadioGroup

Renders a set of labeled <input type="radio"> inputs sharing one name.

Prop	Type	Default	Description
name	string	—	Required. State key updated on selection.
options	{ label: string, value: string, disabled?: boolean }[]	—	Required, non-empty.
defaultValue	string	—	Pre-selected option value.
direction	"row" | "col"	"row"	Layout direction of the options.

{
  "component": "RadioGroup",
  "props": {
    "name": "plan",
    "direction": "col",
    "options": [
      { "label": "Monthly", "value": "monthly" },
      { "label": "Annual (save 20%)", "value": "annual" }
    ]
  }
}