Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

<textarea>

<textarea> is used to create interactive input controls that allow users to input and edit multi-line text.

Usage

Basic

Below is a basic usage example of the <textarea> component:

textareasrc/base/index.tsx
Preview

Custom Placeholder Style

<textarea> can customize its style using the ::placeholder pseudo-element:

textareasrc/customized-placeholder/index.tsx
Preview

Attributes

Property names and values are used to describe the component's behavior and appearance.

placeholder

// DefaultValue: undefined
placeholder?: string

Placeholder text

confirm-type

// DefaultValue: undefined
'confirm-type'?: 'send' | 'search' | 'go' | 'done' | 'next';

Specifies the behavior of the IME's enter key

maxlength

// DefaultValue: 140
maxlength?: number;

Maximum character limit for the input box

maxlines

// DefaultValue: 140
maxlines?: number;

Maximum line limit for the input box

readonly

// DefaultValue: false
readonly?: boolean;

Whether the input box is interactive (doesn't affect component method calls)

show-soft-input-on-focus

// DefaultValue: true
'show-soft-input-on-focus'?: boolean;

Whether to show soft keyboard when focused

type

// DefaultValue: 'text'
type?: 'text' | 'number' | 'digit' | 'tel' | 'email';

Specifies keyboard type:

  • text\tel\email: Full symbols
  • number: 0-9 +-.
  • digit: 0-9 .
INFO

Different IMEs may have different visual representations

input-filter

// DefaultValue: undefined
'input-filter'?: string;

Single character filter using regular expression

Events

Frontend can listen to component behavior using event handler attributes.

bindfocus

export interface TextareaFocusEvent {
  value: string;
}
 bindfocus?: (e: BaseEvent<'bindfocus', TextareaFocusEvent>) => void;

Callback when input box is focused

bindblur

export interface TextareaBlurEvent {
  value: string;
}
bindblur?: (e: BaseEvent<'bindblur', TextareaBlurEvent>) => void;

Callback when input box loses focus

bindconfirm

export interface TextareaConfirmEvent {
  value: string;
}
bindconfirm?: (e: BaseEvent<'bindconfirm', TextareaConfirmEvent>) => void;

Callback when IME enter key is pressed

bindinput

export interface TextareaTextareaEvent {
  value: string;
  selectionStart: number;
  selectionEnd: number;
  isComposing?: boolean;
}
bindinput?: (e: BaseEvent<'bindinput', TextareaTextareaEvent>) => void;

Callback when input content changes

bindselection

export interface TextareaSelectionEvent {
  selectionStart: number;
  selectionEnd: number;
}
bindselection?: (e: BaseEvent<'bindselection', TextareaSelectionEvent>) => void;

Callback when cursor position changes

Methods

Frontend can execute component methods via SelectorQuery API.

focus

export interface TextareaFocusMethod extends BaseMethod {
  method: 'focus';
}

Focus the input box

blur

export interface TextareaBlurMethod extends BaseMethod {
  method: 'blur';
}

Remove focus from input box

getValue

export interface TextareaGetValueMethod extends BaseMethod {
  method: 'getValue';
  success?: Callback<{
    value: string;
    selectionStart: number;
    selectionEnd: number;
    isComposing: boolean;
  }>;
}

Get input content

setValue

export interface TextareaSetValueMethod extends BaseMethod {
  method: 'setValue';
  params: {
    value: string;
  };
}

Set input content

setSelectionRange

export interface TextareaSetSelectionRangeMethod extends BaseMethod {
  method: 'setSelectionRange';
  params: {
    selectionStart: number;
    selectionEnd: number;
  };
}

Set cursor position

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.