文本域

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

安装

上面的命令仅用于单独安装。如果已全局安装，则可以跳过此步骤 @nextui-org/react 。

导入

用法

禁用

只读

必填

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

清除按钮

如果您将 isClearable 属性传递给文本域，则文本域末尾会有一个清除按钮，当文本域有值时，该按钮可见。

自动调整大小

文本区域会根据内容自动增长，但您也可以使用 minRows 和 maxRows 属性设置最小和最大高度。它基于 react-textarea-autosize。

不使用自动调整大小

如果您想禁用自动调整大小功能，可以使用 disableAutosize 属性。

变体

带有错误消息

您可以组合使用 isInvalid 和 errorMessage 属性来显示无效的文本区域。

描述

受控

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

注意：NextUI 的 Textarea 也支持原生事件，例如 onChange，这对于诸如 Formik 和 React Hook Form 等表单库非常有用。

插槽

• base：输入包装器，它处理对齐、放置和整体外观。
• label：文本区域的标签，它显示在文本区域的上方、内部或左侧。
• inputWrapper：包裹 label（当它在内部时）和 innerWrapper。
• input：文本区域输入元素。
• description：文本区域的描述。
• errorMessage：文本区域的错误消息。
• headerWrapper：包裹 label 和 clearButton。

数据属性

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

• data-invalid：当文本区域无效时。基于 isInvalid prop。
• data-required：当文本区域为必填项时。基于 isRequired prop。
• data-readonly：当文本区域为只读时。基于 isReadOnly prop。
• data-hover：当文本区域被悬停时。基于 useHover
• data-focus：当文本区域被聚焦时。基于 useFocusRing。
• data-focus-visible：当使用键盘聚焦文本区域时。基于 useFocusRing。
• data-disabled：当文本区域被禁用时。基于 isDisabled 属性。

可访问性

• 使用原生 <input> 元素构建。
• 支持视觉和 ARIA 标签。
• 支持 change、剪贴板、composition、selection 和 input 事件。
• 必填和无效状态通过 ARIA 暴露给辅助技术。
• 支持通过 ARIA 链接到输入的描述和错误消息帮助文本。

API

Textarea 属性

输入事件