文本区域

Textarea 组件是一个多行输入框，允许您编写大量文本。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

禁用

只读

必填

如果你在输入框上设置 isRequired 属性，它会在标签末尾显示一个 danger 星号，并且文本框将被标记为必填。

清除按钮

如果你在 textarea 上设置 isClearable 属性，它会在文本框末尾添加一个清除按钮，只有当文本框有值时才可见。

自动扩展

文本框会根据内容自动增长，你也可以通过 minRows 和 maxRows 属性为其设置最小和最大高度。该功能基于 react-textarea-autosize。

禁用自动扩展

如果你想禁用自动扩展功能，可以使用 disableAutosize 属性。

变体

错误提示

你可以结合 isInvalid 和 errorMessage 属性来展示无效的文本框。

描述

受控

你可以使用 value 和 onValueChange 属性来控制输入值。

注意：HeroUI Textarea 也支持诸如 onChange 的原生事件，十分适合使用如 Formik 和 React Hook Form 之类的表单库。

插槽

• base：输入包装器，处理对齐、位置和整体外观。
• label：文本框标签，显示在文本框上方、内部或左侧。
• inputWrapper：包裹 label（当其位于内部时）以及 innerWrapper。
• input：文本框输入元素。
• description：文本框说明。
• errorMessage：文本框错误信息。
• headerWrapper：包裹 label 与 clearButton。

数据属性

Textarea 在 base 元素上具有以下属性：

• data-invalid：当文本框无效时。基于 isInvalid 属性。
• data-required：当文本框为必填时。基于 isRequired 属性。
• data-readonly：当文本框只读时。基于 isReadOnly 属性。
• data-hover：当文本框被悬停时。基于 useHover
• data-focus：当文本框获得焦点时。基于 useFocusRing。
• data-focus-visible：当文本框通过键盘获取焦点时。基于 useFocusRing。
• data-disabled：当文本框被禁用时。基于 isDisabled 属性。

无障碍

• 使用本地 <input> 元素实现。
• 支持视觉和 ARIA 标记。
• 支持更改、剪贴板、组合、选择和输入事件。
• 通过 ARIA 向辅助技术公开必填和无效状态。
• 通过 ARIA 将说明和错误消息与输入关联。

API

文本框属性

输入事件