Text Input

A single-line text input field for collecting short text values. Renders as an HTML <input type="text"> with label and validation.

Properties

Property	Type	Default	Description
name	text	''	The field name. Must match your database column name for automatic form binding.
label	text	''	The visible label displayed above the input.
placeholder	text	''	Placeholder text shown when the input is empty.
required	boolean	false	Whether the field is required for form submission.
minLength	number	''	Minimum character length. Leave empty for no minimum.
maxLength	number	''	Maximum character length. Leave empty for no maximum.
pattern	text	''	A regular expression pattern for client-side validation.
value	text	''	Pre-populate the input with a value. Supports expression binding (e.g., {{ item.name }}).

Events

• onChange -- Fires when the input value changes.
• onBlur -- Fires when the input loses focus.
• onFocus -- Fires when the input gains focus.

Example

A name field inside a Form Container:

name: full_name
label: Full Name
placeholder: Enter your name
required: true
minLength: 2
maxLength: 100

An edit form field pre-populated with an existing value:

name: full_name
label: Full Name
value: "{{ item.full_name }}"
required: true

An email field with pattern validation:

name: email
label: Email Address
placeholder: you@example.com
required: true
pattern: [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}

Tips

• The name property is critical -- it determines the key used when the form is submitted. Match it to your database column name.
• Place inside a Form Container for the value to be included in form submissions.
• Client-side validation (required, minLength, maxLength, pattern) provides instant feedback but should always be paired with server-side Validate nodes.
• Style the input via the Design tab (border, padding, font, background, focus state).