复选框

复选框允许用户从单个项目的列表中选择多个项目，或将单个项目标记为已选择。

安装

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

导入

用法

禁用

尺寸

颜色

圆角

不确定状态

isIndeterminate 属性将Checkbox 设置为不确定状态，覆盖其外观并保持该状态，直到设置为false，无论用户如何交互。

删除线

自定义选中图标

默认情况下，IconProps 将会传递给你的图标组件。请确保 isSelected、isIndeterminate 和 disableAnimation 没有传递给 DOM 元素。

受控

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

插槽

• base：复选框的包装器，它处理对齐、放置和整体外观。
• wrapper：一个内部容器，包含相对定位、flex 属性、溢出处理以及管理悬停和选中状态的样式。
• hiddenInput：用于处理复选框状态的隐藏输入元素。
• icon：复选框内的图标，控制大小、可见性以及选中时的变化。
• label：与复选框关联的文本。

自定义样式

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

自定义实现

如果需要进一步自定义复选框，你可以使用 useCheckbox 钩子来创建自己的实现。

注意：我们使用 Tailwind Variants 来实现上述样式，你可以使用任何其他库，例如 clsx 来达到相同的效果。

数据属性

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

• data-selected：当复选框被选中时。基于 isSelected 属性。
• data-pressed：当复选框被按下时。基于 usePress
• data-invalid：当复选框无效时。基于 validationState 属性。
• data-readonly：当复选框为只读时。基于 isReadOnly 属性。
• data-indeterminate：当复选框为不确定状态时。基于 isIndeterminate 属性。
• data-hover：当复选框被悬停时。基于 useHover
• data-focus：当复选框被聚焦时。基于 useFocusRing。
• data-focus-visible：当使用键盘聚焦复选框时。基于 useFocusRing。
• data-disabled：当复选框被禁用时。基于 isDisabled 属性。
• data-loading：当复选框正在加载时。基于 isLoading 属性。

可访问性

• 使用原生 HTML <input> 元素构建。
• 完全支持浏览器功能，如表单自动填充。
• 键盘焦点管理和跨浏览器标准化。
• 为 Tab 和 Space 键提供键盘事件支持。
• 为辅助技术提供标签支持。
• 支持不确定状态。

API

复选框属性

复选框事件

类型

复选框图标属性