复选框组
复选框组允许用户从选项列表中选择一个或多个项目。
安装
npx nextui-cli@latest add checkbox
以上命令仅用于单独安装。如果已全局安装 @nextui-org/react，则可以跳过此步骤。
导入
NextUI 导出了 2 个与复选框相关的组件
- CheckboxGroup：根组件，它包装标签和包装器。
- Checkbox：复选框组件。
用法
禁用
水平
受控
可以使用 value 和 onValueChange 属性来控制复选框输入值。
无效
插槽
- base：复选框组根包装器，它包装标签和包装器。
- wrapper：复选框组包装器，它包装所有复选框。
- label：复选框组标签，它位于包装器之前。
- description：复选框组的描述。
- errorMessage：复选框组的错误消息。
自定义样式
你可以通过将自定义 Tailwind CSS 类传递给组件插槽来定制CheckboxGroup 组件。
自定义实现
如果你需要进一步定制复选框，你可以使用useCheckboxGroup 钩子来创建你自己的实现。
注意：我们使用了 Tailwind Variants 来实现上述样式，你可以使用任何其他库，例如 clsx 来实现相同的效果。
API
复选框组属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children | ReactNode[] | ReactNode[] | 复选框项。 | - |
| orientation | vertical | horizontal | 复选框组项应与其对齐的轴。 | vertical |
| color | default | primary | secondary | success | warning | danger | 复选框的颜色。 | primary |
| size | xs | sm | md | lg | xl | 复选框的大小。 | 中 |
| 半径 | 无 | 基础 | 超小 | 小 | 中 | 大 | 超大 | 全 | 复选框的半径。 | 中 |
| 名称 | 字符串 | CheckboxGroup 的名称，用于提交 HTML 表单时使用。 | - |
| 标签 | 字符串 | CheckboxGroup 的标签。 | - |
| 值 | 字符串数组 | 当前选定的值。（受控）。 | - |
| 删除线 | 布尔值 | 是否应划掉复选框标签。 | 否 |
| 默认值 | 字符串数组 | 默认选定的值。（不受控）。 | - |
| 无效 | 布尔值 | 复选框组是否无效。 | 否 |
| 验证状态 | 有效 | 无效 | 输入是否应显示其“有效”或“无效”的可视样式。（已弃用）改为使用 isInvalid。 | - |
| 说明 | React 节点 | 复选框组说明。 | - |
| 错误消息 | ReactNode | ((v: ValidationResult) => ReactNode) | 复选框组错误消息。 | - |
| validate | (value: string[]) => ValidationError ｜ true ｜ null ｜ undefined | 在提交时（例如，在失去焦点时）验证输入值，为无效值返回错误消息。如果 validationBehavior 设置为 native，则在提交表单时显示验证错误。对于实时验证，请使用 isInvalid 属性。 | - |
| validationBehavior | native | aria | 是否使用本机 HTML 表单验证来防止在值缺失或无效时提交表单，或通过 ARIA 将字段标记为必需或无效。 | aria |
| isDisabled | 布尔值 | 复选框组是否禁用。 | 否 |
| isRequired | 布尔值 | 在提交表单之前，是否需要用户在输入中选中复选框。 | 否 |
| isReadOnly | 布尔值 | 复选框是否可以被用户选中但不能被更改。 | - |
| disableAnimation | 布尔值 | 是否禁用动画。 | 否 |
| classNames | Record<"base"｜ "wrapper"｜ "label", string> | 允许为复选框组插槽设置自定义类名。 | - |
复选框组事件
| 属性 | 类型 | 描述 |
|---|---|---|
| onChange | (value: string[]) => void | 值更改时调用的处理程序。 |
