Textarea 多行文本框 - Docs - Artefact

Textarea 多行文本框

Forms

智能自动检测

Introduction

一个多行自由文本输入控件，用于捕获较长的用户输入，例如评论、描述、反馈或长表单提交。它在客户端渲染的零 JS 架构中作为完全无障碍的布局运行。

Textarea 组件已作为 textarea 区块完全集成到 Page Builder 中，使作者能够轻松配置占位符、帮助提示、验证规则、尺寸比例和自动调整行为。

Usage

以下示例展示了内容编辑人员如何绑定和构建文本区域。

1. 带帮助提示的标准文本区域

默认的多行输入，包含标签和解释性辅助文本。非常适合简单的反馈字段。

{
  "type": "textarea",
  "label": "Public Comment",
  "placeholder": "Share your thoughts...",
  "helperText": "Comments are visible to all workspace members.",
  "interactive": true
}

Public Comment

Comments are visible to all workspace members.

2. 带字符计数与最大长度验证的紧凑区域

一个中等大小的区域，设置了最大字符限制并启用了自动调整高度，实时显示字符计数。

{
  "type": "textarea",
  "label": "Status Update",
  "placeholder": "What's happening?",
  "maxLength": 200,
  "showCount": true,
  "autoresize": true,
  "size": "sm",
  "interactive": true
}

Status Update

3. 无效错误状态文本区域

演示错误视觉状态，启用 invalidate 视觉边界并预填错误信息以供客户端显示。

{
  "type": "textarea",
  "label": "Account Bio",
  "placeholder": "Tell us about yourself",
  "invalid": true,
  "errorText": "Bio cannot contain profanity.",
  "interactive": true
}

Account Bio

Bio cannot contain profanity.

Props

属性	CMS 字段类型	默认值	描述 / 支持的选项
标签文本 (`label`)	`string`	-	渲染在文本区域上方的描述性标题。
占位符文本 (`placeholder`)	`string`	-	空字段内的幽灵提示文本。
帮助提示 (`helperText`)	`string`	-	显示在字段下方、输入边框外的轻量上下文说明。
自动调整大小 (`autoresize`)	`boolean`	`false`	调整为内容高度，消除静态滚动条。
最大长度 (`maxLength`)	`number`	-	限制可输入字符总数的上限。
启用字符计数 (`showCount`)	`boolean`	`false`	在字段角落渲染实时计数器（如 `12/200`）。
视觉变体 (`variant`)	`select`	`"outline"`	边框与填充主题。 • 选项：`"outline"`、`"surface"`、`"subtle"`、`"flushed"`。
尺寸比例 (`size`)	`select`	`"md"`	控制内边距和字体大小。 • 选项：`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`。
宽度 (`width`)	`select`	`"full"`	块宽行为。 • 选项：`"full"`、`"fit"`。
无效状态 (`invalid`)	`boolean`	`false`	触发错误边框并显示无效视觉状态。
禁用 (`disabled`)	`boolean`	`false`	禁用用户交互并应用变暗覆盖层。
强制交互 (`interactive`)	`boolean`	`true`	注水文本区域以绑定客户端事件。

Developer Notes & Accessibility

原生表单集成： 编译为带 name 和 form 属性的标准原生 <textarea>，保证在静态/JS 禁用环境下的原生可用性。
WAI-ARIA 合规性： 标签/错误关系通过标准 label 关联、aria-invalid 和 aria-describedby 正确绑定，确保屏幕阅读器播报验证错误。
智能自动调整： autoresize 在按键时动态调整 textarea 的滚动高度，无需昂贵的布局回流，提升体验。

TagsField 标签字段

ToggleGroup 切换组

外观

外观

外观

外观