TextArea

Multi-line text input field for longer text content such as descriptions, comments, notes, or messages. It supports configuring visible row height and setting 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. Required: true.

label

Label text displayed above textarea. Type: string. Required: true.

placeholder

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

rows

Number of visible text rows (controls textarea height). Type: number. Required: false. Default: 4. Options: none. Visual Impact: More rows = taller textarea. 3 rows = compact, 4-6 rows = comfortable, 8 + rows = large text blocks. Tip: Recommendations – 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. Required: false. Visual Impact: Shows character counter below textarea when set. Blocks input after limit reached. Tip: Recommendations – 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. Required: false. Default: false.

defaultValue

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

id

Unique component identifier for targeting with JavaScript and event handlers. Type: string. Required: false. Tip: Recommendations – 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. Required: false. Default: 100%. Tip: Recommendations – 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. Required: false. Default: vertical. Options: none, vertical, horizontal, both. 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: Recommendations – 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. Required: false.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string. Required: false. 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. Required: false.

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