Back to Components

TextArea Component

Basic

Minimum Rows

TextArea enforces a minimum of 2 rows. For single-line input, use the Input component instead.

Copy (Default)

Copy icon appears automatically when there's content and allowCopy=true (default).

No Copy

Text selection is disabled and no copy icon is shown.

With Validation

Max Rows & Scrollbar

Read-Only

Read-only mode prevents editing but still allows text selection and copying.

Disabled

Props

PropTypeDefaultDescription
valuestring""The textarea value (bindable)
allowCopybooleantrueControls text selection and copy icon visibility (bindable)
validate(value: string) => boolean | stringundefinedValidation function
minRowsnumber3Minimum number of visible rows (enforced minimum: 2)
maxRowsnumber10Maximum number of visible rows
readonlybooleanfalseMakes textarea read-only (prevents editing but allows selection)
disabledbooleanfalseDisables the textarea
classstring""Container CSS class
textareaClassstring""Textarea element CSS class

Lines Array

TextArea

Array Value

Auto-sizing

When maxRows is omitted, the TextArea grows to fit all content without height restrictions.

Try pasting a lot of text to see it expand!

Conflict Handling

⚠️ Development Warnings

The TextArea component shows warnings in development mode for:

  • Prop conflicts: When both value and lines are provided, value takes precedence
  • Empty content: When no value or lines are provided, TextArea will be empty

Content precedence: value > lines