Created checkbox group component

app/components/CheckboxGroup/CheckboxGroup.container.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { memo, useCallback, useId, useState, useEffect } from "react";
+import { CheckboxGroupView } from "./CheckboxGroup.view";
+import type { CheckboxGroupProps } from "./CheckboxGroup.types";
+
+const CheckboxGroupContainer = ({
+  name,
+  value,
+  onChange,
+  mode = "standard",
+  disabled = false,
+  options = [],
+  className = "",
+  ...props
+}: CheckboxGroupProps) => {
+  // Generate unique ID for accessibility if not provided
+  const generatedId = useId();
+  const groupId = name || `checkbox-group-${generatedId}`;
+
+  // Internal state to track checked values
+  const [checkedValues, setCheckedValues] = useState<string[]>(value || []);
+
+  // Sync internal state with external value prop
+  useEffect(() => {
+    if (value !== undefined) {
+      setCheckedValues(value);
+    }
+  }, [value]);
+
+  const handleOptionChange = useCallback(
+    (optionValue: string, checked: boolean) => {
+      if (disabled) return;
+
+      const newCheckedValues = checked
+        ? [...checkedValues, optionValue]
+        : checkedValues.filter((v) => v !== optionValue);
+
+      setCheckedValues(newCheckedValues);
+
+      if (onChange) {
+        onChange({ value: newCheckedValues });
+      }
+    },
+    [disabled, checkedValues, onChange],
+  );
+
+  return (
+    <CheckboxGroupView
+      groupId={groupId}
+      value={checkedValues}
+      mode={mode}
+      disabled={disabled}
+      options={options}
+      className={className}
+      ariaLabel={props["aria-label"]}
+      onOptionChange={handleOptionChange}
+    />
+  );
+};
+
+CheckboxGroupContainer.displayName = "CheckboxGroup";
+
+export default memo(CheckboxGroupContainer);

app/components/CheckboxGroup/CheckboxGroup.types.ts

@@ -0,0 +1,28 @@
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  subtext?: string;
+  ariaLabel?: string;
+}
+
+export interface CheckboxGroupProps {
+  name?: string;
+  value?: string[];
+  onChange?: (_data: { value: string[] }) => void;
+  mode?: "standard" | "inverse";
+  disabled?: boolean;
+  options?: CheckboxOption[];
+  className?: string;
+  "aria-label"?: string;
+}
+
+export interface CheckboxGroupViewProps {
+  groupId: string;
+  value: string[];
+  mode: "standard" | "inverse";
+  disabled: boolean;
+  options: CheckboxOption[];
+  className: string;
+  ariaLabel?: string;
+  onOptionChange: (_optionValue: string, _checked: boolean) => void;
+}

app/components/CheckboxGroup/CheckboxGroup.view.tsx

@@ -0,0 +1,84 @@
+import Checkbox from "../Checkbox";
+import type { CheckboxGroupViewProps } from "./CheckboxGroup.types";
+
+export function CheckboxGroupView({
+  groupId,
+  value,
+  mode,
+  disabled,
+  options,
+  className,
+  ariaLabel,
+  onOptionChange,
+}: CheckboxGroupViewProps) {
+  return (
+    <div
+      className={`space-y-[8px] ${className}`}
+      role="group"
+      aria-label={ariaLabel}
+    >
+      {options.map((option) => {
+        const isChecked = value.includes(option.value);
+
+        // If there's subtext, render checkbox without label and handle layout separately
+        if (option.subtext) {
+          return (
+            <div
+              key={option.value}
+              className="flex gap-[8px] items-start"
+            >
+              <Checkbox
+                checked={isChecked}
+                mode={mode}
+                disabled={disabled}
+                name={groupId}
+                value={option.value}
+                ariaLabel={option.ariaLabel || option.label}
+                onChange={({ checked }) => {
+                  onOptionChange(option.value, checked);
+                }}
+              />
+              <div className="flex flex-col gap-[4px] flex-1">
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-primary)]"
+                      : "text-[var(--color-content-default-primary)]"
+                  }`}
+                >
+                  {option.label}
+                </span>
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
+                      : "text-[var(--color-content-default-tertiary,#b4b4b4)]"
+                  }`}
+                >
+                  {option.subtext}
+                </span>
+              </div>
+            </div>
+          );
+        }
+
+        // If no subtext, use Checkbox's built-in label
+        return (
+          <Checkbox
+            key={option.value}
+            checked={isChecked}
+            mode={mode}
+            disabled={disabled}
+            label={option.label}
+            name={groupId}
+            value={option.value}
+            ariaLabel={option.ariaLabel}
+            onChange={({ checked }) => {
+              onOptionChange(option.value, checked);
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/components/CheckboxGroup/index.tsx

@@ -0,0 +1 @@
+export { default } from "./CheckboxGroup.container";