Form Fields

Additional form field elements including TextArea, SelectBox, and Checkbox.

Important: Form fields do NOT support placeholder text. Use a Paragraph element as a label above the field instead.

TextArea/V1

Multi-line text input field for longer form responses.

JSON

{
  "type": "TextArea/V1",
  "id": "6Z-TxtAr-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "data-skip-shadow-settings": "true"
  },
  "params": {
    "label": "Your Message",
    "--style-background-color": "#fff"
  },
  "selectors": {
    ".elTextarea": {
      "attrs": {
        "name": "message",
        "className": "required1"
      }
    },
    ".textareaHolder, .borderHolder": {
      "attrs": {
        "style": { "padding-top": 12, "padding-bottom": 12 }
      },
      "params": {
        "--style-padding-horizontal": 12,
        "--style-border-width": 1,
        "--style-border-style": "solid",
        "--style-border-color": "rgba(0, 0, 0, 0.2)"
      }
    },
    "&.elFormItemWrapper, .textareaHolder, .borderHolder": {
      "attrs": {
        "style": { "border-radius": 4 },
        "data-skip-corners-settings": "false"
      }
    }
  }
}

SelectBox/V1

Dropdown select field with predefined options.

JSON

{
  "type": "SelectBox/V1",
  "id": "6Z-Selct-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "data-skip-shadow-settings": "true"
  },
  "params": {
    "label": "Select an Option",
    "--style-background-color": "#fff"
  },
  "selectors": {
    ".elSelect": {
      "attrs": {
        "name": "custom_field",
        "className": "required1"
      }
    },
    ".selectHolder, .borderHolder": {
      "attrs": {
        "style": { "padding-top": 12, "padding-bottom": 12 }
      },
      "params": {
        "--style-padding-horizontal": 12,
        "--style-border-width": 1,
        "--style-border-style": "solid",
        "--style-border-color": "rgba(0, 0, 0, 0.2)"
      }
    },
    "&.elFormItemWrapper, .selectHolder, .borderHolder": {
      "attrs": {
        "style": { "border-radius": 4 },
        "data-skip-corners-settings": "false"
      }
    }
  },
  "children": [
    {
      "type": "option",
      "attrs": { "value": "" },
      "children": [{ "type": "text", "innerText": "Choose..." }]
    },
    {
      "type": "option",
      "attrs": { "value": "option1" },
      "children": [{ "type": "text", "innerText": "Option 1" }]
    },
    {
      "type": "option",
      "attrs": { "value": "option2" },
      "children": [{ "type": "text", "innerText": "Option 2" }]
    }
  ]
}

Checkbox/V1

Checkbox input for boolean fields or agreements.

JSON

{
  "type": "Checkbox/V1",
  "id": "6Z-Chkbx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "checked": false
  },
  "selectors": {
    ".elCheckbox": {
      "attrs": {
        "name": "agree_terms",
        "className": "required1"
      }
    },
    ".elCheckboxIcon": {
      "attrs": {
        "style": { "width": 20, "height": 20 }
      },
      "params": {
        "--style-border-width": 2,
        "--style-border-style": "solid",
        "--style-border-color": "#d1d5db",
        "--style-background-color": "#ffffff"
      }
    },
    ".elCheckboxIcon.checked": {
      "params": {
        "--style-background-color": "#3b82f6",
        "--style-border-color": "#3b82f6"
      }
    }
  },
  "children": [
    {
      "type": "ContentEditableNode",
      "children": [
        { "type": "text", "innerText": "I agree to the " },
        {
          "type": "a",
          "attrs": { "href": "/terms" },
          "children": [{ "type": "text", "innerText": "Terms and Conditions" }]
        }
      ]
    }
  ]
}

Validation Classes

Add validation requirements using className:

Class	Description
`required1`	Field is required
`required0`	Field is optional

Common Field Names

Name	Type	Purpose
`email`	email	Email address
`full_name`	text	Full name
`first_name`	text	First name
`last_name`	text	Last name
`phone_number`	tel	Phone number
`message`	textarea	Message/comments

Supported Features

Element	Background	Border	Shadow	Corners
TextArea/V1	Yes	Yes	Yes	Yes
SelectBox/V1	Yes	Yes	Yes	Yes
Checkbox/V1	Yes	Yes	No	Yes