Form fields

Input fields

Text, email, password, number, date, phone with a mask, color and checkbox inputs.

InputField

InputField draws an <input>. Pick the kind with props.type: text (default), email, password, number, date, tel, color, checkbox, ...

Every field needs a name — it is the key of its value. label and placeholder are the texts. uppercase / lowercase change letters while typing, and mask formats digits (# = one digit).

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-text",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "full-name",
            "props": {
              "name": "fullName",
              "label": "Full name (uppercase)",
              "placeholder": "Jane Doe",
              "uppercase": true,
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-email",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "email",
            "props": {
              "type": "email",
              "name": "email",
              "label": "Email (lowercase)",
              "lowercase": true,
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-password",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "password",
            "props": {
              "type": "password",
              "name": "password",
              "label": "Password",
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-phone",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "phone",
            "props": {
              "type": "tel",
              "name": "phone",
              "label": "Phone (mask)",
              "mask": "(###) ###-####",
              "placeholder": "(555) 123-4567",
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-number",
        "props": {
          "className": "col-6 col-md-3"
        },
        "children": [
          {
            "type": "InputField",
            "id": "quantity",
            "props": {
              "type": "number",
              "name": "quantity",
              "label": "Quantity",
              "min": 1,
              "max": 10,
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-date",
        "props": {
          "className": "col-6 col-md-3"
        },
        "children": [
          {
            "type": "InputField",
            "id": "start",
            "props": {
              "type": "date",
              "name": "startDate",
              "label": "Start date",
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-color",
        "props": {
          "className": "col-6 col-md-3"
        },
        "children": [
          {
            "type": "InputField",
            "id": "theme",
            "props": {
              "type": "color",
              "name": "themeColor",
              "label": "Color",
              "onChange": "fieldChanged()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "c-check",
        "props": {
          "className": "col-6 col-md-3 d-flex align-items-center"
        },
        "children": [
          {
            "type": "InputField",
            "id": "agree",
            "props": {
              "type": "checkbox",
              "name": "agree",
              "label": "I agree",
              "onChange": "fieldChanged()"
            }
          }
        ]
      }
    ]
  },
  {
    "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": "Change any field."
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`type`	`text`, `email`, `password`, `number`, `date`, `tel`, `color`, `checkbox`, `radio`, `range`, ...
`name`	Key of the value (defaults to the node id).
`label / placeholder`	Texts shown with the field.
`uppercase / lowercase`	Convert letters while typing.
`mask`	Format digits while typing: `"(###) ###-####"`, `"####-####-####-####"`.
`min / max`	Number range (checked on Submit, see Validation).
`disabled / readOnly`	Normal input attributes are passed through.

Events

Event	When it runs	Your action receives
`onChange`	Every edit.	`(event, { name, value })` — `value` is `true` / `false` for a checkbox.
`onBlur / onFocus / onKeyDown`	Focus leaves / arrives, a key is pressed.	`(event, { name, value })`