Checkbox 组

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

Storybook@heroui/checkboxReact AriaSourceStyles source

安装

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

导入

HeroUI 导出了 2 个与 checkbox 相关的组件：

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

用法

禁用

水平布局

受控模式

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

无效状态

插槽 (Slots)

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

自定义样式

你可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制 CheckboxGroup 组件。

自定义实现

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

注意: 我们使用了 Tailwind Variants 来实现上述样式，你也可以使用其他库（如 clsx）来达到同样的效果。

API

Checkbox Group 属性

PropTypeDefault
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>>

Checkbox Group 事件

PropTypeDefault
onChange
(value: string[]) => void
onValueChange
(value: T) => void
Checkbox 复选框Chip 标签