Form fields

Radios, checkboxes, slider, textarea

Pick one, pick many, slide to a number or type a longer text.

One choice, many choices, a number, a long text

RadioGroupField lets the user pick one of options (inline: false stacks them). CheckboxGroupField allows several; its value is an array.

SliderField picks a number between min and max and shows it (valueSuffix adds a unit). TextareaField is a multi-line text box (rows).

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-radio",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "RadioGroupField",
            "id": "delivery",
            "props": {
              "name": "delivery",
              "label": "Delivery",
              "options": [
                "Standard",
                "Express",
                "Pick up"
              ],
              "onChange": "choiceChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-checks",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "CheckboxGroupField",
            "id": "toppings",
            "props": {
              "name": "toppings",
              "label": "Toppings",
              "options": [
                "Cheese",
                "Olives",
                "Peppers",
                "Onions"
              ],
              "onChange": "choiceChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-radio-stacked",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "RadioGroupField",
            "id": "size",
            "props": {
              "name": "size",
              "label": "Size (stacked)",
              "inline": false,
              "options": [
                {
                  "label": "Small (8\")",
                  "value": "S"
                },
                {
                  "label": "Medium (12\")",
                  "value": "M"
                },
                {
                  "label": "Large (16\")",
                  "value": "L"
                }
              ],
              "onChange": "choiceChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-slider",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "SliderField",
            "id": "spice",
            "props": {
              "name": "spice",
              "label": "Spice level",
              "min": 0,
              "max": 10,
              "step": 1,
              "defaultValue": 3,
              "valueSuffix": " / 10",
              "onChange": "choiceChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-notes",
        "props": {
          "className": "col-12"
        },
        "children": [
          {
            "type": "TextareaField",
            "id": "notes",
            "props": {
              "name": "notes",
              "label": "Notes",
              "rows": 3,
              "placeholder": "Anything else?",
              "onBlur": "choiceChanged()"
            }
          }
        ]
      }
    ]
  },
  {
    "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": "Choose something."
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`RadioGroupField { options, inline }`	One choice; `inline` (default true) puts options on one line.
`CheckboxGroupField { options, requiredOptions }`	Several choices; value is an array. `requiredOptions` must all be checked.
`SliderField { min, max, step, defaultValue, showValue, valueSuffix }`	A number slider that shows its value.
`TextareaField { rows }`	Multi-line text (default 4 rows).

Events

Event	When it runs	Your action receives
`onChange`	A choice changes / the slider moves.	`(event, { name, value })` — an array for checkbox groups.
`onBlur`	Leaving the textarea.	`(event, { name, value })`