多行文本框

多行文本框组件是一个多行输入框，允许您编写较长的文本。

安装

npx nextui-cli@latest add input

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

导入

用法

禁用

只读

必填

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

自动调整大小

文本区域会根据内容自动调整大小，但您也可以使用 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: 文本区域的错误消息。

数据属性

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 属性

输入事件