复选框

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

安装

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

导入

用法

禁用

尺寸

颜色

圆角

不确定状态

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

删除线

自定义选中图标

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

受控

注意：HeroUI Checkbox 也支持原生事件，例如 onChange，这对于表单库（如 Formik 和 React Hook Form）非常有用。

插槽

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

自定义样式

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

自定义实现

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

注意：我们使用 Tailwind Variants 来实现上述样式，您可以使用任何其他库（如 clsx）来实现相同的结果。

数据属性

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

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

无障碍性

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

API

Checkbox Props

Checkbox Events

Types

Checkbox Icon Props