diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
new file mode 100644
index 00000000000..d545624255b
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -0,0 +1,446 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you 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 {box, iconStyles} from './Checkbox';
+import Checkmark from '../ui-icons/Checkmark';
+import {
+  ContextValue,
+  DEFAULT_SLOT,
+  ListBox,
+  ListBoxItem,
+  ListBoxProps,
+  Provider
+} from 'react-aria-components';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, Orientation, Selection} from '@react-types/shared';
+import {focusRing, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {IllustrationContext} from '../src/Icon';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
+import {TextContext} from './Content';
+import {useControlledState} from '@react-stately/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'renderEmptyState' | 'dependencies' | 'items' | 'children' | 'selectionMode'>{
+  /**
+   * The SelectBox elements contained within the SelectBoxGroup.
+   */
+  children: ReactNode,
+  /**
+   * The selection mode for the SelectBoxGroup.
+   * @default 'single'
+   */
+  selectionMode?: 'single' | 'multiple',
+  /**
+   * The currently selected keys in the collection (controlled).
+   */
+  selectedKeys?: Selection,
+  /**
+   * The initial selected keys in the collection (uncontrolled).
+   */
+  defaultSelectedKeys?: Selection,
+  /**
+   * Number of columns to display the SelectBox elements in.
+   * @default 2
+   */
+  numColumns?: number,
+  /**
+   * Gap between grid items.
+   * @default 'default'
+   */
+  gutterWidth?: 'default' | 'compact' | 'spacious',
+  /**
+   * Whether the SelectBoxGroup is disabled.
+   */
+  isDisabled?: boolean,
+  /**
+   * Whether to show selection checkboxes for all SelectBoxes.
+   * @default false
+   */
+  showCheckbox?: boolean
+}
+
+export interface SelectBoxProps extends StyleProps {
+  /**
+   * The value of the SelectBox.
+   */
+  value: string,
+  /**
+   * The label for the element.
+   */
+  children?: ReactNode,
+  /**
+   * Whether the SelectBox is disabled.
+   */
+  isDisabled?: boolean
+}
+
+interface SelectBoxContextValue {
+  allowMultiSelect?: boolean,
+  orientation?: Orientation,
+  isDisabled?: boolean,
+  showCheckbox?: boolean,
+  selectedKeys?: Selection,
+  onSelectionChange?: (keys: Selection) => void
+}
+
+export const SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});
+export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+const labelOnly = ':has([slot=label]):not(:has([slot=description]))';
+const noIllustration = ':not(:has([slot=illustration]))';
+const selectBoxStyles = style({
+  ...focusRing(),
+  outlineOffset: {
+    isFocusVisible: -2
+  },
+  display: 'grid',
+  gridAutoRows: '1fr',
+  position: 'relative',
+  font: 'ui',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  width: {
+    default: 170,
+    orientation: {
+      horizontal: 368
+    }
+  },
+  height: {
+    default: 170,
+    orientation: {
+      horizontal: '100%'
+    }
+  },
+  minWidth: {
+    default: 144,
+    orientation: {
+      horizontal: 188
+    }
+  },
+  maxWidth: {
+    default: 170,
+    orientation: {
+      horizontal: 480
+    }
+  },
+  minHeight: {
+    default: 144,
+    orientation: {
+      horizontal: 80
+    }
+  },
+  maxHeight: {
+    default: 170,
+    orientation: {
+      horizontal: 240
+    }
+  },
+  padding: {
+    default: 24,
+    orientation: {
+      horizontal: 16
+    }
+  },
+  paddingStart: {
+    orientation: {
+      horizontal: 24
+    }
+  },
+  paddingEnd: {
+    orientation: {
+      horizontal: 32
+    }
+  },
+  gridTemplateAreas: {
+    orientation: {
+      vertical: [
+        'illustration',
+        '.',
+        'label'
+      ],
+      horizontal: {
+        default: [
+          'illustration . label',
+          'illustration . description'
+        ],
+        [labelOnly]: [
+          'illustration . label'
+        ]
+      }
+    }
+  },
+  gridTemplateRows: {
+    orientation: {
+      vertical: ['min-content', 8, 'min-content'],
+      horizontal: {
+        default: ['min-content', 'min-content'],
+        [noIllustration]: ['min-content']
+      }
+    }
+  },
+  gridTemplateColumns: {
+    orientation: {
+      horizontal: ['min-content', 12, '1fr']
+    }
+  },
+  alignContent: {
+    orientation: {
+      vertical: 'center'
+    }
+  },
+  borderRadius: 'lg',
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isDisabled: 'transparent'
+  },
+  backgroundColor: {
+    default: 'layer-2',
+    isDisabled: 'layer-1'
+  },
+  color: {
+    isDisabled: 'disabled'
+  },
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isSelected: 'elevated',
+    forcedColors: 'none',
+    isDisabled: 'emphasized'
+  },
+  borderWidth: 2,
+  transition: 'default',
+  cursor: {
+    default: 'pointer',
+    isDisabled: 'default'
+  }
+}, getAllowedOverrides());
+
+const illustrationContainer = style({
+  gridArea: 'illustration',
+  alignSelf: 'center',
+  justifySelf: 'center',
+  minSize: 48,
+  color: {
+    isDisabled: 'disabled'
+  },
+  opacity: {
+    isDisabled: 0.4
+  }
+});
+
+const descriptionText = style({
+  gridArea: 'description',
+  alignSelf: 'center',
+  display: {
+    default: 'block',
+    orientation: {
+      vertical: 'none'
+    }
+  },
+  overflow: 'hidden',
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  }
+});
+
+const labelText = style({
+  gridArea: 'label',
+  alignSelf: 'center',
+  justifySelf: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  width: '100%',
+  overflow: 'hidden',
+  minWidth: 0,
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontWeight: {
+    orientation: {
+      horizontal: 'bold'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  }
+});
+
+const gridStyles = style({
+  display: 'grid',
+  outline: 'none',
+  gridAutoRows: '1fr',
+  gap: {
+    gutterWidth: {
+      default: 16,
+      compact: 8,
+      spacious: 24
+    }
+  }
+}, getAllowedOverrides());
+
+/**
+ * SelectBox is a single selectable item in a SelectBoxGroup.
+ */
+export function SelectBox(props: SelectBoxProps): ReactNode {
+  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;
+  
+  let {
+    orientation = 'vertical',
+    isDisabled: groupDisabled = false,
+    showCheckbox = false
+  } = useContext(SelectBoxContext);
+
+  const size = 'M';
+  const isDisabled = individualDisabled || groupDisabled;
+
+  return (
+    <ListBoxItem
+      id={value}
+      isDisabled={isDisabled}
+      textValue={value}
+      className={renderProps => (props.UNSAFE_className || '') + selectBoxStyles({
+        size, 
+        orientation, 
+        ...renderProps
+      }, props.styles)}
+      style={UNSAFE_style}>
+      {(renderProps) => (
+        <>
+          {showCheckbox && (renderProps.isSelected || (!renderProps.isDisabled && renderProps.isHovered)) && (
+            <div 
+              className={style({
+                position: 'absolute',
+                top: 12,
+                left: 12
+              })}
+              aria-hidden="true">
+              <div
+                className={box({
+                  isSelected: renderProps.isSelected,
+                  isDisabled: renderProps.isDisabled,
+                  size: 'M'
+                } as any)}>
+                {renderProps.isSelected && (
+                  <Checkmark 
+                    size="S" 
+                    className={iconStyles} />
+                )}
+              </div>
+            </div>
+          )}
+          <Provider
+            values={[
+              [IllustrationContext, {
+                size: 'S',
+                styles: illustrationContainer({size: 'S', orientation, isDisabled: renderProps.isDisabled})
+              }],
+              [TextContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {
+                    styles: labelText({orientation, isDisabled: renderProps.isDisabled})
+                  },
+                  label: {
+                    styles: labelText({orientation, isDisabled: renderProps.isDisabled})
+                  },
+                  description: {
+                    styles: descriptionText({orientation, isDisabled: renderProps.isDisabled})
+                  }
+                }
+              }]
+            ]}>
+            {children}
+          </Provider>
+        </>
+      )}
+    </ListBoxItem>
+  );
+}
+
+/**
+ * SelectBoxGroup allows users to select one or more options from a list.
+ */
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
+
+  let {
+    children,
+    onSelectionChange,
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys,
+    selectionMode = 'single',
+    orientation = 'vertical',
+    numColumns = 2,
+    gutterWidth = 'default',
+    isDisabled = false,
+    showCheckbox = false,
+    UNSAFE_className,
+    UNSAFE_style
+  } = props;
+
+  const [selectedKeys, setSelectedKeys] = useControlledState(
+    controlledSelectedKeys,
+    defaultSelectedKeys || new Set(),
+    onSelectionChange
+  );
+
+  const selectBoxContextValue = useMemo(
+    () => {
+      const contextValue = {
+        allowMultiSelect: selectionMode === 'multiple',
+        orientation,
+        isDisabled,
+        showCheckbox,
+        selectedKeys,
+        onSelectionChange: setSelectedKeys
+      };
+      
+      return contextValue;
+    },
+    [selectionMode, orientation, isDisabled, showCheckbox, selectedKeys, setSelectedKeys]
+  );
+
+  return (
+    <ListBox
+      layout="grid"
+      selectionMode={selectionMode}
+      selectedKeys={selectedKeys}
+      onSelectionChange={setSelectedKeys}
+      className={(UNSAFE_className || '') + gridStyles({gutterWidth, orientation}, props.styles)}
+      aria-label="SelectBoxGroup"
+      aria-labelledby="SelectBoxGroup"
+      style={{
+        gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
+        ...UNSAFE_style
+      }}>
+      <SelectBoxContext.Provider value={selectBoxContextValue}>
+        {children}
+      </SelectBoxContext.Provider>
+    </ListBox>
+  );
+});
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index ab01656ff77..28924ec0645 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -72,6 +72,7 @@ export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
+export {SelectBox, SelectBoxContext, SelectBoxGroup} from './SelectBoxGroup';
 export {Slider, SliderContext} from './Slider';
 export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
