Input

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Decoration and visibility use Dekorasyon ve görünürlük (BlockShell).

Presentational input bound to a document variable id. Pair with root.props.dataRequests and a Button runRequest/runMutation trigger. Control auto-picks from variable type (text/boolean/list) or override with email/tel/textarea/select. Select options come from the variable: type list with options[{id,label}] (not a block-level options prop). An array variable whose item type is text renders as a multi-value text field (add and remove rows) and stores a string array. An empty label renders nothing. The control is named by ariaLabel when that is set; otherwise it has no accessible name. labelHidden clips a non-empty label visually and keeps it for assistive tech. Optional controlStyle { fontSize, lineHeight, paddingX, paddingY, fontFamily, borderWidth, borderRadius, borderColorLight, borderColorDark, backgroundLight, backgroundDark } styles the control. borderColor and backgroundColor are aliases used when the light and dark keys are omitted. Width and radius take a theme token (none, sm, md, lg; radius also xl and full) or a px number. Omitted values keep the stylesheet: inherited font, padding 0.5rem 0.75rem, 1px border, and surface background. Shell appearance.border paints the block frame, not the control. A legacy search box uses an empty label, backgroundLight transparent, borderWidth 1, borderColorLight #cbd5e1, borderRadius 6, paddingX 10, and paddingY 8. rows sets the textarea row count and clears the default min-height. Legacy contact forms used 14px / 21px, padding 8px / 10px, and a row count near 123px. Consent / terms with a link: place VariableInputBlock (control checkbox) beside a RichTextBlock that holds the linked copy — do not expect a rich-text checkbox label on this block.

Fields

settings

Settings.

rows

Textarea row count. Omit to keep the default min-height. Legacy contact textareas used a row count near 123px with 21px line height and 10px vertical padding.

rows: 0

controlStyle

Control Style.

labelGap

Space between the label and the control, in pixels. Omit to keep the stylesheet gap.

labelGap: 0

field

variableId

Editor variable id to read/write.

field: {
  variableId: ""
}

label

Visible label. An empty string renders no label element. A non-empty label names the control. When the label is empty, ariaLabel is the accessible name.

field: {
  label: "Title"
}

labelHidden

When true, a non-empty label is clipped visually and kept for assistive tech. The control points at it with aria-labelledby.

field: {
  labelHidden: ""
}

ariaLabel

Accessible name used when the label is empty. Omitted when a visible or screen-reader label already names the control.

field: {
  ariaLabel: "Menu"
}

placeholder

Placeholder text.

field: {
  placeholder: "Search…"
}

required

HTML required attribute.

field: {
  required: true
}

control

auto|text|email|tel|textarea|number|checkbox|select — override HTML control. For select, variable must be type list with options[{id,label}].

field: {
  control: ""
}

maxLength

Optional max length for text controls.

field: {
  maxLength: 0
}

labelStyle

labelFontFamily

Label font family token (theme-body default).

labelStyle: {
  labelFontFamily: ""
}

labelFontSize

Label font size in px (default 14).

labelStyle: {
  labelFontSize: 0
}

labelColorLight

Label color override (light theme).

labelStyle: {
  labelColorLight: ""
}

labelColorDark

Label color override (dark theme).

labelStyle: {
  labelColorDark: ""
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "field": {
    "variableId": "",
    "label": "",
    "placeholder": "",
    "required": false,
    "control": "auto"
  },
  "labelStyle": {
    "labelFontFamily": "theme-body",
    "labelFontSize": 14,
    "labelColorLight": "",
    "labelColorDark": ""
  }
}

</details>