# Source: https://lynxjs.org/api/elements/built-in/textarea.md

# `<textarea>`

<APISummary />


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

:::tip

This feature requires the client to add additional dependencies. Please refer to [More Elements](/guide/start/integrate-with-existing-apps.md) for the integration method.

:::

## Usage

### Basic

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

**This is an example below:  textarea**

**Bundle:** `dist/base.lynx.bundle`

```tsx {13-21}
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import { root, useState } from "@lynx-js/react";

const App = () => {
  const [inputContent, setInputContent] = useState("");

  return (
    <view style={{ linearOrientation: "vertical", width: "100%", height: "100%", padding: "20px" }}>
      <view style={{ width: "100%", padding: "10px", backgroundColor: "#87654321", borderRadius: "10px" }}>
        <textarea
          style={{ width: "100%", color: "blue", fontSize: "50px" }}
          placeholder="Title"
          maxlines={2}
          bindinput={(res: any) => {
            console.log(res.detail.value);
            setInputContent(res.detail.value);
          }}
        />
      </view>

      <view
        style={{
          width: "100%",
          padding: "10px",
          marginTop: "20px",
          backgroundColor: "#12345678",
          borderRadius: "10px",
        }}
      >
        {
          <textarea
            style={{ width: "100%", height: "300px", fontSize: "30px" }}
            placeholder="Content"
            bindinput={(res: any) => {
              console.log(res.detail.value);
              setInputContent(res.detail.value);
            }}
          />
        }
      </view>
    </view>
  );
};

root.render(<App />);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}

```



### Custom Placeholder Style

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

**This is an example below:  textarea**

**Bundle:** `dist/base.lynx.bundle`

```tsx {13-21}
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import { root, useState } from "@lynx-js/react";
import "./index.scss";

const App = () => {
  const [inputContent, setInputContent] = useState("");

  return (
    <view style={{ linearOrientation: "vertical", width: "100%", height: "100%", padding: "20px" }}>
      <text style={{ fontSize: "15px" }}>Customized Placeholder And Caret Color</text>
      <view
        style={{
          width: "100%",
          padding: "10px",
          backgroundColor: "#87654321",
          borderRadius: "10px",
          marginTop: "20px",
        }}
      >
        <textarea
          style={{ width: "100%" }}
          placeholder=".textarea::placeholder {
                              color: oragne
                            }"
          class="textarea"
          bindinput={(res: any) => {
            console.log(res.detail.value);
            setInputContent(res.detail.value);
          }}
        />
      </view>
    </view>
  );
};

root.render(<App />);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}

```




## Attributes

### `android-fullscreen-mode`

{' '}

<AndroidOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: true
'android-fullscreen-mode'?: boolean;
```

Whether to enter the full-screen input mode when in landscape screen, in which the keyboard and input box will take up the entire screen

### `bounces`

{' '}

<IOSOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: true
bounces?: boolean;
```

Bounce effect for iOS

### `confirm-type`

{' '}

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: 'done'
'confirm-type'?: 'search' | 'send' | 'go' | 'done' | 'next';
```

The type of confirm button

### `disabled`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.5
</VersionBadge>

```tsx
// @defaultValue: false
disabled?: boolean;
```

Interaction enabled

### `enable-scroll-bar`

{' '}

<AndroidOnly />

<IOSOnly />

<VersionBadge>
  3.6
</VersionBadge>

```tsx
// @defaultValue: false
'enable-scroll-bar'?: boolean;
```

Whether to show scroll bar, on HarmonyOS, the scroll bar will always be shown

### `input-filter`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: undefined
'input-filter'?: string;
```

Filter the input content and process it in the form of regular expressions

### `ios-auto-correct`

{' '}

<IOSOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: true
'ios-auto-correct'?: boolean;
```

Auto correct input content on iOS

### `ios-spell-check`

{' '}

<IOSOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: true
'ios-spell-check'?: boolean;
```

Check spelling issue on iOS

### `line-spacing`

{' '}

<AndroidOnly />

<IOSOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: undefined
'line-spacing'?: number | any | any;
```

Line spacing

### `maxlength`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: 140
maxlength?: number;
```

Max input length

### `maxlines`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: undefined
maxlines?: number;
```

Max input lines

### `placeholder`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
placeholder?: string;
```

Placeholder

### `readonly`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: false
readonly?: boolean;
```

Readonly

### `show-soft-input-on-focus`

{' '}

<AndroidOnly />

<IOSOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: true
'show-soft-input-on-focus'?: boolean;
```

