Specialized Inputs

Purpose-built input controls for OTP codes, rich text, ratings, sliders, currency amounts, and handwritten signatures — each with unique behavior and gotchas.

Pin Input Block (OTP)

The Pin Input block collects a fixed-length code — 4 or 6 digits — one cell per character, the classic OTP (one-time password) entry pattern. Five visual variants change how each cell looks: Box, Underline, Circle, Solid Circle, and Check Circle. The last two never show the typed character. A new block is a 6-digit unmasked Box.

Content properties

Events, Methods & State

Note: There is no "complete" event. On Change fires on every character with the full code so far; nothing fires when the last cell is filled. To auto-submit when all digits are entered, add your verify action to the Pin Input's On Change event and set its Only run when condition to {{ pinInput1.value.length }} equals 6 (use 4 for a 4-digit pin).

OTP Form Field

The OTP form field renders the same Pin Input widget inside a Form block. The field type is labeled "Pin Input" in the builder. A key difference from other fields: it has no Default Value and its "Is Optional" toggle is always hidden (the field is treated as optional; use validity conditions to enforce completeness).

Key properties unique to OTP

Warning: No Default Value and no Is Optional toggle. The OTP field always starts empty. To enforce that all digits are filled, add a Validity Condition with a Minimum Length operator set to the code length (4 or 6). This is checked on submit and cannot be replaced with the Is Optional switch.

Rich Text Block

The Rich Text block is a standalone WYSIWYG editor for authoring and displaying formatted content — headings, bold, lists, links, tables, images, colors, and highlights. Its value is an HTML string exposed as {{ id.value }}. Inside a Form, use the Rich Text form field to include it in the submit payload.

Key properties

Events, Methods & State

Warning: Binding Default value to the block's own value causes cursor jumps. If Default value is bound to an expression that echoes {{ richText1.value }}, every keystroke re-applies the content and the cursor drops to the end. Bind Default value to a different source; read what the user typed from {{ id.value }}.

Rating Block

The Rating block shows a row of icons (stars by default) that users click to pick a score from 1 up to a configurable maximum. Decimal values from bound data render as partially filled icons. Setting Editable to false makes it a read-only display widget.

Properties

Events, Methods & State

Note: Users can only click whole numbers and cannot click below 1. To offer a "clear rating" affordance, add a button that calls setValue with an empty value.

Rating Form Field

The RATING form field provides the same icon-row picker inside a Form block. Unlike the standalone block, Maximum Rating lives in the Validation section, and the field can be made required via Is Optional.

In a mapped form, Rating offers no extra formatting properties — icon, colors, and max rating cannot come from the data source.

Slider Form Field

The SLIDER form field is a draggable track for picking a number between a minimum and maximum. A Range variant lets the user select a start–end pair together. The Type property formats the displayed value as a number, percent, currency amount, duration, or physical unit.

Properties

Warning: Range variant submits an object, not a number. Reading {{ form.data.sliderKey }} on a Range slider gives { start: ..., end: ... }. Read the ends as {{ form.data.sliderKey.start }} and {{ form.data.sliderKey.end }}. A Single slider returns a bare number.

Note: The default slider min is 0 and max is 100. A slider meant for 0–10 still shows 0–100 until you change Min value and Max value in Validation.

Currency Input Form Field

The CURRENCY_INPUT form field collects a monetary amount together with its currency code in one field. Its value is an object — not a plain number — holding both the currency code and the amount.

Properties

Value shape & events

Warning: The value is an object, not a number. {{ form.data.fieldKey }} returns the whole { currencyCode, amount } object. To get just the number, read {{ form.data.fieldKey.amount }}. To get the currency, read {{ form.data.fieldKey.currencyCode }}.

On Change fires when the amount is committed (user leaves the field) or the currency is changed. The form data does not update while the user is typing — mid-type values always see the previous committed amount. On Focus and On Blur also fire on the amount input.

If text that can't parse as a number is left in the field, it is silently replaced with 0 on commit. Clearing the field entirely stores an empty amount but preserves the currencyCode.

Signature Block

The Signature block gives users a drawing pad to sign with a finger, stylus, or mouse. Drawing updates a live preview in state; calling Capture Signature uploads the drawing as an image file. The block has no Content section — everything lives in the Appearance panel.

Appearance properties

Events, Methods & State

Warning: Drawing alone uploads nothing. While the user draws, only signaturePreview and isEmpty update. No file exists until the Capture Signature method runs. Wire it in this order:

1. Add a button, for example Confirm. In its On Click event, add Trigger Component Method and call the Signature block's Capture Signature method.

2. The block uploads the drawing, stores the file details in {{ signature1.uploadedSignature }}, then fires On Signature Capture.

3. Put your save action in the Signature block's On Signature Capture event, not in the button's On Click, so it runs only after the upload completes.

Note: File format differs by platform. Web apps upload the signature as JPEG; native mobile apps upload PNG. Downstream systems that validate file type must accept both.