使用精美的组件更快地交付产品
HeroUI 专业版

复选框组

CheckboxGroup 允许用户从选项列表中选择一个或多个项目。

故事书@heroui/checkboxReact Aria源码样式源码

安装

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

导入

HeroUI 导出 2 个与复选框相关的组件

  • CheckboxGroup：根组件，它包裹了标签和包装器。
  • Checkbox：复选框组件。

用法

禁用

水平排列

受控组件

您可以使用 value 和 onValueChange 属性来控制复选框的输入值。

无效

插槽

  • base：复选框组根包装器，它包裹了标签和包装器。
  • wrapper：复选框组包装器，它包裹了所有复选框。
  • label：复选框组标签，它位于包装器之前。
  • description：复选框组的描述。
  • errorMessage：复选框组的错误消息。

自定义样式

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

自定义实现

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

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

接口

复选框组属性

属性类型默认
children
ReactNode[] | ReactNode[]
orientation
vertical | horizontal
"vertical"
color
default | primary | secondary | success | warning | danger
"primary"
size
xs | sm | md | lg | xl
"md"
radius
none | base | xs | sm | md | lg | xl | full
"md"
name
string
label
string
value
string[]
lineThrough
boolean
false
defaultValue
string[]
isInvalid
boolean
false
validationState
valid | invalid
description
ReactNode
errorMessage
ReactNode | ((v: ValidationResult) => ReactNode)
validate
(value: string[]) => ValidationError | true | null | undefined
validationBehavior
native | aria
"native"
isDisabled
boolean
false
isRequired
boolean
false
isReadOnly
boolean
disableAnimation
boolean
false
classNames
Partial<Record<"base" | "wrapper" | "label", string>>

复选框组事件

属性类型默认
onChange
(value: string[]) => void
CheckboxChip