diff --git a/packages/code-studio/src/styleguide/CheckboxGroups.tsx b/packages/code-studio/src/styleguide/CheckboxGroups.tsx
new file mode 100644
index 000000000..ebe8cd3c9
--- /dev/null
+++ b/packages/code-studio/src/styleguide/CheckboxGroups.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { CheckboxGroup, Flex, Text } from '@deephaven/components';
+// eslint-disable-next-line no-restricted-imports
+import { Checkbox } from '@adobe/react-spectrum';
+import SampleSection from './SampleSection';
+
+export function CheckboxGroups(): JSX.Element {
+ return (
+
+ Checkbox Groups
+
+
+ Single Child
+
+ Aaa
+
+
+
+
+ Multiple Children
+
+ Aaa
+ Bbb
+ Ccc
+
+
+
+
+ Mixed Children Types
+
+ {/* eslint-disable react/jsx-curly-brace-presence */}
+ {'String 1'}
+ {'String 2'}
+ {444}
+ {999}
+ {true}
+ {false}
+ Aaa
+
+
+
+
+ );
+}
+
+export default CheckboxGroups;
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index 04851ff66..a950ee7df 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -40,6 +40,7 @@ import Pickers from './Pickers';
import ListViews from './ListViews';
import ErrorViews from './ErrorViews';
import XComponents from './XComponents';
+import CheckboxGroups from './CheckboxGroups';
const stickyProps = {
position: 'sticky',
@@ -118,6 +119,7 @@ function StyleGuide(): React.ReactElement {
+
diff --git a/packages/components/src/spectrum/CheckboxGroup.tsx b/packages/components/src/spectrum/CheckboxGroup.tsx
new file mode 100644
index 000000000..2cfd701c8
--- /dev/null
+++ b/packages/components/src/spectrum/CheckboxGroup.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable react/no-array-index-key */
+import { isElementOfType } from '@deephaven/react-hooks';
+import React, { type ReactNode, useMemo } from 'react';
+import {
+ Checkbox,
+ CheckboxGroup as SpectrumCheckboxGroup,
+ type SpectrumCheckboxGroupProps,
+} from '@adobe/react-spectrum';
+import { ensureArray } from '@deephaven/utils';
+
+export type CheckboxGroupProps = {
+ children: ReactNode;
+} & Omit;
+
+/**
+ * Augmented version of the Spectrum CheckboxGroup component that supports
+ * primitive item children.
+ */
+export function CheckboxGroup({
+ children,
+ ...props
+}: CheckboxGroupProps): JSX.Element {
+ const wrappedChildren = useMemo(
+ () =>
+ ensureArray(children).map(child =>
+ isElementOfType(child, Checkbox) ? (
+ child
+ ) : (
+
+ {String(child)}
+
+ )
+ ),
+ [children]
+ );
+
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {wrappedChildren}
+ );
+}
+
+export default CheckboxGroup;
diff --git a/packages/components/src/spectrum/forms.ts b/packages/components/src/spectrum/forms.ts
index 3c8d54c01..d8048f396 100644
--- a/packages/components/src/spectrum/forms.ts
+++ b/packages/components/src/spectrum/forms.ts
@@ -1,8 +1,6 @@
export {
Checkbox as SpectrumCheckbox,
type SpectrumCheckboxProps,
- CheckboxGroup,
- type SpectrumCheckboxGroupProps as CheckboxGroupProps,
Form,
type SpectrumFormProps as FormProps,
NumberField,
diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts
index 28630b2da..6b4f5a84f 100644
--- a/packages/components/src/spectrum/index.ts
+++ b/packages/components/src/spectrum/index.ts
@@ -26,6 +26,7 @@ export * from './picker';
export * from './Heading';
export * from './Text';
export * from './View';
+export * from './CheckboxGroup';
/**
* Custom DH spectrum utils
diff --git a/tests/styleguide.spec.ts b/tests/styleguide.spec.ts
index cedd9f6a6..cfd883727 100644
--- a/tests/styleguide.spec.ts
+++ b/tests/styleguide.spec.ts
@@ -48,6 +48,7 @@ const sampleSectionIds: string[] = [
'sample-section-spectrum-forms',
'sample-section-spectrum-overlays',
'sample-section-spectrum-well',
+ 'sample-section-checkbox-groups',
];
const buttonSectionIds: string[] = [
'sample-section-buttons-regular',
diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png
new file mode 100644
index 000000000..6e8e7e9e0
Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png
new file mode 100644
index 000000000..8759cf8fe
Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png
new file mode 100644
index 000000000..cbfacc3df
Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png differ