Created checkbox group component

2026-02-04 13:34:22 -07:00
parent 05e403e3c6
commit 87a1e1d2a8
6 changed files with 410 additions and 5 deletions
@@ -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);