Form fields

Conditional fields

Show a field only when another field has a certain value.

visibleWhen

Add visibleWhen to any node — a field, a column or a whole row — to show it only when another field has a value. Hidden nodes are not drawn, so they are not validated.

Tests: equals (radio, select, text), includesAny and includesAll (checkbox groups).

{ type: "column", id: "c-email", visibleWhen: { field: "contactBy", equals: "Email" }, children: [ ... ] }

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-contact",
        "props": {
          "className": "col-12"
        },
        "children": [
          {
            "type": "RadioGroupField",
            "id": "contact-by",
            "props": {
              "name": "contactBy",
              "label": "How should we contact you?",
              "required": true,
              "options": [
                "Email",
                "Phone",
                "Post"
              ]
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-email",
        "visibleWhen": {
          "field": "contactBy",
          "equals": "Email"
        },
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "email",
            "props": {
              "type": "email",
              "name": "email",
              "label": "Email",
              "required": true
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-phone",
        "visibleWhen": {
          "field": "contactBy",
          "equals": "Phone"
        },
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "phone",
            "props": {
              "type": "tel",
              "name": "phone",
              "label": "Phone",
              "required": true,
              "mask": "(###) ###-####"
            }
          },
          {
            "type": "SelectField",
            "id": "best-time",
            "props": {
              "name": "bestTime",
              "label": "Best time to call",
              "options": [
                "Morning",
                "Afternoon",
                "Evening"
              ]
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-address",
        "visibleWhen": {
          "field": "contactBy",
          "equals": "Post"
        },
        "props": {
          "className": "col-12"
        },
        "children": [
          {
            "type": "TextareaField",
            "id": "address",
            "props": {
              "name": "address",
              "label": "Postal address",
              "rows": 2,
              "required": true
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-2",
    "children": [
      {
        "type": "column",
        "id": "c-extras",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "CheckboxGroupField",
            "id": "extras",
            "props": {
              "name": "extras",
              "label": "Extras",
              "options": [
                "Newsletter",
                "Special offers"
              ]
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-offer",
        "visibleWhen": {
          "field": "extras",
          "includesAny": [
            "Special offers"
          ]
        },
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "offer-type",
            "props": {
              "name": "offerType",
              "label": "Offers about",
              "required": true,
              "options": [
                "Books",
                "Music",
                "Travel"
              ]
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "col-buttons",
        "props": {
          "className": "d-flex justify-content-end"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "submit",
            "props": {
              "type": "submit",
              "text": "Submit",
              "onClick": "runValidation()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`visibleWhen.field`	The field to watch (its `name`).
`visibleWhen.equals`	Show when the value equals this (radio, select, text).
`visibleWhen.includesAny / includesAll`	Show when a checkbox group has any / all of these.

Events

Event	When it runs	Your action receives
`onSubmit`	Valid submit.	Hidden fields still appear in the entries, with an empty value, so every entry has the same keys.