@@ -148,6 +149,7 @@ export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
+export type {SelectBoxProps, SelectBoxGroupProps} from './SelectBoxGroup';
 export type {SliderProps} from './Slider';
 export type {RangeCalendarProps} from './RangeCalendar';
 export type {RangeSliderProps} from './RangeSlider';
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
new file mode 100644
index 00000000000..8babd315516
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -0,0 +1,595 @@
+/*************************************************************************
+ * ADOBE CONFIDENTIAL
+ * ___________________
+ *
+ * Copyright 2025 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ **************************************************************************/
+
+import {action} from '@storybook/addon-actions';
+import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
+import {Button, SelectBox, SelectBoxGroup, Text} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import PaperAirplane from '../spectrum-illustrations/linear/Paperairplane';
+import React, {useState} from 'react';
+import type {Selection} from 'react-aria-components';
+import Server from '../spectrum-illustrations/linear/Server';
+import StarFilled1 from '../spectrum-illustrations/gradient/generic1/Star';
+import StarFilled2 from '../spectrum-illustrations/gradient/generic2/Star';
+import {style} from '../style' with {type: 'macro'};
+
+const headingStyles = style({
+  font: 'heading',
+  margin: 0,
+  marginBottom: 16
+});
+
+const subheadingStyles = style({
+  font: 'heading',
+  fontSize: 'heading-lg',
+  margin: 0,
+  marginBottom: 16
+});
+
+const sectionHeadingStyles = style({
+  font: 'heading', 
+  fontSize: 'heading-sm',
+  color: 'gray-600',
+  margin: 0,
+  marginBottom: 8
+});
+
+const descriptionStyles = style({
+  font: 'body',
+  fontSize: 'body-sm',
+  color: 'gray-600',
+  margin: 0,
+  marginBottom: 16
+});
+
+const meta: Meta<typeof SelectBoxGroup> = {
+  title: 'SelectBoxGroup',
+  component: SelectBoxGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['single', 'multiple']
+    },
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal']
+    },
+    numColumns: {
+      control: {type: 'number', min: 1, max: 4}
+    },
+    gutterWidth: {
+      control: 'select',
+      options: ['compact', 'default', 'spacious']
+    },
+    showCheckbox: {
+      control: 'boolean'
+    }
+  },
+  args: {
+    selectionMode: 'single',
+    orientation: 'vertical',
+    numColumns: 2,
+    gutterWidth: 'default',
+    isDisabled: false,
+    showCheckbox: false
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="aws">
+        <Server />
+        <Text slot="label">Amazon Web Services</Text>
+        <Text slot="description">Reliable cloud infrastructure</Text>
+      </SelectBox>
+      <SelectBox value="azure">
+        <AlertNotice />
+        <Text slot="label">Microsoft Azure</Text>
+      </SelectBox>
+      <SelectBox value="gcp">
+        <PaperAirplane />
+        <Text slot="label">Google Cloud Platform</Text>
+      </SelectBox>
+      <SelectBox value="ibm">
+        <StarFilled1 />
+        <Text slot="label">IBM Cloud</Text>
+        <Text slot="description">Hybrid cloud solutions</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+export const MultipleSelection: Story = {
+  args: {
+    selectionMode: 'multiple',
+    defaultSelectedKeys: new Set(['aws', 'gcp']),
+    numColumns: 3,
+    gutterWidth: 'default'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 800}}>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        Focus any item and use arrow keys for grid navigation:
+      </p>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
+          {/* <Text slot="description">Reliable cloud infrastructure</Text> */}
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
+          <Text slot="description">Enterprise cloud solutions</Text>
+        </SelectBox>
+        <SelectBox value="gcp">
+          <PaperAirplane />
+          <Text slot="label">Google Cloud Platform</Text>
+          <Text slot="description">Modern cloud services</Text>
+        </SelectBox>
+        <SelectBox value="oracle">
+          <Server />
+          <Text slot="label">Oracle Cloud</Text>
+          <Text slot="description">Database-focused cloud</Text>
+        </SelectBox>
+        <SelectBox value="ibm">
+          <Server />
+          <Text slot="label">IBM Cloud</Text>
+          <Text slot="description">Hybrid cloud solutions</Text>
+        </SelectBox>
+        <SelectBox value="alibaba">
+          <PaperAirplane />
+          <Text slot="label">Alibaba Cloud</Text>
+          <Text slot="description">Asia-focused services</Text>
+        </SelectBox>
+        <SelectBox value="digitalocean">
+          <Server />
+          <Text slot="label">DigitalOcean</Text>
+          <Text slot="description">Developer-friendly platform</Text>
+        </SelectBox>
+        <SelectBox value="linode">
+          <AlertNotice />
+          <Text slot="label">Linode</Text>
+          <Text slot="description">Simple cloud computing</Text>
+        </SelectBox>
+        <SelectBox value="vultr">
+          <PaperAirplane />
+          <Text slot="label">Vultr</Text>
+          <Text slot="description">High performance cloud</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const DisabledGroup: Story = {
+  args: {
+    isDisabled: true,
+    defaultSelectedKeys: new Set(['option1']),
+    isCheckboxSelection: true
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="option1">
+        <Server />
+        <Text slot="label">Selected then Disabled</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <AlertNotice />
+        <Text slot="label">Disabled</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+function InteractiveExamplesStory() {
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['enabled1', 'starred2']));
+
+  return (
+    <div style={{maxWidth: 800}}>
+      <h3 className={subheadingStyles}>Interactive Features Combined</h3>
+      <p className={descriptionStyles}>
+        Current selection: {selectedKeys === 'all' ? 'All' : Array.from(selectedKeys).join(', ') || 'None'}
+      </p>
+      
+      <SelectBoxGroup
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        numColumns={4}
+        gutterWidth="default"
+        onSelectionChange={(selection) => {
+          setSelectedKeys(selection);
+          action('onSelectionChange')(selection);
+        }}>
+        {/* Enabled items with dynamic illustrations */}
+        <SelectBox value="enabled1">
+          {selectedKeys !== 'all' && selectedKeys.has('enabled1') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Enabled Item 1</Text>
+          <Text slot="description">Status updates</Text>
+        </SelectBox>
+        <SelectBox value="enabled2">
+          {selectedKeys !== 'all' && selectedKeys.has('enabled2') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Enabled Item 2</Text>
+          <Text slot="description">Click to toggle</Text>
+        </SelectBox>
+        {/* Disabled item */}
+        <SelectBox value="disabled1" isDisabled>
+          <AlertNotice />
+          <Text slot="label">Disabled Item</Text>
+          <Text slot="description">Cannot select</Text>
+        </SelectBox>
+        <SelectBox value="starred1">
+          {selectedKeys !== 'all' && selectedKeys.has('starred1') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Starred Item 1</Text>
+          <Text slot="description">Click to star</Text>
+        </SelectBox>
+        <SelectBox value="starred2">
+          {selectedKeys !== 'all' && selectedKeys.has('starred2') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Starred Item 2</Text>
+          <Text slot="description">Click to star</Text>
+        </SelectBox>
+        <SelectBox value="disabled2" isDisabled>
+          <Server />
+          <Text slot="label">Disabled Service</Text>
+          <Text slot="description">Cannot select</Text>
+        </SelectBox>
+        <SelectBox value="dynamic1">
+          {selectedKeys !== 'all' && selectedKeys.has('dynamic1') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Dynamic Illustration</Text>
+          <Text slot="description">Click to activate</Text>
+        </SelectBox>
+        <SelectBox value="controllable">
+          {selectedKeys !== 'all' && selectedKeys.has('controllable') ? (
+            <StarFilled1 />
+          ) : (
+            <StarFilled2 />
+          )}
+          <Text slot="label">Controllable</Text>
+          <Text slot="description">External control available</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+      
+      <div style={{marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+        <Button 
+          onPress={() => setSelectedKeys(new Set(['starred1', 'starred2', 'dynamic1']))}
+          variant="secondary">
+          Select Favorites
+        </Button>
+        <Button 
+          onPress={() => setSelectedKeys(new Set())}
+          variant="secondary">
+          Clear All
+        </Button>
+        <Button 
+          onPress={() => setSelectedKeys(new Set(['enabled1', 'enabled2', 'controllable']))}
+          variant="secondary">
+          Select Enabled Only
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export const InteractiveExamples: Story = {
+  render: () => <InteractiveExamplesStory />
+};
+
+export const AllSlotCombinations: Story = {
+  render: () => (
+    <div style={{maxWidth: 1200, padding: 20}}>
+      <h2 className={headingStyles}>All Slot Combinations</h2>
+      
+      {/* Vertical Orientation */}
+      <div style={{marginBottom: 40}}>
+        <h3 className={subheadingStyles}>Vertical Orientation</h3>
+        <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
+          
+          {/* Text Only */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Text Only</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="text-only">
+                <Text slot="label">Simple Text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Text</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="illustration-text">
+                <Server />
+                <Text slot="label">With Illustration</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Text + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="text-desc">
+                <Text slot="label">Main Text</Text>
+                <Text slot="description">Additional description</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="illustration-desc">
+                <PaperAirplane />
+                <Text slot="description">Only description text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="all-vertical">
+                <AlertNotice />
+                <Text slot="label">Full Vertical</Text>
+                <Text slot="description">Complete description</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Horizontal Orientation */}
+      <div>
+        <h3 className={subheadingStyles}>Horizontal Orientation</h3>
+        <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
+          
+          {/* Text Only */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Text Only</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-text-only">
+                <Text slot="label">Simple Horizontal Text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Text</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-illustration-text">
+                <PaperAirplane />
+                <Text slot="label">Horizontal with Illustration</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Text + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-text-desc">
+                <Text slot="label">Main Horizontal Text</Text>
+                <Text slot="description">Horizontal description text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-all">
+                <Server />
+                <Text slot="label">Complete Horizontal</Text>
+                <Text slot="description">Full horizontal layout with all elements</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Comparison Grid */}
+      <div style={{marginTop: 40}}>
+        <h3 className={subheadingStyles}>Side-by-Side Comparison</h3>
+        <SelectBoxGroup 
+          numColumns={5}
+          gutterWidth="spacious"
+          onSelectionChange={action('onSelectionChange')}>
+          
+          {/* Vertical examples */}
+          <SelectBox value="v1">
+            <Text slot="label">V: Text Only</Text>
+          </SelectBox>
+          
+          <SelectBox value="v2">
+            <StarFilled1 />
+            <Text slot="label">V: Illustration + Text</Text>
+          </SelectBox>
+          
+          <SelectBox value="v3">
+            <Text slot="label">V: Text + Desc</Text>
+            <Text slot="description">Vertical description</Text>
+          </SelectBox>
+          
+          <SelectBox value="v4">
+            <PaperAirplane />
+            <Text slot="description">V: Illustration + Desc</Text>
+          </SelectBox>
+          
+          <SelectBox value="v5">
+            <AlertNotice />
+            <Text slot="label">V: All Elements</Text>
+            <Text slot="description">Complete vertical</Text>
+          </SelectBox>
+          
+        </SelectBoxGroup>
+
+        <div style={{marginTop: 20}}>
+          <SelectBoxGroup 
+            orientation="horizontal"
+            numColumns={5}
+            gutterWidth="spacious"
+            onSelectionChange={action('onSelectionChange')}>
+            
+            {/* Horizontal examples */}
+            <SelectBox value="h1">
+              <Text slot="label">H: Text Only</Text>
+            </SelectBox>
+            
+            <SelectBox value="h2">
+              <StarFilled1 />
+              <Text slot="label">H: Illustration + Text</Text>
+            </SelectBox>
+            
+            <SelectBox value="h3">
+              <Text slot="label">H: Text + Description</Text>
+              <Text slot="description">Horizontal description</Text>
+            </SelectBox>
+            
+            <SelectBox value="h4">
+              <Server />
+              <Text slot="description">H: Illustration + Desc</Text>
+            </SelectBox>
+            
+            <SelectBox value="h5">
+              <PaperAirplane />
+              <Text slot="label">H: All Elements</Text>
+              <Text slot="description">Complete horizontal layout</Text>
+            </SelectBox>
+            
+          </SelectBoxGroup>
+        </div>
+      </div>
+
+    </div>
+  )
+};
+
+export const TextSlots: Story = {
+  args: {
+    orientation: 'horizontal'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <h3 className={subheadingStyles}>Text Slots Example</h3>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
+          <Text slot="description">Reliable cloud infrastructure</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
+          <Text slot="description">Enterprise cloud solutions</Text>
+        </SelectBox>
+        <SelectBox value="gcp">
+          <PaperAirplane />
+          <Text slot="label">Google Cloud Platform</Text>
+          <Text slot="description">Modern cloud services</Text>
+        </SelectBox>
+        <SelectBox value="oracle">
+          <Server />
+          <Text slot="label">Oracle Cloud</Text>
+          <Text slot="description">Database-focused cloud</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const WithDescription: Story = {
+  args: {
+    orientation: 'horizontal'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <h3 className={subheadingStyles}>With Description</h3>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server />
+          <Text slot="description">Reliable cloud infrastructure</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
new file mode 100644
index 00000000000..8100384d039
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -0,0 +1,787 @@
+import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal';
+import Calendar from '../spectrum-illustrations/linear/Calendar';
+import React from 'react';
+import {SelectBox, SelectBoxGroup, Text} from '../src';
+import {Selection} from '@react-types/shared';
+import userEvent from '@testing-library/user-event';
+
+function SingleSelectBox() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+  return (
+    <SelectBoxGroup
+      aria-label="Single selection test"
+      selectionMode="single"
+      onSelectionChange={setSelectedKeys}
+      selectedKeys={selectedKeys}>
+      <SelectBox value="option1">
+        <Text slot="label">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="label">Option 2</Text>
+      </SelectBox>
+      <SelectBox value="option3">
+        <Text slot="label">Option 3</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+function MultiSelectBox() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+  return (
+    <SelectBoxGroup
+      aria-label="Multi selection test"
+      selectionMode="multiple"
+      onSelectionChange={setSelectedKeys}
+      selectedKeys={selectedKeys}>
+      <SelectBox value="option1">
+        <Text slot="label">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="label">Option 2</Text>
+      </SelectBox>
+      <SelectBox value="option3">
+        <Text slot="label">Option 3</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+function DisabledSelectBox() {
+  return (
+    <SelectBoxGroup
+      aria-label="Disabled test"
+      selectionMode="single"
+      onSelectionChange={() => {}}
+      selectedKeys={new Set()}
+      isDisabled>
+      <SelectBox value="option1">
+        <Text slot="label">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="label">Option 2</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+describe('SelectBoxGroup', () => {
+  describe('Basic functionality', () => {
+    it('renders as a listbox with options', () => {
+      render(<SingleSelectBox />);
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('renders multiple selection mode', () => {
+      render(<MultiSelectBox />);
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('handles selection in single mode', async () => {
+      render(<SingleSelectBox />);
+      const options = screen.getAllByRole('option');
+      const option1 = options.find(option => option.textContent?.includes('Option 1'))!;
+      
+      await userEvent.click(option1);
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('handles multiple selection', async () => {
+      render(<MultiSelectBox />);
+      const options = screen.getAllByRole('option');
+      const option1 = options.find(option => option.textContent?.includes('Option 1'))!;
+      const option2 = options.find(option => option.textContent?.includes('Option 2'))!;
+      
+      await userEvent.click(option1);
+      await userEvent.click(option2);
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('handles disabled state', () => {
+      render(<DisabledSelectBox />);
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toBeInTheDocument();
+      
+      const options = screen.getAllByRole('option');
+      expect(options.length).toBeGreaterThan(0);
+    });
+
+    it('prevents interaction when group is disabled', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Group disabled test"
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}
+          isDisabled>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      await userEvent.click(option1);
+      await userEvent.click(option2);
+      
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      
+      // Items should have disabled attributes
+      expect(option1).toHaveAttribute('aria-disabled', 'true');
+      expect(option2).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  describe('Checkbox functionality', () => {
+    it('shows checkbox when showCheckbox=true and item is selected', async () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Checkbox test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set(['option1'])}
+          showCheckbox>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
+      expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+      
+      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).toBeInTheDocument();
+    });
+
+    it('shows checkbox on hover when showCheckbox=true for non-disabled items', async () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Hover checkbox test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          showCheckbox>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('option', {name: 'Option 1'});
+      
+      await userEvent.hover(row);
+      await waitFor(() => {
+        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+        expect(checkboxDiv).toBeInTheDocument();
+      });
+    });
+
+    it('does not show checkbox when showCheckbox=false', async () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="No checkbox test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set(['option1'])}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('option', {name: 'Option 1'});
+      
+      const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).not.toBeInTheDocument();
+    });
+
+    it('shows checkbox for disabled but selected items when showCheckbox=true', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Disabled selected checkbox test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          defaultSelectedKeys={new Set(['option1'])}
+          showCheckbox>
+          <SelectBox value="option1" isDisabled>
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('option', {name: 'Option 1'});
+      
+      const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).toBeInTheDocument();
+    });
+
+    it('does not show checkbox on hover for disabled items', async () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Disabled hover test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          showCheckbox>
+          <SelectBox value="option1" isDisabled>
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('option', {name: 'Option 1'});
+      
+      await userEvent.hover(row);
+      
+      await waitFor(() => {
+        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+        expect(checkboxDiv).not.toBeInTheDocument();
+      }, {timeout: 1000});
+    });
+  });
+
+  describe('Props and configuration', () => {
+    it('supports different orientations', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Horizontal test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          orientation="horizontal">
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+
+    it('supports different gutter widths', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Gutter width test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          gutterWidth="compact">
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+
+    it('supports custom number of columns', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Columns test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          numColumns={3}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="label">Option 3</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toHaveStyle('grid-template-columns: repeat(3, 1fr)');
+    });
+  });
+
+  describe('Controlled behavior', () => {
+    it('handles initial value selection', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Initial selection test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set(['option1'])}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('handles multiple selection with initial values', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Multiple initial selection test"
+          selectionMode="multiple" 
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1', 'option2'])}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="label">Option 3</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      const option3 = screen.getByRole('option', {name: 'Option 3'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+      expect(option3).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('calls onSelectionChange when selection changes', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Selection change test"
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
+
+    it('calls onSelectionChange with Set for multiple selection', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Multiple selection change test"
+          selectionMode="multiple"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
+
+    it('handles controlled component updates', async () => {
+      function ControlledTest() {
+        const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+        
+        return (
+          <div>
+            <button onClick={() => setSelectedKeys(new Set(['option2']))}>
+              Select Option 2
+            </button>
+            <SelectBoxGroup 
+              aria-label="Controlled test"
+              selectionMode="single" 
+              onSelectionChange={setSelectedKeys} 
+              selectedKeys={selectedKeys}>
+              <SelectBox value="option1">
+                <Text slot="label">Option 1</Text>
+              </SelectBox>
+              <SelectBox value="option2">
+                <Text slot="label">Option 2</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+        );
+      }
+
+      render(<ControlledTest />);
+      
+      const button = screen.getByRole('button', {name: 'Select Option 2'});
+      await userEvent.click(button);
+      
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('handles "all" selection', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="All selection test"
+          selectionMode="multiple" 
+          onSelectionChange={() => {}} 
+          selectedKeys="all">
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  describe('Individual SelectBox behavior', () => {
+    it('handles disabled individual items', () => {
+      render(
+        <SelectBoxGroup
+          aria-label="Individual disabled test"
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1" isDisabled>
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const rows = screen.getAllByRole('option');
+      expect(rows.length).toBe(2);
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      expect(option1).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('prevents interaction with disabled items', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Disabled interaction test"
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1" isDisabled>
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Grid navigation', () => {
+    it('supports keyboard navigation and grid layout', async () => {
+      render(
+        <SelectBoxGroup
+          aria-label="Grid navigation test"
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set()}
+          numColumns={2}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="label">Option 3</Text>
+          </SelectBox>
+          <SelectBox value="option4">
+            <Text slot="label">Option 4</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      const options = screen.getAllByRole('option');
+      
+      expect(listbox).toBeInTheDocument();
+      expect(options).toHaveLength(4);
+      
+      expect(listbox).toHaveStyle('grid-template-columns: repeat(2, 1fr)');
+      
+      expect(screen.getByRole('option', {name: 'Option 1'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 2'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 3'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 4'})).toBeInTheDocument();
+    });
+
+    it('supports space key selection', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Space key test"
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      await act(async () => {
+        listbox.focus();
+      });
+      
+      await act(async () => {
+        await userEvent.keyboard(' ');
+      });
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
+
+    it('supports arrow key navigation', async () => {
+      render(
+        <SelectBoxGroup
+          aria-label="Arrow key test"
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      await act(async () => {
+        listbox.focus();
+      });
+      
+      // Navigate to second option
+      await userEvent.keyboard('{ArrowDown}');
+      
+      // Check that navigation works by verifying an option has focus
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      expect(option1).toHaveFocus();
+    });
+  });
+
+  describe('Children validation', () => {
+    let consoleSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleSpy.mockRestore();
+    });
+
+    it('does not warn with valid number of children', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Valid children test" 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(console.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper listbox structure', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Accessibility test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(2);
+    });
+
+    it('supports aria-label and aria-labelledby', () => {
+      render(
+        <div>
+          <h2 id="test-label">My SelectBoxGroup</h2>
+          <SelectBoxGroup 
+            aria-labelledby="test-label"
+            selectionMode="single" 
+            onSelectionChange={() => {}} 
+            selectedKeys={new Set()}>
+            <SelectBox value="option1">
+              <Text slot="label">Option 1</Text>
+            </SelectBox>
+          </SelectBoxGroup>
+        </div>
+      );
+      
+      const listbox = screen.getByRole('listbox');
+      // Just verify the listbox has an aria-labelledby attribute  
+      expect(listbox).toHaveAttribute('aria-labelledby');
+      expect(listbox.getAttribute('aria-labelledby')).toBeTruthy();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles complex children with slots', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Complex children test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          orientation="horizontal">
+          <SelectBox value="option1">
+            <Calendar slot="illustration" />
+            <Text slot="label">Complex Option</Text>
+            <Text slot="description">With description</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByText('Complex Option')).toBeInTheDocument();
+      expect(screen.getByText('With description')).toBeInTheDocument();
+    });
+
+    it('handles different value types', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Value types test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option1).toBeInTheDocument();
+      expect(option2).toBeInTheDocument();
+    });
+
+    it('handles empty children gracefully', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Empty children test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
+          {null}
+          {undefined}
+          <SelectBox value="option1">
+            <Text slot="label">Valid Option</Text>
+          </SelectBox>
+          {false}
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(1);
+      expect(screen.getByText('Valid Option')).toBeInTheDocument();
+    });
+
+    it('handles uncontrolled selection with defaultSelectedKeys', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup 
+          aria-label="Uncontrolled test"
+          selectionMode="single" 
+          onSelectionChange={onSelectionChange}
+          defaultSelectedKeys={new Set(['option1'])}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'false');
+      
+      await userEvent.click(option2);
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option2']);
+    });
+  });
+});
+
+