Interface Builder

Appearance

Input Block ​

Type: Reference | Audience: Interface builder user

The Input block renders a form field. It must be placed inside a form -- between a Form Start and Form End row on the canvas. Every input has a Label, a Type, and whatever extra settings its Type requires.

Builder view 'Input Block Demo' with a Form Start row, an Email Input block (Text type) selected on the canvas, a Submit Button row, and a Form End row. The Block Settings sidebar shows the Configuration sub-tab populated: Name 'Input', Label 'Email', Type 'Text', empty Placeholder / Help text / Pattern / Default Value fields, Required toggled on, and Disabled off.

Common Settings ​

These appear for every input regardless of Type, in this order in the Block Settings sidebar:

SettingDescription
LabelThe visible text shown above the field.
TypePicks the kind of input -- Text, Email, Number, etc. See the list below.
PlaceholderHint text shown inside the empty field. Available on Text, Textarea, Email, Number, URL, Single Select, and Multi Select only. Supports the Data Picker.
Help textSmaller hint text shown below the field (max 128 characters). Supports the Data Picker.
Default ValueA pre-filled value shown to the user. Supports the Data Picker. The help text under the field changes per Type to describe what's expected (for example YYYY-MM-DD format for Date, Coerced to a number for Number).
RequiredWhen on, the form cannot be submitted until this field is filled. The ⇄ button beside the label swaps the switch for a Data Picker field: the field is required when the value is true, yes or 1 (trimmed, case-insensitive), and optional for any other value, including empty. Hidden fields cannot be Required.
DisabledWhen on, the field is read-only. It sends its Default Value on submit and skips its validation. The ⇄ button offers the same Data Picker choice and rule as Required. Hidden fields cannot be Disabled; a change to Hidden turns both settings off and back to a switch.

Input Types ​

Basic Types ​

TypeWhat the user sees
TextSingle-line text box.
TextareaMulti-line text box.
EmailText box with built-in email validation.
NumberNumeric-only text box.
URLText box with built-in URL validation.
DateDate picker.
FileFile upload row: the user drops files onto it or clicks it to open the file dialog. A single-file input refuses a drop of several files.
HiddenNo UI -- the value is included in the submission but never shown to the user. Useful for pre-filling context data.

Extra settings on basic types ​

