Form Field Types

The Field Type Picker

You choose a field's type from the Type dropdown at the top of the field's settings panel. The list is grouped so related types sit together — text-like types, choice types, date/time, numeric, and structural types. Changing the Type re-shapes the inspector: the shared controls stay and the type-specific ones swap to match the new type.

All 27 Field Types

Controls Every Field Shares

These controls appear on almost every field type. Each type's extras are on top of these.

Content

Validation

Interactions

Appearance

Permissions

Text & String Fields

Text (STRING)

Single-line free text. Supports placeholder, default value, max length, text transform. On text-family fields you can validate with minimum/maximum length, regex matching, starts-with, ends-with, contains, equals, in-list.

Text Area (TEXTAREA)

Multi-line text. Same properties as Text plus a Rows option to set the visible height. Best for longer free-form entries like comments, descriptions, or addresses.

Email (EMAIL)

Text input with built-in email format validation on submit. The format check runs in addition to any custom validity conditions. Keyboard hint on mobile shows the @ symbol prominently.

Password (PASSWORD)

Masked input. Value is readable from {{ form1.data.fieldKey }} (plain string) — masking is only visual. Use validity conditions to enforce minimum length, complexity, and password-confirmation matching.

Rich Text (RICH_TEXT)

WYSIWYG formatted text editor. The submitted value is an HTML string. Max length applies to the raw HTML. Use for entries where formatting matters — notes, descriptions, templates.

Numeric Fields

Number (NUMBER)

Decimal number input. Supports Min Value, Max Value, decimal precision, and the standard comparison validators (greater than, less than, equals). The value in {{ form1.data.fieldKey }} is a JS number.

Integer (INTEGER)

Whole-number input. Min/Max accept integers only. Keyboard shows numeric pad on mobile. Same validators as Number; the submitted value is always an integer.

Slider (SLIDER)

Drag handle that produces a number within a configured range. Set Min and Max to define the range and Step to control the increment. Value is a number.

Currency (CURRENCY_INPUT)

Numeric amount paired with a currency-code selector (e.g. USD, EUR). Options can come from a data source. The submitted value includes both amount and currency code.

Rating (RATING)

Row of stars (or a custom icon). Set Max Rating for the number of stars. Value is a number from 1 to max. Decimal values from data render as partially filled icons.

Date & Time Fields

Date (DATE)

Calendar picker for a date without time. Supports Single or Range variant. Formats: ISO 8601 string or Unix epoch timestamp. Display format is configurable (MMMM dd, yyyy; d MMM yyyy; yyyy-MM-dd; etc.). Date Selection Limits add-on restricts which days can be picked: Only Future, Only Past, or Custom Range.

Time (TIME)

Time-of-day picker. Configurable format (HH:mm or HH:mm:ss). Value is a time string. Supports min/max time restrictions.

Date & Time (DATE_TIME)

Combined picker for date and time together. Same format options as Date. Value is an ISO 8601 datetime string or epoch timestamp. Useful for event start times, deadlines.

Choice Fields

Single-select Dropdown (SINGLE_SELECT_DROPDOWN)

Dropdown for picking exactly one option. Options come from a hand-typed list or a data source. Supports search/filter within the list. Value is the chosen option's value string.

Multi-select Dropdown (MULTI_SELECT_DROPDOWN)

Dropdown for picking several options. Value is an array of selected value strings. Supports select-all, typed custom values, and data-source options with search. Use when the option list is too long to show all at once.

Boolean (BOOLEAN)

Checkbox-style yes/no. Value is true or false. Only fires On Change — no On Focus or On Blur. No label positioning; the label sits beside the checkbox.

Switch (SWITCH)

Toggle-switch style boolean. Same behavior as Boolean. Value is true or false. Only fires On Change.

Checkbox (CHECKBOX)

Multi-pick from a visible list of checkboxes. Each option can have its own visibility condition. Options can come from a data source. Use for small sets of always-visible multi-pick choices.

Radio (RADIO)

Single-pick from a visible list of radio buttons. Each option can have its own visibility condition. Options can come from a data source. Use when the option set is small enough to show all at once.

File & Specialized Fields

File Uploader (FILE_UPLOADER)

File picker embedded in the form. Supports single or multiple files, accepted types, per-file size cap, and file visibility (Public / Restricted / Only Me). Uploaded files are available in the form's data as file descriptors (URL, name, size, mime type). See File Upload for standalone block details.

Pin Input (OTP)

Per-digit boxes for 4- or 6-digit PIN or OTP codes. No Is Optional toggle and no Default value. Length is either 4 or 6. Supports masked variant. Value is a string of digits.

