snapshot of https://github.com/dream-num/univer.git (dev, 2026-09-16; blobs > 131072B omitted)

packages/design/src/components/checkbox-group/CheckboxGroup.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { CSSProperties, ReactNode } from 'react';
+import type { ICheckboxProps } from '../checkbox/Checkbox';
+import { Children, cloneElement, isValidElement } from 'react';
+import { clsx } from '../../helper/clsx';
+
+export interface ICheckboxGroupProps {
+    children: ReactNode[];
+
+    /**
+     * The class name of the checkbox group
+     */
+    className?: string;
+
+    /**
+     * The style of the checkbox group
+     */
+    style?: CSSProperties;
+
+    /**
+     * Define which checkbox is selected
+     */
+    value: Array<string | number | boolean>;
+
+    /**
+     * Whether the checkbox is disabled
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Direction of the radio group
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+
+    /**
+     * The callback function triggered when switching options
+     */
+    onChange: (value: Array<string | number | boolean>) => void;
+}
+
+/**
+ * CheckboxGroup Component
+ */
+export function CheckboxGroup(props: ICheckboxGroupProps) {
+    const { children, className, style, value, disabled, direction = 'horizontal', onChange } = props;
+
+    const handleChange = (item: string | number | boolean) => {
+        if (value.includes(item)) {
+            onChange(value.filter((i) => i !== item));
+        } else {
+            onChange([...value, item]);
+        }
+    };
+
+    return (
+        <div
+            className={clsx('univer-flex univer-gap-2', {
+                'univer-flex-col': direction === 'vertical',
+            }, className)}
+            style={style}
+        >
+            {Children.map(children, (child, index) => {
+                if (isValidElement<ICheckboxProps>(child)) {
+                    return cloneElement(child, {
+                        key: index,
+                        children: child.props.children,
+                        checked: child.props.value ? value.includes(child.props.value) : false,
+                        disabled: disabled ?? child.props.disabled,
+                        onChange: handleChange,
+                    });
+                }
+                return child;
+            })}
+        </div>
+    );
+}