Textarea — Input Controls

Minimal Example

{
  "id": "notes",
  "type": "textarea",
  "label": "Notes",
  "width": "full",
  "binding": {
    "source": "$json",
    "path": "record.notes"
  }
}

Settings Reference

Setting	Type	Default	Description
`rows`	number	4	Initial visible row count. Overridden by auto-resize.
`minRows`	number	—	Minimum rows when `autoResize` is enabled
`maxRows`	number	—	Maximum rows when `autoResize` is enabled (scrolls beyond)
`autoResize`	boolean	false	Grow/shrink the textarea to fit content automatically
`maxLength`	number	—	Character limit; renders live counter below field
`placeholder`	string	—	Ghost text shown when empty
`spellcheck`	boolean	true	Enable/disable browser spellcheck
`resize`	`none` \| `vertical` \| `both`	`vertical`	CSS resize handle visibility
`trimOnBlur`	boolean	false	Strip leading/trailing whitespace on blur (off by default for textarea)

Auto-Resize Configuration

Auto-resize expands the textarea as the user types and shrinks when text is deleted. Set minRows and maxRows to bound the growth:

{
  "id": "description",
  "type": "textarea",
  "label": "Description",
  "settings": {
    "autoResize": true,
    "minRows": 3,
    "maxRows": 12,
    "placeholder": "Enter a detailed description..."
  }
}

Auto-Resize and resize Handle When autoResize is true, the manual resize handle is automatically set to none. There is no need to explicitly set resize: "none".

Character Counter

When maxLength is set, a counter like 47 / 500 appears bottom-right of the textarea. The counter turns amber at 90% and red at 100%:

{
  "id": "executive-summary",
  "type": "textarea",
  "label": "Executive Summary",
  "settings": {
    "maxLength": 500,
    "rows": 6,
    "placeholder": "Summarise the proposal in 500 characters or less"
  },
  "validation": {
    "required": true,
    "maxLength": 500
  }
}

Validation Rules

Rule	Type	Description
`required`	boolean	Field must not be empty or whitespace-only
`minLength`	number	Minimum character count
`maxLength`	number	Maximum character count
`pattern`	string (regex)	Regex the full value must match

View Mode Rendering

In view and preview modes, textarea values are rendered as pre-formatted text, preserving line breaks. Long values are not truncated by default. To cap height in view mode, use a maxViewRows setting:

{
  "id": "comments",
  "type": "textarea",
  "label": "Reviewer Comments",
  "settings": {
    "rows": 5,
    "maxViewRows": 8
  },
  "modeVisibilitySettings": {
    "edit": true,
    "view": true,
    "admin": true,
    "preview": false,
    "design": true
  }
}

Full Example — Support Ticket Description

{
  "id": "issue-description",
  "type": "textarea",
  "label": "Issue Description",
  "description": "Please describe the issue in as much detail as possible",
  "required": true,
  "width": "full",
  "order": 3,
  "settings": {
    "placeholder": "What happened? What did you expect to happen? Steps to reproduce...",
    "autoResize": true,
    "minRows": 5,
    "maxRows": 20,
    "maxLength": 2000,
    "spellcheck": true
  },
  "validation": {
    "required": true,
    "minLength": 20,
    "maxLength": 2000
  },
  "binding": {
    "source": "$json",
    "path": "ticket.description"
  }
}

← Text Input Next: Number Input →