使用精美的组件更快地交付
NextUI Pro

复选框组

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

Storybook@nextui-org/checkboxReact Aria源代码样式源代码

安装

上面的命令仅用于单独安装。如果 @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
"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
复选框芯片