SettingApplies toDescription
PatternText, Textarea, Email, Number, URL, DateRegex pattern that the value must match. Supports the Data Picker.
Pattern ErrorSame as above (only shown after Pattern has a value)Custom error message shown when the pattern fails. Supports the Data Picker.
MinNumberMinimum accepted value. Supports the Data Picker.
MaxNumberMaximum accepted value. Supports the Data Picker.
Min ErrorNumber (only shown after Min has a value)Custom error message when the value is below Min.
Max ErrorNumber (only shown after Max has a value)Custom error message when the value is above Max.
Allow multiple filesFileOff by default. On, the input takes several files in one field: the user picks many at once, sees them listed, removes one, and adds more without losing the rest. It also fixes the field's payload shape -- a multi-file input always sends an array, a single-file input always sends an object. See File Fields.
Accepted file typesFileEmpty by default, which accepts every file. One comma-separated list of file extensions (.pdf) and MIME types (application/pdf, image/*); a bare word such as pdf reads as .pdf, case does not matter, and extra commas are ignored. An entry that is neither form, such as *.pdf or image/, shows an error under the field. The file dialog offers only these types, and the drop zone hint lists the first three. The drop zone turns red while a file of another MIME type is dragged over it, but never while the list holds an extension whose MIME type the field does not know. A file of another type, such as a dropped one, still joins the selection, but its row turns red and the form does not submit until the user removes it. The list is static: a Data Picker value cannot set it, and the server does not check it.
Max File Size (MB)FileUpper size limit for one file, weighed against each selected file on its own -- three 5 MB files pass a 10 MB limit. The maximum you can set depends on the surrounding form's Form Type: JSON forms allow up to 10 MB, Multipart/Form-Data forms allow up to 100 MB, and the label inside Block Settings shows the active one. The builder pre-fills the field with that ceiling, and lowers a value that is too high for the form type when the form type changes -- it never raises one you set yourself.
Max Total Size (MB)File, with Allow multiple files onUpper size limit for the whole selection added up. Same ceilings as Max File Size -- 10 MB on JSON forms, 100 MB on Multipart/Form-Data -- and the field arrives pre-filled with the ceiling.
Max Number of FilesFile, with Allow multiple files onHow many files the field accepts at once. Pre-filled with 10 on both form types; the highest you may set is 25 on JSON forms and 50 on Multipart/Form-Data. This is the only setting that stops a user attaching hundreds of tiny files, which a size limit alone lets through.
RowsTextareaVisible rows (1 to 20, default 3).
Max LengthTextareaMaximum character count. Leave empty for no limit.

A Default Value of 0 works for Number inputs (it renders as zero, not as an empty field). If you switch a field's Type away from Number, the four numeric settings (Min, Max, Min Error, Max Error) clear automatically. Switching Type away from File clears Allow multiple files and Accepted file types the same way, and turning Allow multiple files off clears Max Total Size (MB) and Max Number of Files -- they belong to a multi-file field alone.

Switching the surrounding form's Form Type lowers any of the three limits that the new type cannot afford, down to that type's ceiling. It never raises a number you set yourself.

Builder view 'test file input' with the Preview, Test and Sample data buttons in its header and an Areas button on the canvas. Block Settings is scrolled to a selected Input block whose Type is File. Help text and Default Value are empty. Under the heading 'Behavior', the Required and Disabled switches are off. Under the heading 'File upload', the 'Allow multiple files' switch is on, and the 'Accepted file types' field reads '.pdf, .png, image/*' with the grey hint 'Extensions or MIME types, comma-separated. Empty accepts every file.' under it. Below it, 'Max File Size (MB)' and 'Max Total Size (MB)' each read 100 with the hint 'Multipart forms support up to 100MB', and 'Max Number of Files' reads 10 with the hint 'Up to 50 on Multipart forms'. The canvas on the left shows Form Start with the form name 'Form d214', a Column row holding the selected 'files' block with a File badge, a Column row holding a 'Button' block with Submit and 'Form d214' badges, and Form End. No validation messages are shown.

All three limits are browser-side conveniences, not enforced ceilings. The server never reads an input's settings: it weighs every file field of a submission together against one budget of its own and refuses an over-budget submission with 413. It puts no cap on the file count at all, so Max Number of Files narrows what a person can pick through the form and nothing more. See File Size Limits for the numbers the server does enforce.

Selection Types ​

TypeWhat the user sees
CheckboxMultiple-choice checkboxes.
RadioSingle-choice radio buttons.
Single SelectDropdown for a single choice.
Multi SelectDropdown for multiple choices.

Each selection input has:

SettingDescription
Options TypePick Static (you type the options in the builder) or Dynamic (options come from data at render time).

For selection inputs with Static options, the Default Value field also gains a small swap button next to its label. The button toggles between two modes:

  • A dropdown of the static options (the selection's stored value is the option's value).
  • A plain-text input that supports template variables -- type the option's value directly, optionally as a Data Picker expression. For multi-value selections (Checkbox / Multi Select) separate values with commas.

Static options ​

Click the Manage options button and add rows. Each row has:

ColumnDescription
LabelThe text shown to the user.
ValueThe value submitted when this option is selected.

Both columns are required and must be at least 1 character long.

Dynamic options ​

SettingDescription
Labels DelimiterSeparator used to split the resolved labels string. Default: ,.
Values DelimiterSeparator used to split the resolved values string. Default: ,.
LabelsData Picker expression that resolves to the option labels.
ValuesData Picker expression that resolves to the option values.

A warning banner inside Block Settings reminds you that if your data contains the delimiter character, the options may be split incorrectly.

Form Requirement ​

An input always needs a surrounding form:

  • Place the input between a Form Start and Form End row.
  • The form needs at least one input and at least one Form Submit Button pointing at it.
  • The File type cannot be used in a form whose Form Type is Open view with form data, because that mode passes values as URL parameters and cannot carry files. The builder shows a clear error if you try.

Style and Visibility ​

The Input block uses the standard Style sub-tab (background, font, borders, radius) and Visibility sub-tab in Block Settings, the same as every other block. See Block Styles and Conditional Visibility.