Textarea

多行文本输入框，与 Input 同为凹槽外观。高度随输入内容增长，因此采用直角方框，而非斜切块。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/textarea

示例

置于 Field 中，限制字数

Notes for the courier

It grows as you write.

textarea-field.tsx

import {  Field,  FieldDescription,  FieldError,  FieldLabel,} from "@/components/zero/field";import { Textarea } from "@/components/zero/textarea";export default function TextareaField() {  return (    <Field      className="w-full max-w-md"      validationMode="onChange"      validate={(value) =>        typeof value === "string" && value.length > 140          ? "Keep it under 140 characters."          : null      }    >      <FieldLabel>Notes for the courier</FieldLabel>      <Textarea placeholder="Where to leave it, who to ask for" />      <FieldDescription>It grows as you write.</FieldDescription>      <FieldError />    </Field>  );}

行为

文字使用正文字体，不加斜体，光标为强调色。获得焦点时显示焦点框，值无效时描边变为危险色。

置于 Field 内时即为 Field 的控件：以标签作为可访问名称，并由 Field 负责校验。

属性

Textarea

属性	类型	默认值	说明
…	textarea props	—	rows、placeholder、maxLength 等属性均传给 textarea 元素。

另可传入 Base UI Field.Control 的全部属性。