Form fields

Read & set values

Fill the form from code, read what the user typed, reset or clear it.

Set values from code

api.setFormData({ ... }) sets many fields; api.setFieldValue(name, value) sets one. Both work for fields that are hidden or still waiting for a dependent list.

data in useDynamicTag({ data }) gives the starting values; api.resetForm() goes back to them and api.clearForm() empties everything.

Read values

api.getFormData() returns a flat object of every field on the page. api.getFormEntries() returns [{ ... }] — one object per entry — the same shape onSubmit receives.

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-1",
    "children": [
      {
        "type": "column",
        "id": "c-first",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "InputField",
            "id": "first",
            "props": {
              "name": "firstName",
              "label": "First name"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-last",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "InputField",
            "id": "last",
            "props": {
              "name": "lastName",
              "label": "Last name"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-plan",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "plan",
            "props": {
              "name": "plan",
              "label": "Plan",
              "options": [
                "Free",
                "Pro",
                "Team"
              ]
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-news",
        "props": {
          "className": "col-12"
        },
        "children": [
          {
            "type": "InputField",
            "id": "newsletter",
            "props": {
              "type": "checkbox",
              "name": "newsletter",
              "label": "Newsletter"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "col-buttons",
        "props": {
          "className": "d-flex flex-wrap gap-2 mb-3"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "fill",
            "props": {
              "text": "setFormData",
              "onClick": "fillAll()"
            }
          },
          {
            "type": "ButtonField",
            "id": "one",
            "props": {
              "text": "setFieldValue (plan)",
              "onClick": "setPlan()"
            }
          },
          {
            "type": "ButtonField",
            "id": "read",
            "props": {
              "text": "getFormData",
              "variant": "outline-primary",
              "onClick": "readData()"
            }
          },
          {
            "type": "ButtonField",
            "id": "entries",
            "props": {
              "text": "getFormEntries",
              "variant": "outline-primary",
              "onClick": "readEntries()"
            }
          },
          {
            "type": "ButtonField",
            "id": "reset",
            "props": {
              "text": "resetForm",
              "variant": "outline-secondary",
              "onClick": "resetForm()"
            }
          },
          {
            "type": "ButtonField",
            "id": "clear",
            "props": {
              "text": "clearForm",
              "variant": "outline-danger",
              "onClick": "clearForm()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-output",
    "children": [
      {
        "type": "column",
        "id": "col-output",
        "children": [
          {
            "type": "DIV",
            "id": "output",
            "props": {
              "className": "border rounded p-2 bg-body-tertiary font-monospace small",
              "children": "Values appear here."
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`data (useDynamicTag)`	Starting values `{ name: value }`.
`api.setFormData(values) / setFieldValue(name, value)`	Set values from code.
`api.getFormData()`	Flat `{ name: value }` of every rendered field.
`api.getFormEntries()`	`[{ ... }]`, one object per entry.
`api.resetForm() / clearForm()`	Back to `data` / empty everything.

Events

Event	When it runs	Your action receives
`onClick`	A button is pressed.	`(event, { name })`