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?

Set Maximum Characters in the Text Area's Content panel. The counter appears in the field corner, or in the footer row if you add a Footer slot. 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 fire On Submit?

There is no setting to turn this off. Pressing Enter (without Shift) fires the Text Area block's On Submit event. If Enter should only add a new line, remove the On Submit handler or guard it with a condition. Inside a Form block, use the Form's Text area field instead.

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.

Text Input & Text Area- UnifyApps

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 slots for icons or other blocks, 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

Property	Type	Default	Description
`defaultValue`	string (bindable)	—	Starting value. When bound to a dynamic value, the field updates whenever that value changes — silently overwriting user input with no On Change event.
`placeholder`	string (translatable)	Enter Value	Hint text shown inside the empty field.
`inputType`	Text \| Email \| Password \| Phone \| Number	Empty (behaves as Text)	Shown as Input type. The kind of value the field takes. A new block leaves it empty, which works as Text. Can be set by condition. Browser autocomplete follows the input type — for example, Email lets browsers offer saved addresses.
`slots`	Start element / End element	Empty	Slots at the start and end of the field. Drop an Icon or any block into them — for example, a magnifier icon in a search box.
`addOns`	label / caption / error message / dictation	Label on	Label (above), Caption (secondary text), Error message, and Dictation (microphone for voice input). Dictation is not shown when the End element slot contains a block, or while Loading is on. On desktop, caption renders above the field; on mobile it renders below. The error message shows under the field only while Error is on, in place of the caption.
`interactions`	event list	—	Event handlers for On Change, On Submit, On Focus, On Blur.
`permissions`	permission rule	—	Restricts who can see or use the field.

Note: Text Input blocks created before slots were introduced may still show Start Icon and End Icon add-ons if an icon was already set on them.

Appearance Properties

Property	Type	Default	Description
`size`	`sm \| md`	`md`	Overall control size.
`variant`	`ghost \| outlined \| solid`	`outlined`	Visual style of the field border.
`autoFocus`	on/off/conditions	Off	Focus the field when it appears. Can be condition-driven.
`autoSelect`	on/off/conditions	Off	Select the existing text on focus.
`loading`	condition	—	Shows a spinner at the end of the field while true. Hides the end slot content and dictation microphone while active.
`disabled`	condition	—	Disables the field when the condition is true.
`readOnly`	condition	—	Shows the value but stops the user from editing it.
`error`	condition	—	Shows the field in its error state. While on, the Error message add-on replaces the caption.
`value`	typography	text-sm, regular	Color, size and weight of the typed text. Does not affect placeholder.
`inputBox`	padding	—	Padding inside the field.
`placeholder`	typography + alignment	regular, Start	Color, weight and alignment of the placeholder text.
`visibility`	condition	—	Shows or hides the whole block.
`styles`	style set	—	Width/min/max, flex layout, margin, padding, radius, color, rotation. A new Text Input has a desktop max width of 50%.

Events

Event	Trigger	Payload
On Change	Value changes on every keystroke, and when dictation inserts text.	`value`
On Submit	User presses Enter.	—
On Focus	Field gains focus.	—
On Blur	Field loses focus.	—

Methods

Method	Parameters	What It Does
`Reset (resetTextInput)`	`resetToDefault`	Clears the field, or returns it to its default when `resetToDefault` is on. Does not fire On Change.
`setValue`	`value`	Sets the field's value programmatically. Converts anything to a string. Does not fire On Change.
`Focus (focusTextInput)`	—	Moves focus into the field. No-op if already focused.

Exposed State

State Key	Type	Description
`{{ id.value }}`	string	The current text in the field.
`{{ id.isFocused }}`	boolean	Whether the field currently has focus.

Gotchas

