Textarea

Requires:

@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
		No	-	Triggered on keyboard input
		No	-	Triggered on focus
		No	-	Triggered on blur
		No	-	Triggered when the number of lines changes; detail includes height, lineCount, etc.

Examples

Basic usage

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

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

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>
  );
}