ProComponents, templates & AI tooling
HeroUI
27.7k
快速开始
组件
发布说明
迁移

CheckboxGroup 复选框组

用于管理多项复选框选择的 CheckboxGroup 组件。

StorybookReact Aria源代码样式源代码

引入

import { CheckboxGroup, Checkbox, Label, Description } from '@heroui/react';

用法

选择你的兴趣可多选
import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";

export function Basic() {
  return (
    <CheckboxGroup name="interests">

组件结构

导入 CheckboxGroup 组件，并通过点语法访问所有子部分。

import {CheckboxGroup, Checkbox, Label, Description, FieldError} from '@heroui/react';

export default () => (
  <CheckboxGroup name="interests">
    <Label />
    <Description /> {/* Optional */}
    <Checkbox value="option1">
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Content>
        <Label />
        <Description /> {/* Optional */}
      </Checkbox.Content>
    </Checkbox>
    <FieldError /> {/* Optional */}
  </CheckboxGroup>
);

在 Surface 内

置于 Surface 中时，使用 variant="secondary"，以应用适合表面背景的低强调变体。

选择你的兴趣可多选
import {Checkbox, CheckboxGroup, Description, Label, Surface} from "@heroui/react";

export function OnSurface() {
  return (
    <Surface className="w-full rounded-3xl p-6">

自定义指示器

功能选择你需要的功能
"use client";

import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";

export function WithCustomIndicator() {

不定状态

"use client";

import {Checkbox, CheckboxGroup, Label} from "@heroui/react";
import {useState} from "react";

受控

你的技能已选：coding, design
"use client";

import {Checkbox, CheckboxGroup, Label} from "@heroui/react";
import {useState} from "react";

校验

偏好设置
"use client";

import {Button, Checkbox, CheckboxGroup, FieldError, Form, Label} from "@heroui/react";

export function Validation() {

禁用

功能功能选择暂时不可用
import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";

export function Disabled() {
  return (
    <CheckboxGroup isDisabled name="disabled-features">

特性与附加示例

通知偏好选择接收更新的方式
import {Bell, Comment, Envelope} from "@gravity-ui/icons";
import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";
import clsx from "clsx";

export function FeaturesAndAddOns() {

自定义渲染函数

选择你的兴趣可多选
"use client";

import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";

export function CustomRenderFunction() {

样式

传入 Tailwind CSS 类

你可以自定义 CheckboxGroup 组件：

import { CheckboxGroup, Checkbox, Label } from '@heroui/react';

function CustomCheckboxGroup() {
  return (
    <CheckboxGroup className="gap-4" name="custom">
      <Checkbox value="option1">
        <Checkbox.Control className="border-2 border-purple-500 data-[selected=true]:bg-purple-500">
          <Checkbox.Indicator className="text-white" />
        </Checkbox.Control>
        <Checkbox.Content>
          <Label>Option 1</Label>
        </Checkbox.Content>
      </Checkbox>
    </CheckboxGroup>
  );
}

自定义组件类

若要自定义 CheckboxGroup 组件类，可以使用 @layer components 指令。
了解更多.

@layer components {
  .checkbox-group {
    @apply flex flex-col gap-2;
  }
}

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

CheckboxGroup 组件使用以下 CSS 类（查看源码样式）：

  • .checkbox-group - 复选框组合容器基础样式

API 参考

CheckboxGroup Props

继承自 React Aria CheckboxGroup。

Prop类型默认值描述
valuestring[]-当前选中值（受控）
defaultValuestring[]-默认选中值（非受控）
onChange(value: string[]) => void-选中值变化时调用的处理函数
isDisabledbooleanfalse是否禁用整个复选框组合
isRequiredbooleanfalse是否必填
isReadOnlybooleanfalse是否只读
isInvalidbooleanfalse是否处于无效状态
namestring-提交 HTML 表单时复选框组合的名称
childrenReact.ReactNode | (values: CheckboxGroupRenderProps) => React.ReactNode-复选框组合内容或渲染 prop
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxGroupRenderProps>-通过自定义渲染函数覆盖默认的 DOM 元素。

CheckboxGroupRenderProps

使用渲染 prop 模式时，会提供以下值：

Prop类型描述
valuestring[]当前选中值
isDisabledboolean是否禁用
isReadOnlyboolean是否只读
isInvalidboolean是否处于无效状态
isRequiredboolean是否必填

Checkbox 复选框

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

Chip 标签

用于展示标签、状态与分类等信息的小型徽标。

本页目录

引入用法组件结构在 Surface 内自定义指示器不定状态受控校验禁用特性与附加示例自定义渲染函数样式传入 Tailwind CSS 类自定义组件类CSS 类API 参考CheckboxGroup PropsCheckboxGroupRenderProps