---
name: "Textarea"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Textarea - Multi-line text input"
---

## Textarea

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Textarea for multi-line text input and editing.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | No | - | Form field name, used as the key on form submit |
| `value` | `string` | No | - | Input value |
| `placeholder` | `string` | No | - | Placeholder when empty |
| `placeholderStyle` | `string \| any` | No | - | Specify the placeholder style; currently only color, fontSize, and fontWeight are supported (object or CSS declaration string) |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `maxLength` | `number` | No | `140` | Maximum input length; set to -1 for no limit |
| `autoHeight` | `boolean` | No | `false` | Whether to auto-grow; when autoHeight is set, style.height has no effect |
| `onInput` | `(event: TextareaInputEvent) => void` | No | - | Triggered on keyboard input |
| `onFocus` | `(event: TextareaFocusEvent) => void` | No | - | Triggered on focus |
| `onBlur` | `(event: TextareaBlurEvent) => void` | No | - | Triggered on blur |
| `onLinechange` | `(event: TextareaLineChangeEvent) => void` | No | - | Triggered when the number of lines changes; detail includes height, lineCount, etc. |

### Referenced Types

##### `interface` TextareaInputEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"input"` | Event type |
| `detail` | `TextareaInputDetail` | Event data |
| `value` | `string` | Current value of textarea |

##### `interface` TextareaFocusEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"focus"` | Event type |
| `detail` | `TextareaFocusDetail` | Event data |

##### `interface` TextareaBlurEvent

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

##### `interface` TextareaLineChangeEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"linechange"` | Event type |
| `detail` | `TextareaLineChangeDetail` | Event data |

##### `interface` TextareaInputDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | textarea content |
| `cursor` | `number` | Cursor position |
| `keyCode` | `number` | Key value |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` TextareaFocusDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Input value |

##### `interface` TextareaValueDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `string` | Input value |

##### `interface` TextareaLineChangeDetail

| Property | Type | Description |
| --- | --- | --- |
| `height` | `number` | Input height |
| `lineCount` | `number` | Number of lines |
| `heightRpx` | `number` | Input height, in rpx |
| `lineHeight` | `number` | Line height |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { Textarea, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Textarea placeholder="Please enter content..." />
    </View>
  );
}
```

#### Multi-line input

```tsx
import React, { useState } from 'react';
import { Textarea, Button, View, Text } from '@ray-js/ray';

export default function () {
  const [value, setValue] = useState('');

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Textarea
          value={value}
          placeholder="Please enter..."
          maxLength={200}
          onInput={(e) => setValue(e.value)}
          style={{ marginTop: '8px', minHeight: '80px' }}
        />
        <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
          Entered {value.length} / 200 characters
        </Text>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Auto height:</Text>
        <Textarea
          autoHeight
          placeholder="Automatically grows as you type..."
          style={{ marginTop: '8px', minHeight: '40px' }}
        />
      </View>
    </View>
  );
}
```

#### Disabled and events

```tsx
import React from 'react';
import { Textarea, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>Disabled state:</Text>
        <Textarea
          disabled
          value="Non-editable content"
          placeholderStyle={{ color: '#ccc' }}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>Event listeners:</Text>
        <Textarea
          name="feedback"
          placeholder="Enter feedback..."
          onFocus={(e) => console.log('Focus:', e.detail.value)}
          onBlur={(e) => console.log('Blur:', e.detail.value)}
          onLinechange={(e) => console.log('Line count changed:', e.detail.lineCount)}
          style={{ marginTop: '8px', minHeight: '80px' }}
        />
      </View>
    </View>
  );
}
```