复选框

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

安装

npx nextui-cli@latest add checkbox

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

导入

用法

禁用

尺寸

颜色

圆角

不确定

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

划线

自定义勾选图标

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

受控

注意：NextUI Checkbox 还支持本机事件，如 onChange，这对 Formik 和 React Hook Form 等表单库很有用。

插槽

• base：复选框包装器，它处理对齐、放置和一般外观。
• wrapper：一个内部容器，包括相对定位、flex 属性、溢出处理以及管理悬停和选中状态的样式。
• 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 prop。
• data-loading: 当复选框处于加载状态时。基于 isLoading prop。

无障碍

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

API

复选框 Props

复选框事件

类型

复选框图标属性

type IconProps = {
  "data-checked": string;
  isSelected: boolean;
  isIndeterminate: boolean;
  disableAnimation: boolean;
  className: string;
};

type CheckboxIconProps = ReactNode | ((props: IconProps) => ReactNode);