Form fields

Repeatable entries

Let the user add the same group of fields several times (e.g. several contacts).

repeatable: true

With useDynamicTag({ repeatable: true }) the user can add the same set of fields again — for example several contacts. Each copy gets an "Entry N" heading and a Remove button.

Put the buttons in buttons (not in schema) so they appear once, below all entries. The built-in addCopy() adds an entry.

onSubmit receives one object per entry, all with the same keys: [{ name, email }, { name, email }].

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.

{
  "schema": [
    {
      "type": "row",
      "id": "row-contact",
      "children": [
        {
          "type": "column",
          "id": "c-name",
          "props": {
            "className": "col-12 col-md-6"
          },
          "children": [
            {
              "type": "InputField",
              "id": "name",
              "props": {
                "name": "name",
                "label": "Contact name",
                "required": true
              }
            }
          ]
        },
        {
          "type": "column",
          "id": "c-email",
          "props": {
            "className": "col-12 col-md-6"
          },
          "children": [
            {
              "type": "InputField",
              "id": "email",
              "props": {
                "type": "email",
                "name": "email",
                "label": "Email",
                "required": true
              }
            }
          ]
        }
      ]
    }
  ],
  "buttons": [
    {
      "type": "row",
      "id": "row-buttons",
      "children": [
        {
          "type": "column",
          "id": "col-buttons",
          "props": {
            "className": "d-flex justify-content-between mt-2"
          },
          "children": [
            {
              "type": "ButtonField",
              "id": "add",
              "props": {
                "text": "+ Add another contact",
                "variant": "outline-primary",
                "onClick": "addCopy()"
              }
            },
            {
              "type": "ButtonField",
              "id": "submit",
              "props": {
                "type": "submit",
                "text": "Submit",
                "onClick": "runValidation()"
              }
            }
          ]
        }
      ]
    }
  ]
}

Options used here

Option	What it does
`repeatable (useDynamicTag)`	Allow copies of the schema.
`buttons (useDynamicTag)`	Nodes drawn once, after all copies.
`addCopy() / removeCopy()`	Built-in actions to add / remove an entry.

Events

Event	When it runs	Your action receives
`onSubmit`	All entries are valid.	`[{ name, email }, { name, email }, ...]`

Tips

Inside the page, copy N's field names get a __N suffix (email__2); the entries strip it.