文本域

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

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，您可以跳过此步骤。

导入

用法

禁用

只读

必填

如果您将 isRequired 属性传递给输入框，标签末尾将显示一个 danger 星号，并且该文本域将变为必填项。

清除按钮

如果您将 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

Textarea 属性

输入事件