Textarea

用于备注、说明等可能跨越多行的文字输入。

预览

投资备注与输入状态

比较限制 240 字符的可编辑备注，以及明确的无效与禁用备注字段。

投资笔记

错误状态

已禁用

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/textarea

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

投资备注与输入状态

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea

Registry JSON

用法

关联可见标签，并设置 name 和 rows。按任务添加限制与说明；简短的单行值使用 Input。

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project description</Label>
      <Textarea id={id} name="description" placeholder="Describe your project" rows={4} />
    </div>
  );
}

API 参考

透传原生 textarea 的全部属性，并通过拟物 token 呈现最小高度、纵向 resize、focus 和 aria-invalid 状态。

组件	属性	类型	默认值	说明
`Textarea`	`value / defaultValue`	`string`	`—`	受控文本或非受控初始文本。
`Textarea`	`rows`	`number`	`—`	初始显示行数。
`Textarea`	`placeholder`	`string`	`—`	用于提示输入格式的简短示例。
`Textarea`	`disabled / required / readOnly`	`boolean`	`false`	设置原生输入限制。
`Textarea`	`aria-invalid`	`boolean \| string`	`—`	启用错误边框和 focus ring。

预览

投资备注与输入状态

安装

用法

API 参考

无障碍