输入

输入是一个允许用户输入文本的组件。它可以用于获取表单、搜索字段等中的用户输入。

安装

npx nextui-cli@latest add input

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

导入

用法

禁用

只读

必填

如果将 isRequired 属性传递给输入，它将在标签的末尾显示 danger 星号，并且输入将是必需的。

尺寸

颜色

变体

半径

标签位置

你可以通过设置 labelPlacement 属性为 inside、outside 或 outside-left 来更改标签的位置。

注意：如果未传递 label，则 labelPlacement 属性默认值为 outside。

密码输入

你可以使用 type 属性将输入类型更改为 password。

清除按钮

如果你将 isClearable 属性传递给输入，它将在输入的末尾有一个清除按钮，当输入有值时它将可见。

开始和结束内容

你可以使用 startContent 和 endContent 属性在输入框的开始和结束处添加内容。

带描述

你可以通过传递 description 属性给输入框添加描述。

带错误消息

你可以组合 isInvalid 和 errorMessage 属性来显示一个无效的输入。只有当 isInvalid 被设置为 true 时，errorMessage 才会显示。

带有 regex 电子邮件验证的示例

受控

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

注意：NextUI Input 也支持原生事件，如 onChange，这对诸如 Formik 和 React Hook Form 等表单库很有用。

插槽

• base：输入包装器，它处理对齐、放置和一般外观。
• label：输入的标签，它显示在输入上方、内部或左侧。
• mainWrapper：当位置为 outside / outside-left 时，包装 inputWrapper。
• inputWrapper：当 label（在内部时）和 innerWrapper。
• innerWrapper：包装 input、startContent 和 endContent。
• input：输入元素。
• clearButton：清除按钮，位于输入的末尾。
• helperWrapper：包装 description 和 errorMessage。
• description：输入的描述。
• errorMessage：输入的错误消息。

自定义样式

你可以通过将自定义 Tailwind CSS 类传递给组件槽来定制 Input 组件。

自定义实现

如果您需要进一步自定义输入，可以使用 useInput 钩子创建您自己的实现。

数据属性

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

• data-invalid：当输入无效时。基于 isInvalid 属性。
• data-required：当输入为必填项时。基于 isRequired 属性。
• data-readonly：当输入为只读时。基于 isReadOnly 属性。
• data-hover：当输入处于悬停状态时。基于 useHover
• data-focus：当输入获得焦点时。基于 useFocusRing。
• data-focus-within：当输入获得焦点或其任何子元素获得焦点时。基于 useFocusWithin。
• data-focus-visible：当输入通过键盘获得焦点时。基于 useFocusRing。
• data-disabled：当输入被禁用时。基于 isDisabled 属性。

辅助功能

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

API

输入属性

输入框事件