TextArea

A multi-line text input field for longer content such as descriptions, comments, notes, or messages. Supports configuration of visible rows and a maximum character length.

Use Cases

• Long-form text entry (descriptions, bio, comments)
• Notes and remarks fields
• Message or feedback forms
• Multi-line addresses
• Data-bound text fields connected to page data sources

Properties

name

Unique field name used for form submission and data binding. Type: string.

label

Label text displayed above textarea. Type: string.

placeholder

Placeholder text shown in empty textarea. Use for examples or instructions. Type: string.

rows

Number of visible text rows (controls textarea height). Type: number. Default: 4. Visual Impact: More rows = taller textarea. 3 rows = compact, 4‑6 rows = comfortable, 8+ rows = large text blocks. Tip: short – Use rows: 3 for short notes or comments; standard – Use rows: 4‑6 for most use cases (comfortable editing); long – Use rows: 8‑12 for lengthy descriptions or articles.

maxLength

Maximum character count allowed. Prevents excessive input. Type: number. Visual Impact: Shows character counter below textarea when set. Blocks input after limit reached. Tip: notes – Use maxLength: 500 for short notes and comments; descriptions – Use maxLength: 1000‑2000 for descriptions and messages; articles – Use maxLength: 5000+ for long-form content.

required

Whether field is required for form submission. Shows asterisk indicator. Type: boolean. Default: false.

defaultValue

Default text pre-filled in textarea (not used when dataBinding is set). Type: string.

id

Unique component identifier for targeting with JavaScript and event handlers. Type: string. Tip: events – Required when using event handlers or JavaScript to target this component; data-binding – Useful for debugging data binding issues; optional – Can be omitted for simple forms without JavaScript.

width

CSS width of the textarea container. Use for controlling field width in layouts. Type: string. Default: 100%. Tip: full-width – Use '100%' for most TextArea fields (default, recommended); constrained – Use '75%' or fixed pixel width only for very wide forms.

resize

Controls which direction users can resize the textarea by dragging corner. Type: string. Options: none, vertical, horizontal, both. Default: vertical. Visual Impact: none – No resize handle - fixed height; vertical – Users can drag to adjust height (default, recommended); horizontal – Users can drag to adjust width (rarely used); both – Users can drag to adjust both height and width. Tip: standard – Use 'vertical' (default) - lets users adjust height without breaking layout; fixed – Use 'none' for fixed-height designs; avoid – Avoid 'horizontal' and 'both' - can break responsive layouts.

events

JavaScript event handlers for textarea interactions (onChange, onFocus, onBlur). Type: object. Sub‑properties: onChange – JavaScript executed when textarea value changes; onFocus – JavaScript executed when textarea receives focus; onBlur – JavaScript executed when textarea loses focus.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string. Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

dataBinding

Data binding configuration to connect textarea to page data source field. Automatically populates textarea with data and saves changes back to source. Type: object. Sub‑properties:

• pageDataSourceRef (string) – Reference to page‑level data source (format: '@page.{dataSourceId}'). Takes precedence over sourceId/sourceType.
• sourceId (string, required) – ID of the data source (database table or API connection).
• sourceType (string, required) – Type of data source. Options: table, api.
• operationType (string, required) – Operation type – 'Get' for single record (input fields use Get). Options: Get.
• fieldName (string, required) – Name of the field/column to bind to.
• isReadOnly (boolean) – Whether textarea is read‑only (display only, no write back). Default: false.
• writeOperation (string) – Write operation type when saving changes. Options: Create, Update. Default: Update.

Best Practices

• CRITICAL: TextArea should be FULL WIDTH - do NOT place in multi-column Grid/Flex layouts
• Use rows: 4‑6 for most use cases (comfortable editing height)
• Set maxLength to prevent excessive input (typically 500‑2000 characters)
• Place TextArea AFTER multi-column field groups in forms
• Set placeholder with helpful examples or instructions
• Use for any field requiring more than one line of text

Common Mistakes

Placing TextArea inside multi-column Grid/Flex layouts

Why it's a problem: TextArea needs full width for comfortable multi-line editing - looks cramped in narrow columns

Fix: Place TextArea at full width OUTSIDE Grid/Flex. Put it after multi-column field groups.

Using rows: 1 or rows: 2 for TextArea

Why it's a problem: Too short - users can't see enough context while editing multi-line text

Fix: Use minimum rows: 3, prefer rows: 4‑6 for comfortable editing

Not setting maxLength for user-generated content

Why it's a problem: Users can enter excessive text - database issues, UI layout breaks, performance problems

Fix: Set maxLength based on use case: 500 for notes, 1000‑2000 for descriptions

Using Input with inputType: 'text' for multi-line text

Why it's a problem: Input is single-line only - text gets cut off, no line breaks visible

Fix: Use TextArea for any field requiring more than one line of text