Textarea

Textarea 用于收集评论、备注、描述等多行文本。组件基于原生 <textarea> 封装，保留常用原生属性透传，并提供统一尺寸、受控状态和可选字数统计。

import { Textarea, TextareaContent, TextareaCount, TextareaRoot } from '@skyroc/web-ui';

何时使用

• 需要输入多行文本，如备注、评论、问题描述、长文本表单项。
• 需要显示当前输入长度，或配合 maxLength 给用户明确的输入限制反馈。
• 需要按项目统一尺寸体系调整文本域高度、字号和内边距。
• 只收集单行文本时优先使用 Input；需要富文本编辑时不适合使用 Textarea。

基础用法

Textarea 支持原生 textarea 属性，placeholder、disabled、readOnly、name、required 等属性会透传到底层 <textarea>。

<Textarea placeholder="请输入内容" />

字数统计

通过 showCount 显示字数统计。默认统计 String(value).length，没有 maxLength 时只显示当前数量。

<Textarea showCount />

最大长度

通过原生 maxLength 限制输入长度，并在开启 showCount 后显示 当前数量 / 最大长度。

<Textarea showCount maxLength={200} />

自定义统计内容

通过 countRender 自定义统计区域的渲染内容。countRender 接收组件格式化后的统计文本。

<Textarea showCount countRender={count => <span>{count}</span>} />

字符簇计数

通过 countGraphemes 自定义计数逻辑，适合 emoji、组合字符等需要按用户可见字符统计的场景。

<Textarea
  showCount
  countGraphemes={value =>
    Array.from(new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(String(value ?? ''))).length
  }
/>

尺寸

通过 size 调整文本域的最小高度、字号、内边距和计数位置，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 分别控制 root、content 和 count 三个 slot。className 作为原生 textarea 属性会传给内容元素；如果需要精细控制外层容器或计数区域，优先使用 classNames。

<Textarea
  showCount
  classNames={{
    root: 'max-w-md',
    content: 'min-h-32',
    count: 'text-primary'
  }}
/>

API

Textarea

通用属性参考：继承原生 textarea 属性，并增加字数统计、项目尺寸和 slot class 配置。

TextareaRoot

外层容器组件，继承原生 div 属性。

TextareaContent

底层内容组件，继承原生 textarea 属性。

TextareaCount

统计展示组件，继承原生 div 属性，但 children 被定义为统计文本渲染函数。

类型