Form Fields

A field is a data slot with form state: a value at a JSON Pointer path, plus its focus and validation state. An element binds a prop to a field with the $field expression, in the prop's value position:

{
  "type": "input",
  "props": {
    "value": { "$field": "/name" },
    "placeholder": "Enter your name"
  }
}

Required

• $field (string, JSON Pointer RFC 6901): Path to the data field to bind. The field's value MUST match the value type the prop's definition declares.

A prop accepts $field only when the dialect declares it bindable; the declared value type is the field's type. Which prop carries the binding is a dialect choice (an input may bind value, a checkbox may bind checked), and an element MAY declare more than one bindable prop.

Behavior

Binding a prop with $field establishes:

1. Value binding: The prop's value stays synchronized with the data at the path.
2. Change handling: User edits are written back to the field.
3. Field state tracking: Focus and blur are tracked, and the field's validation state follows the element.

For value binding alone, value: { "$field": "/name" } is similar to:

{
  "value": { "$data": "/name" },
  "onChange": { "$action": "set", "$args": ["/name", { "$arg": "$0" }] }
}

However, $field additionally manages field state (focus, blur, and validation), which a plain $data read plus set action does not.

Composing with Custom Actions

A bound element MAY still define its own actions on event handlers; they run alongside the automatic value assignment and state tracking, which are not overridden:

{
  "type": "input",
  "props": {
    "value": { "$field": "/email" },
    "onChange": { "$action": "focus", "$args": ["#confirmEmail"] }
  }
}