Phone Number (PHONE_NUMBER)

Text input with a country-code selector. Stores number with country code. Built-in format hint adapts to selected country.

Rich Text (RICH_TEXT)

See Text & String Fields above.

Code Editor (CODE_EDITOR)

Syntax-highlighted code input. Configure the language mode (JavaScript, JSON, SQL, etc.). Value is a string. Useful for template editors, configuration inputs.

Key-Value Pair (KEY_VALUE_PAIR)

Editable map of string-to-string pairs. Users can add and remove rows. Value is an object. Use for HTTP headers, metadata, custom attributes.

Container Fields: Object & Array

Object and Array are the two container field types — fields that hold other fields inside them.

• Object groups a fixed set of child fields under one key. No Default value control. Build child fields in the Object's settings panel.

• Array repeats a set of child fields as a list the user can add rows to. No Is Optional toggle.

Field Events

Options from a Data Source

Five choice fields can build their option list from a data source instead of a hand-typed list — the choices stay in sync with live data:

• Single-select Dropdown

• Multi-select Dropdown

• Radio

• Checkbox

• Currency

Configure the data source under Content → Options on the field. Map option label and value from the source fields. Per-option visibility conditions still work on data-source options.

Behavior & Gotchas

Warning: A dynamic default value can overwrite what the user typed — with no On Change event. When a field's Default value is a {{ … }} binding and that bound value changes, the field's current value is silently replaced. Use a fixed default if you don't want this.

Note: Every field is optional until you turn "Is Optional" off. Fields are optional by default. The Is Optional toggle is a plain on/off — it cannot follow a condition. Use a validity condition or visibility + required for conditional requirements.

Warning: Max length blocks typing with no message. Setting Max length on a text-family field stops keystrokes once the cap is reached — there is no error message. If a text field "won't let me type more", check its Max length.

Note: Text transform rewrites the stored value, not just the display. Set Text transform to UPPERCASE and the submitted data is uppercase. Also enforced at submit: a value that doesn't match the configured transform blocks submission.

Note: Pin Input and Object have no Default value control. For Object, prefill its child fields instead. Pin Input cannot be pre-filled.

Note: "Collapsed by default" only works when "Collapsible" is on. On Object and Array fields, turn Collapsible on first, then Collapsed by default.

Frequently Asked Questions

How do I make a field required only when another field has a specific value?

The Is Optional toggle is static — it can't follow a condition. To make a field conditionally required, either: (1) add a Validity condition that passes when the controlling field is not the trigger value OR when the field is filled; or (2) set Is Optional off and use a Visibility condition so the field only appears when relevant (hidden fields are skipped by validation). See Conditionally Required Fields.

Why can't I type any more characters into my text field?

The field has a Max Length set under Validation. This is a hard input cap — keystrokes stop registering once the limit is reached, with no error message shown. Check and raise or clear the Max Length setting for the field. Note this is different from a validity condition with a max-length rule, which would show an error message instead.

My checkbox or boolean field doesn't have an On Focus/On Blur event — is that a bug?

No, this is by design. Boolean and Switch fields only fire On Change. They have no On Focus or On Blur events because they receive clicks, not keyboard focus in the same way text fields do. Move any logic that was wired to focus/blur to On Change instead.

How do I populate dropdown options from a database or API?

For Single-select Dropdown, Multi-select Dropdown, Radio, Checkbox, and Currency fields, switch Options Type from Manual to Lookup in the field's Content settings. Select the data source, map the Label Field and optionally a value field. The options will update whenever the data source refreshes. You can also configure Search Type (Contains or Starts With) and whether to search by label or label+value.

Can I set a field's value from a button click?

Yes — from any button's click event, add a Control block method action targeting the form block. Use the setFieldValue method with the field's key and the new value. For multiple fields at once, use setFieldsValue. Note these methods do not fire the field's On Change event.

Common Patterns

Make a Field Required

1. Open the field's settings → Validation.

2. Turn Is Optional off.

3. The field now blocks form submission until it has a value.

Multi-select Dropdown from a Data Source

1. Add a Multi-select Dropdown field.

2. In Content → Options, switch from "Manual" to a data source.

3. Map Label and Value to the source's fields.

4. The options update whenever the source data changes.

5. Access selected values with {{ form1.data.myField }} — an array of value strings.

Repeating Group with Array Field

1. Add an Array field and name it (e.g. lineItems).

2. Inside the Array, add child fields: Text for name, Number for quantity, Currency for price.

3. Set Add Item Label to "Add line item".

4. Users click the button to add rows; {{ form1.data.lineItems }} is an array of objects.