Textarea
透传原生 textarea 的全部属性,并通过拟物 token 呈现最小高度、纵向 resize、focus 和 aria-invalid 状态。
@neumorphism-ui/textarea预览
安装
安装: textarea
npx shadcn@latest add @neumorphism-ui/textareaCLI 会依次处理 npm 依赖、base token、utils 和组件源码。
首次使用此 Registry?请先完成 namespace 配置 。
用法
用法: 安装
npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textareaImport
Textarea import 代码
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"Example
Textarea 用法代码
<div className="grid gap-2">
<Label htmlFor="note">备注</Label>
<Textarea
id="note"
name="note"
placeholder="给团队写一条备注。"
rows={5}
/>
</div>API 参考
| 组件 | 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
Textarea | value / defaultValue | string | — | 受控文本或非受控初始文本。 |
Textarea | rows | number | — | 初始显示行数。 |
Textarea | placeholder | string | — | 用于提示输入格式的简短示例。 |
Textarea | disabled / required / readOnly | boolean | false | 设置原生输入限制。 |
Textarea | aria-invalid | boolean | string | — | 启用错误边框和 focus ring。 |
无障碍
- 01
将 Label 的 htmlFor 与 Textarea 的 id 关联,不要用 placeholder 代替 Label。
- 02
存在字符数限制时,应同时提供 maxLength 和当前字符数,并在需要时通过 aria-describedby 关联。
- 03
为错误文案设置 id,再通过 aria-invalid、aria-describedby 将其与 control 关联。