Show soft input keyboard while focused

### `type`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
// @defaultValue: "text"
type?: 'number' | 'text' | 'digit' | 'tel' | 'email';
```

Input content type

## Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

### `bindblur`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
bindblur = (e: TextAreaBlurEvent) => {};
```

| Field | Type   | Optional | Default | Platforms                                                                    | Since | Description   |
| ----- | ------ | -------- | ------- | ---------------------------------------------------------------------------- | ----- | ------------- |
| value | string | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | Input content |

Blurred

### `bindconfirm`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
bindconfirm = (e: TextAreaConfirmEvent) => {};
```

| Field | Type   | Optional | Default | Platforms                                                                    | Since | Description   |
| ----- | ------ | -------- | ------- | ---------------------------------------------------------------------------- | ----- | ------------- |
| value | string | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | Input content |

Confirm button clicked, only work when confirm-type is defined

### `bindfocus`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
bindfocus = (e: TextAreaFocusEvent) => {};
```

| Field | Type   | Optional | Default | Platforms                                                                    | Since | Description   |
| ----- | ------ | -------- | ------- | ---------------------------------------------------------------------------- | ----- | ------------- |
| value | string | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | Input content |

Focused

### `bindinput`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
bindinput = (e: TextAreaInputEvent) => {};
```

| Field          | Type    | Optional | Default | Platforms                                                                    | Since | Description                         |
| -------------- | ------- | -------- | ------- | ---------------------------------------------------------------------------- | ----- | ----------------------------------- |
| isComposing    | boolean | Yes      | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | Is composing or not                 |
| selectionEnd   | number  | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | The end position of the selection   |
| selectionStart | number  | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | The start position of the selection |
| value          | string  | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | Input content                       |

Input content changed

### `bindselection`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```tsx
bindselection = (e: TextAreaSelectionChangeEvent) => {};
```

| Field          | Type   | Optional | Default | Platforms                                                                    | Since | Description                         |
| -------------- | ------ | -------- | ------- | ---------------------------------------------------------------------------- | ----- | ----------------------------------- |
| selectionEnd   | number | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | The end position of the selection   |
| selectionStart | number | No       | –       | <AndroidOnly /> <IOSOnly /> <HarmonyOnly /> <VersionBadge>3.4</VersionBadge> | 3.4   | The start position of the selection |

Input selection changed

## Methods

Frontend can invoke component methods via the [SelectorQuery](/api/lynx-api/nodes-ref/nodes-ref-invoke.md) API.

### `blur`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```ts

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'blur',
success: function (res) {},
fail: function (res) {},
})
.exec();

```

Release focus

### `focus`

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```ts

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'focus',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

```

Require focus

### `getValue`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```ts

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'getValue',
success: Callback<{
/**
_ Is composing or not, iOS only
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
isComposing: boolean;
/**
_ End position of the cursor
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
_/
selectionEnd: number;
/\*\*
_ Begin position of the cursor
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
_/
selectionStart: number;
/\*\*
_ Input content
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
value: string;
}>;
fail: function (res) {},
})
.exec();

```

Get input content

### `setSelectionRange`

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```ts

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'setSelectionRange',
      params: {
        /**
         * End position of the selection
         * @Android
         * @iOS
         * @Harmony
         * @Web
         * @since 3.4
         */
        selectionEnd: number;
        /**
         * Start position of the selection
         * @Android
         * @iOS
         * @Harmony
         * @Web
         * @since 3.4
         */
        selectionStart: number;
      };
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

```

Set selection range

### `setValue`

{' '}

<AndroidOnly />

<IOSOnly />

<HarmonyOnly />

<VersionBadge>
  3.4
</VersionBadge>

```ts

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'setValue',
params: {
/\*\*
_ Input content
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
value: string;
};
success: function (res) {},
fail: function (res) {},
})
.exec();

```

Set input content

```
```

## Compatibility

**Compatibility Table**
**Query:** `elements.textarea`

**Platform Support**

| Platform | Version Added | Notes |
|----------|---------------|-------|
| Android | 3.4 | - |
| iOS | 3.4 | - |
| HarmonyOS | 3.4 | - |
| Clay Android | 3.4 | - |
| Clay iOS | 3.4 | - |
| Clay Windows | 3.4 | - |
| Clay macOS | 3.4 | - |
| Web | ✅ Yes | - |

**Description:** textarea