Checkbox 复选框

复选框允许用户从多个独立项列表中选定多项，或将单个独立项标记为已选中。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

禁用状态

尺寸

颜色

圆角

不确定状态

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

删除线

自定义勾选图标

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

受控模式

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

插槽

• base: 复选框包装器，处理对齐、位置和整体外观。
• wrapper: 内部容器，包含相对定位、弹性属性、溢出处理以及管理悬停和选定状态的样式。
• 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

Checkbox 属性

Checkbox 事件

类型

Checkbox 图标属性