Text Input & Text Area

Note: Standalone vs. Form field: These are standalone blocks. When collecting text as part of a form with validation and a submit flow, use the corresponding Form field types (Text, Text Area, Password) inside a Form block instead.

Text Input Block

The Text Input block is a standalone single-line text field. It supports a label and caption, start and end icons, voice dictation, a loading spinner, and detailed typography control. Its value is exposed to the page for binding, and it fires events as the user types, submits, focuses, or leaves the field.

When to Use Text Input

• Collect one line of text on its own — a search box, a name, a quick filter — anywhere on a page, without a surrounding form.

• For multi-line text, use the Text Area block.

• Inside a Form block, use the Text field instead.

Content Properties

Appearance Properties

Events

Methods

Exposed State

Gotchas

Warning: setValue and resetTextInput do not fire On Change. Programmatic value changes are silent — handlers watching the field won't run.

Note: Caption position changes on mobile. Caption renders above the field on desktop but below it on mobile and tablet.

Warning: A changing bound default overwrites user input without notification. If Default value is a binding that changes, the user's typed content is silently replaced.

Text Area Block

The Text Area block is a standalone multi-line text input. It grows with its content between a minimum and maximum number of rows, can show a live remaining-characters counter, and carries optional label, description and help text. Its value is exposed to the page for binding, and it fires events as the user types, submits, focuses, or leaves the field.

When to Use Text Area

• Collect free-form, multi-line text on its own — comments, notes, descriptions — anywhere on a page, without a surrounding form.

• For single-line text, use the Text Input block.

• Inside a Form block, use the Text area field instead.

Content Properties

Appearance Properties

Events

Methods

Exposed State

Warning: Maximum Characters is a countdown, not a hard limit. The counter turns red when exceeded but typing continues. Enforce the limit yourself — for example, disable a submit button when {{ textarea1.value.length }} exceeds the cap.

Warning: Enter submits; Shift+Enter makes a new line. Users who expect Enter to insert a line break must hold Shift. If your On Submit handler navigates or clears the field, plain Enter can feel destructive in long-form typing.

Password Block

The Password block is a standalone masked text input with a built-in show/hide toggle. It ships with label, optional description and help text, browser autocomplete control (current password, new password, or off), and standard field events and methods. A new Password block arrives labelled "Password" with placeholder "Enter password" and autocomplete off.

When to Use

• Collect a password or secret outside a Form — a login screen, API-key prompt, or confirmation gate.

• Control browser and password-manager behavior with autocomplete settings.

• Inside a Form, use the Form's Password field instead.

Content Properties

Appearance Properties

Events

Methods

Exposed State

Warning: On Focus and On Blur do not include the value in their payload for security — use {{ id.value }} from state instead.

Frequently Asked Questions

What is the difference between a Text Input block and a text field inside a Form?

A standalone Text Input block exposes its value immediately as {{ id.value }} and fires On Change on every keystroke, making it ideal for search bars, filters, and real-time interactions. A text form field is embedded inside a Form block and its value is only included in {{ form.data }} and the submit payload — it's the right choice for data-entry forms where submission as a unit matters.

How do I limit a Text Area to a maximum number of characters?

Add the Max Characters add-on in the Text Area's Content panel. Set the Max Characters value and choose the display style (bottom-right or footer). Note that this is a soft limit — the counter displays how many characters remain but does not block typing past the limit. Use a validity condition in a form field to enforce a hard maximum on submit.

Why does pressing Enter in my Text Area submit the form instead of adding a new line?

Text Area has an Enter submits option that is enabled by default when the block is inside a Form. When this is on, Enter triggers form submission and Shift+Enter inserts a newline. Disable this toggle in the Content panel if you want Enter to always add a newline.

Is the password field's value accessible in On Focus and On Blur events?

No — this is intentional. The Password block's On Focus and On Blur events deliberately exclude the current value from their event payload for security reasons. The value is only accessible via {{ id.value }} in state, not inside focus/blur event handlers.

Can I set the autocomplete type for a password field?

Yes. The Password block has an Autocomplete property with three options: current-password (tells the browser to offer stored passwords), new-password (tells the browser this is a new password field and to offer a generator), and off (disables browser autocomplete). Set it according to whether the field is for logging in or registering.

Step-by-Step Examples

Search Box That Filters a Table

1. Drop a Text Input; set Placeholder to "Search…" and enable a Start Icon (magnifier).

2. Filter the table's data source with {{ textinput1.value }}.

3. Or, for on-demand search, run the data source from On Submit so it fires when the user presses Enter.

Feedback Box with Character Budget

1. Drop a Text Area; set Placeholder to "Tell us what happened…"

2. Set Maximum Characters to 500.

3. On the submit button, add a condition to disable it when {{ textarea1.value.length > 500 }}.

Login Form with Password Block

1. Add a Text Input for username/email; set Autocomplete appropriately.

2. Add a Password block; set Autocomplete to current-password so browsers offer saved passwords.

3. Add a Button. On click, call your authentication data source with {{ emailInput.value }} and {{ password1.value }}.

4. On success, reset both inputs and navigate.