diff --git a/packages/code-studio/src/styleguide/CheckboxGroups.tsx b/packages/code-studio/src/styleguide/CheckboxGroups.tsx
index c8b3e23a3..3c7071f42 100644
--- a/packages/code-studio/src/styleguide/CheckboxGroups.tsx
+++ b/packages/code-studio/src/styleguide/CheckboxGroups.tsx
@@ -1,5 +1,7 @@
import React from 'react';
-import { Checkbox, CheckboxGroup, Flex, Text } from '@deephaven/components';
+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 {
@@ -10,16 +12,16 @@ export function CheckboxGroups(): JSX.Element {
Single Child
- Aaa
+ Aaa
Multiple Children
- Aaa
- Bbb
- Ccc
+ Aaa
+ Bbb
+ Ccc
@@ -33,7 +35,7 @@ export function CheckboxGroups(): JSX.Element {
{999}
{true}
{false}
- Aaa
+ Aaa
diff --git a/packages/components/src/spectrum/CheckboxGroup.tsx b/packages/components/src/spectrum/CheckboxGroup.tsx
index 39b2d2328..1657aea9f 100644
--- a/packages/components/src/spectrum/CheckboxGroup.tsx
+++ b/packages/components/src/spectrum/CheckboxGroup.tsx
@@ -1,10 +1,10 @@
import { isElementOfType } from '@deephaven/react-hooks';
import React, { ReactNode, useMemo, useState } from 'react';
import {
+ Checkbox,
CheckboxGroup as SpectrumCheckboxGroup,
SpectrumCheckboxGroupProps,
} from '@adobe/react-spectrum';
-import Checkbox from '../Checkbox';
export type CheckboxGroupProps = {
children: ReactNode;
@@ -34,13 +34,15 @@ export function CheckboxGroup({
React.Children.map(children, (child, index) => {
if (isElementOfType(child, Checkbox)) {
return React.cloneElement(child, {
- checked: checkedState[index] || false,
+ isSelected: true,
+ value: `checkbox-${index}`,
onChange: () => handleCheckboxChange(index),
});
}
return (
handleCheckboxChange(index)}
>
{String(child)}