Documentation
Webframe UI
Inputs
Textarea

Text Area

A browser native text area input with optional icons and auto resizable input height according to content length.

Supports Universal Input API, with text format, parse, normalize and event action handlers.

Props

PropTypeDefaultDescription
compact
Boolean
|
Number

Whether to use minimal width that fits content, pass a number for additional character offset

defaultValue
Any

Initial value for uncontrolled state

value
Any

Internal value for controlled state

onChange
Function

Handler(event, value: any, name?: string, self) on textarea value changes

onFocus
Function

Handler(event, value: any, name?: string, self) on textarea focus

onBlur
Function

Handler(event, value: any, name?: string, self) on textarea blur

onRemove
Function

Handler(event, value: any, name?: string, self) on textarea removal. onChange handler will fire after with null as value, unless event.preventDefault(). To let onChange update form instance first before removing the field, use setTimeout to execute code inside onRemove handler.

label
String
|
Number
|
Boolean
|
Function

Label to show before the textarea (or after with reverse true)

loading
Boolean

Whether textarea is loading

format
Function

Function(value, name?, event?, self) => string - value formatter for UI display

parse
Function

Function(value, name?, event, self) => any - Parser for internal value for onChange

resize
Boolean

Whether to automatically resize height style to fit content

noSpellCheck
Boolean

Whether to disable spell check and autocorrection

childBefore
String
|
Number
|
Boolean
|
Function

Custom UI to render before textarea node (inside .textarea wrapper with focus state)

childAfter
String
|
Number
|
Boolean
|
Function

Custom UI to render after textarea node (inside .textarea wrapper with focus state)

icon
String
|
Object

Custom Icon name or props to render before textarea node

iconEnd
String
|
Object

Custom Icon name or props to render after textarea node (if onRemove not defined)

Examples

Basic Usage

Example
Via Universal Input

Input Customisation

Label & Placeholder Text
Icon at the Start
Icon at the End

Input Sizes

Example
Single Row Text Area
Automatically Resize Rows to Fit Content Height
Compact Text Area Width

Input States

Disabled
Read only
Loading

Input Values

Default Text Content
Controlled State
Hybrid State (uncontrolled, but updates on `value` changes)

Event Handlers

On Change Callback
On Focus Callback
On Blur Callback
On Remove Callback

To add validation error message or tooltip, use Universal TextArea Input.

SwitchUpload