Textarea.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/textarea.tsx

功能描述

多行文本输入框组件，用于接收多行文本输入。支持自适应内容高度、禁用状态、错误状态样式。

导出内容

• Textarea - 多行文本输入框组件

Props 接口

Textarea

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
disabled	boolean	否	-	是否禁用
placeholder	string	否	-	占位文本
rows	number	否	-	行数
...props	React.ComponentProps<'textarea'>	否	-	textarea原生属性

自适应高度

组件使用 field-sizing-content CSS 属性实现根据内容自动调整高度。

依赖

• @/lib/utils - 工具函数 (cn)

使用示例

import { Textarea } from "@/components/ui/textarea";
import { useState } from "react";

// 基础用法
<Textarea placeholder="请输入您的消息..." />

// 带默认值
<Textarea defaultValue="这是默认内容" />

// 受控组件
const [value, setValue] = useState("");
<Textarea 
  value={value} 
  onChange={(e) => setValue(e.target.value)}
  placeholder="输入内容..."
/>

// 禁用状态
<Textarea disabled placeholder="禁用状态" />

// 与 Label 配合使用
<div className="grid w-full gap-1.5">
  <Label htmlFor="message">消息</Label>
  <Textarea placeholder="输入您的消息..." id="message" />
  <p className="text-sm text-muted-foreground">
    您的消息将发送给支持团队。
  </p>
</div>

// 在 Form 中使用
<FormItem>
  <FormLabel>简介</FormLabel>
  <FormControl>
    <Textarea {...field} placeholder="介绍一下自己..." />
  </FormControl>
  <FormDescription>最多 500 个字符。</FormDescription>
  <FormMessage />
</FormItem>