Text Input — Input Controls

Minimal Example

{
  "id": "first-name",
  "type": "text",
  "label": "First Name",
  "required": true,
  "width": "half",
  "binding": {
    "source": "$json",
    "path": "applicant.firstName"
  }
}

Settings Reference

Text input settings live inside the settings object:

Setting	Type	Default	Description
`placeholder`	string	—	Ghost text shown when the field is empty
`maxLength`	number	—	Maximum character count; counter shown below field
`minLength`	number	—	Minimum character count for validation
`prefix`	string	—	Static label displayed before the input (e.g., `$`)
`suffix`	string	—	Static label displayed after the input (e.g., `.com`)
`autocomplete`	string	—	HTML autocomplete attribute value (`given-name`, `off`, etc.)
`spellcheck`	boolean	true	Enable/disable browser spellcheck
`trimOnBlur`	boolean	true	Strip leading/trailing whitespace when field loses focus
`readonlyDisplay`	`text` \| `badge`	`text`	How the value is rendered in view/preview modes

Validation Configuration

All validation rules go inside the validation object:

{
  "id": "username",
  "type": "text",
  "label": "Username",
  "validation": {
    "required": true,
    "minLength": 3,
    "maxLength": 20,
    "pattern": "^[a-zA-Z0-9_]+$",
    "patternMessage": "Only letters, numbers, and underscores allowed"
  }
}

Rule	Type	Description
`required`	boolean	Field must not be empty
`minLength`	number	Minimum character count
`maxLength`	number	Maximum character count
`pattern`	string (regex)	JavaScript regex pattern the value must match
`patternMessage`	string	Custom error message shown when pattern fails
`customRule`	string	Name of a registered custom validator function

Prefix and Suffix Adornments

Use prefix/suffix to add context labels that appear inside the input border:

{
  "id": "website",
  "type": "text",
  "label": "Website",
  "settings": {
    "prefix": "https://",
    "suffix": ".com",
    "placeholder": "yoursite"
  }
}

// Rendered display: [ https:// | yoursite | .com ]

Character Counter

When maxLength is set, a live character counter appears below the field (12 / 50). The counter turns red when the user approaches the limit (within 10% of maxLength):

{
  "id": "bio",
  "type": "text",
  "label": "Short Bio",
  "settings": {
    "maxLength": 150,
    "placeholder": "Describe yourself in 150 characters or less"
  }
}

Pattern Validation Examples

Use Case	Pattern
Alphanumeric only	`^[a-zA-Z0-9]+$`
US ZIP code	`^\d{5}(-\d{4})?$`
Phone (basic)	`^[\d\s\-\+]{7,15}$`
No special chars	^[^<>"'`]+$
UUID format	`^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$`

Full Example — Employee Name Fields

{
  "id": "first-name",
  "type": "text",
  "label": "First Name",
  "required": true,
  "width": "half",
  "order": 1,
  "settings": {
    "placeholder": "Enter first name",
    "maxLength": 50,
    "autocomplete": "given-name",
    "trimOnBlur": true
  },
  "binding": {
    "source": "$json",
    "path": "employee.firstName"
  },
  "validation": {
    "required": true,
    "minLength": 2,
    "maxLength": 50,
    "pattern": "^[a-zA-Z\\s\\-']+$",
    "patternMessage": "Name may only contain letters, spaces, hyphens, and apostrophes"
  }
},
{
  "id": "last-name",
  "type": "text",
  "label": "Last Name",
  "required": true,
  "width": "half",
  "order": 2,
  "settings": {
    "placeholder": "Enter last name",
    "maxLength": 50,
    "autocomplete": "family-name",
    "trimOnBlur": true
  },
  "binding": {
    "source": "$json",
    "path": "employee.lastName"
  },
  "validation": {
    "required": true,
    "minLength": 2,
    "maxLength": 50
  }
}

trimOnBlur Default trimOnBlur is true by default. This means the value written to the form model never contains leading or trailing whitespace. Disable it only for fields where whitespace is semantically meaningful (e.g., a code snippet field).

← Overview Next: Textarea →