Form fields

Selects & dependent selects

Drop-down lists, and a second list whose options follow the first one.

SelectField

options can be plain strings (["Red", "Green"]) or { label, value } objects when the shown text differs from the stored value. placeholder is the empty first choice.

Dependent selects — optionsFrom

optionsFrom: { field, map } makes a list follow another field: map has one option list per value of that field. Changing the first field clears the second. waitingText shows while the first field is empty.

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-size",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "size",
            "props": {
              "name": "size",
              "label": "Size (strings)",
              "options": [
                "Small",
                "Medium",
                "Large"
              ],
              "onChange": "selectChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-plan",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "plan",
            "props": {
              "name": "plan",
              "label": "Plan (label / value)",
              "placeholder": "Choose a plan",
              "options": [
                {
                  "label": "Free — $0",
                  "value": "free"
                },
                {
                  "label": "Pro — $9",
                  "value": "pro"
                },
                {
                  "label": "Team — $29",
                  "value": "team"
                }
              ],
              "onChange": "selectChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-country",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "country",
            "props": {
              "name": "country",
              "label": "Country",
              "options": [
                "USA",
                "India",
                "Germany"
              ],
              "onChange": "selectChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-city",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "city",
            "props": {
              "name": "city",
              "label": "City (follows Country)",
              "onChange": "selectChanged()",
              "optionsFrom": {
                "field": "country",
                "waitingText": "Select a country first",
                "emptyText": "No cities for {value}",
                "map": {
                  "USA": [
                    "New York",
                    "Chicago",
                    "Austin"
                  ],
                  "India": [
                    "Chennai",
                    "Mumbai",
                    "Delhi"
                  ],
                  "Germany": [
                    "Berlin",
                    "Munich"
                  ]
                }
              }
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-result",
    "children": [
      {
        "type": "column",
        "id": "col-result",
        "children": [
          {
            "type": "P",
            "id": "result",
            "props": {
              "className": "alert alert-secondary py-2 small mb-0",
              "text": "Pick something."
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "col-buttons",
        "props": {
          "className": "d-flex gap-2 mt-3"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "set-city",
            "props": {
              "text": "Set Germany → Munich from code",
              "onClick": "setCity()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`options`	`["A", "B"]` or `[{ label, value }]`.
`placeholder`	Text of the empty first option.
`optionsFrom.field`	The field this list follows.
`optionsFrom.map`	`{ parentValue: [options] }`.
`optionsFrom.waitingText / emptyText`	Shown when the parent is empty / has no options (`{value}` = parent value).

Events

Event	When it runs	Your action receives
`onChange`	A choice is made.	`(event, { name, value })`