Warning: setValue and Reset (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

Property	Type	Default	Description
`defaultValue`	string (bindable)	—	Starting value. Bound values update the field whenever they change — silently overwriting user input.
`placeholder`	string (translatable)	Enter text here	Hint text shown while empty.
`maxCharacters`	integer	—	Character limit shown as a live countdown in the field's corner. This is a soft display limit — it does not block typing. The counter turns red when exceeded.
`slots (Footer)`	slot	Empty	A footer slot inside the field for action buttons or hints. When a footer and Max Characters are both set, the counter moves into the footer row.
`addOns`	label / description / help	Label on	Label (above), Description (below label), Help Text (below field), each with typography settings.

Appearance Properties

Property	Type	Default	Description
`size`	`sm \| md`	`md`	Overall control size.
`variant`	`ghost \| outlined \| solid`	`outlined`	Visual style of the field border.
`width`	px or %	`100%`	Width of the whole block.
`minRows`	integer	2	The field never shrinks below this many rows.
`maxRows`	integer	5	The field stops growing past this many rows and scrolls.
`autofocus`	boolean	—	Focus the field when it appears.
`autoselect`	boolean	—	Focus the field and select its existing text when it appears.
`disabled`	condition	—	Disables the field when condition is true.
`readOnly`	condition	—	Shows the value but stops the user from editing it.
`visibility`	condition	—	Shows or hides the whole block.
`styles`	style set	—	Color, border radius, border stroke.

Events

Event	Trigger	Payload
On Change	Value changes on every keystroke.	`value`
On Submit	User presses Enter (without Shift). The Enter key also adds a new line. Shift+Enter only adds a new line.	—
On Focus	Field gains focus.	—
On Blur	Field loses focus.	—

Methods

Method	Parameters	What It Does
`Reset (resetTextArea)`	`resetToDefault`	Clears the field, or restores default when `resetToDefault` is on. Does not fire On Change.
`setValue`	`value`	Sets the field's value programmatically. Converts to string. Does not fire On Change.
`Focus (focusTextArea)`	—	Moves focus into the field.

Exposed State

State Key	Type	Description
`{{ id.value }}`	string	The current text.
`{{ id.isFocused }}`	boolean	Whether the field currently has focus.

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 (without Shift) fires On Submit and also adds a new line; Shift+Enter only adds a new line. 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

Property	Type	Default	Description
`defaultValue`	string (bindable)	—	Starting value. A changing binding silently overwrites the user's entry — no On Change fires.
`placeholder`	string	"Enter password"	Hint text while empty.
`autocomplete`	`current-password \| new-password \| off`	`off`	Current password suggests saved credentials; New password enables browser password generation on sign-up/reset; Off disables autofill.
`addOns`	label + description + help	Label: "Password"	Label, description, and help text around the input.

Appearance Properties

Property	Type	Default	Description
`size`	`sm \| md`	`md`	Input height and spacing.
`variant`	`outlined \| ghost \| solid`	`outlined`	Visual style of the input border.
`autoFocus`	on/off/conditions	off	Focus the input when it appears.
`autoSelect`	on/off/conditions	off	Select the whole value on focus.
`disabled`	condition	—	Disables when condition is true.
`visibility`	condition	—	Shows or hides the block.
`styles`	style set	max-width 30% desktop	Width, margin, padding, border, background.

Events

Event	Trigger	Payload
On Change	Every keystroke that changes the value.	`value` (plain unmasked text)
On Submit	User presses Enter.	—
On Focus	Input gains focus.	— (value not included for security)
On Blur	Input loses focus.	— (value not included)

Methods

Method	Parameters	What It Does
`Reset (resetPassword)`	`resetToDefault`	Clears the value; with `resetToDefault` on, restores the default. Does not fire On Change.
`setValue`	`value`	Replaces the current value. Does not fire On Change.
`Focus (focusPassword)`	—	Moves focus into the input.

Exposed State

State Key	Type	Description
`{{ id.value }}`	string	The current entry — the plain, unmasked text.
`{{ id.isFocused }}`	boolean	Whether the input has focus.

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

Step-by-Step Examples

Drop a Text Input; set Placeholder to "Search…" and add an Icon (magnifier) to the Start element slot.
In the table's data source, open the Input tab and add a filter condition on the field to search, for example name Contains {{ textInput1.value }}.
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

Drop a Text Area; set Placeholder to "Tell us what happened…"
Set Maximum Characters to 500.
Add a Button below it labelled "Send feedback".
On the button, set the Disabled condition to {{ textArea1.value.length > 500 }}, so it can't be clicked while the text is over the limit.

Add a Text Input for the email and rename it emailInput. Set Input type to Email so browsers offer saved addresses.
Add a Password block; set Autocomplete to current-password so browsers offer saved passwords.
Add a Button. On click, call your authentication data source with {{ emailInput.value }} and {{ password1.value }}.
On success, reset both inputs and navigate.

Text Input & Text Area

Text Input Block

When to Use Text Input

Content Properties

Appearance Properties

Events

Methods

Exposed State

Gotchas

Text Area Block

When to Use Text Area

Content Properties

Appearance Properties

Events

Methods

Exposed State

Password Block

When to Use

Content Properties

Appearance Properties

Events

Methods

Exposed State

Step-by-Step Examples

Search Box That Filters a Table

Feedback Box with Character Budget

Login Form with Password Block