Textarea 文本域

用于接收多行文本输入，支持自适应高度和字数统计。

基础用法

import { Textarea } from '@airo-ui/react'

function Demo() {
  return <Textarea placeholder="请输入多行文本" />
}

受控与非受控

import { useState } from 'react'
import { Textarea } from '@airo-ui/react'

function ControlledDemo() {
  const [value, setValue] = useState('')
  return <Textarea value={value} onChange={(e) => setValue(e.target.value)} placeholder="受控文本域" />
}

function UncontrolledDemo() {
  return <Textarea defaultValue="默认文本" placeholder="非受控文本域" />
}

自适应高度

import { Textarea } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Textarea autosize placeholder="自动调整高度" />
      <Textarea autosize={{ minRows: 2, maxRows: 6 }} placeholder="最少2行，最多6行" />
    </>
  )
}

字数统计

import { Textarea } from '@airo-ui/react'

function Demo() {
  return <Textarea maxlength={200} showCount placeholder="最多输入200字" />
}

标签与错误

import { Textarea } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Textarea label="描述" placeholder="请输入描述" />
      <Textarea label="备注" error errorMessage="内容不能为空" />
    </>
  )
}

API

Props

名称	类型	默认值	说明
value	string	—	受控模式当前值
defaultValue	string	—	非受控模式默认值
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
error	boolean	false	是否处于错误状态
errorMessage	string	—	错误提示信息
label	string	—	标签文本
rows	number	—	固定行数
maxlength	number	—	最大字符数
showCount	boolean	false	是否显示字数统计
autosize	boolean | { minRows?: number, maxRows?: number }	false	自适应高度
onChange	(e: ChangeEvent) => void	—	值变化时触发
onFocus	(e: FocusEvent) => void	—	获得焦点时触发
onBlur	(e: FocusEvent) => void	—	失去焦点时触发