表单与选择@neumorphism-ui/textarea

Textarea

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

@neumorphism-ui/textarea
Registry JSON

预览

安装

安装: textareanpx shadcn@latest add @neumorphism-ui/textarea

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry?请先完成 namespace 配置 。

用法

用法: 安装npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea

Import

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 参考

组件属性类型默认值说明
Textareavalue / defaultValuestring—受控文本或非受控初始文本。
Textarearowsnumber—初始显示行数。
Textareaplaceholderstring—用于提示输入格式的简短示例。
Textareadisabled / required / readOnlybooleanfalse设置原生输入限制。
Textareaaria-invalidboolean | string—启用错误边框和 focus ring。

无障碍

  • 01

    将 Label 的 htmlFor 与 Textarea 的 id 关联,不要用 placeholder 代替 Label。

  • 02

    存在字符数限制时,应同时提供 maxLength 和当前字符数,并在需要时通过 aria-describedby 关联。

  • 03

    为错误文案设置 id,再通过 aria-invalid、aria-describedby 将其与 control 关联。