---
name: "textarea"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "textarea - Multi-line text input box"
---

## textarea

> [VERSION] Base Library >= 2.10.0

### Description

Multiline input component.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | No | - | Field name in the form |
| `value` | `string` | No | `""` | Input value |
| `maxlength` | `number` | No | - | Maximum input length; set to -1 for unlimited |
| `placeholder` | `string` | No | `""` | Placeholder text shown when the input is empty |
| `placeholder-style` | `string` | No | `""` | Placeholder style |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `auto-height` | `boolean` | No | `false` | Whether to auto-grow; when autoHeight is set, style.height has no effect |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `focus` | `(event: TextareaFocusEvent) => void` | Triggered when the input is focused |
| `blur` | `(event: TextareaBlurEvent) => void` | Fires when the input loses focus |
| `input` | `(event: TextareaInputEvent) => void` | Fires on keyboard input |
| `confirm` | `(event: TextareaConfirmEvent) => void` | Fires when Done is tapped |
| `linechange` | `(event: TextareaLinechangeEvent) => void` | Triggered when the number of lines in the input changes |

**TextareaFocusEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"focus"` | Event type |
| `detail` | `TextareaValueDetail` | Event data |

**TextareaBlurEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"blur"` | Event type |
| `detail` | `TextareaValueDetail` | Event data |

**TextareaInputEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"input"` | Event type |
| `detail` | `TextareaInputDetail` | Event data |

**TextareaConfirmEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"confirm"` | Event type |
| `detail` | `TextareaValueDetail` | Event data |

**TextareaLinechangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"linechange"` | Event type |
| `detail` | `TextareaLinechangeDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<view>
  <textarea value="{{content}}" placeholder="Please enter content" maxlength="{{200}}" bind:input="onInput" />
  <text class="counter">{{content.length}} / 200</text>
</view>
```

*index.tyss*

```css
textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  box-sizing: border-box;
}
.counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  display: block;
  margin-top: 8rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    content: '',
  },
  onInput(e) {
    this.setData({ content: e.detail.value });
  },
});
```

#### Auto-height and disabled state

*index.tyml*

```xml
// index.tyml
<view>
  <textarea auto-height placeholder="Auto-increases with input" placeholder-style="color:#999" bind:linechange="onLineChange" />
  <textarea disabled="{{true}}" value="Non-editable content" />
</view>
```

*index.tyss*

```css
textarea {
  width: 100%;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}
```

*index.js*

```javascript
Page({
  onLineChange(e) {
    console.log('Line count:', e.detail.lineCount, 'Height:', e.detail.height);
  },
});
```

#### Focus and blur events

*index.tyml*

```xml
// index.tyml
<textarea placeholder="Enter feedback" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" />
```

*index.tyss*

```css
textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #ddd;
  padding: 16rpx;
  box-sizing: border-box;
}
```

*index.js*

```javascript
Page({
  onFocus(e) {
    console.log('Focus:', e.detail.value);
  },
  onBlur(e) {
    console.log('Blur:', e.detail.value);
  },
  onConfirm(e) {
    console.log('Confirm:', e.detail.value);
  },
});
```