diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
new file mode 100644
index 00000000000..de1b3f1a496
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -0,0 +1,306 @@
+/*
+ * 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 {Checkbox} from './Checkbox';
+import {FocusableRef} from '@react-types/shared';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {SelectBoxContext} from './SelectBoxGroup';
+import {style} from '../style' with {type: 'macro'};
+import {useFocusableRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+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
+}
+
+export const SelectBoxItemContext = createContext<any>(null);
+
+const selectBoxStyles = style({
+  display: 'flex',
+  flexDirection: {
+    default: 'column',
+    orientation: {
+      horizontal: 'row'
+    }
+  },
+  lineHeight: 'title',
+  justifyContent: 'center',
+  flexShrink: 0,
+  alignItems: 'center',
+  font: 'ui',
+  width: {
+    default: {
+      size: {
+        S: 128,
+        M: 136,
+        L: 160,
+        XL: 192
+      }
+    },
+    orientation: {
+      horizontal: 'auto'
+    }
+  },
+  height: {
+    default: {
+      size: {
+        S: 128,
+        M: 136,
+        L: 160,
+        XL: 192
+      }
+    },
+    orientation: {
+      horizontal: 'auto'
+    }
+  },
+  minWidth: {
+    orientation: {
+      horizontal: 160
+    }
+  },
+  maxWidth: {
+    orientation: {
+      horizontal: 272
+    }
+  },
+  padding: {
+    size: {
+      S: 16,
+      M: 20,
+      L: 24,
+      XL: 28
+    }
+  },
+  borderRadius: 'lg',
+  backgroundColor: {
+    default: 'layer-2',
+    isSelected: 'layer-2',
+    isDisabled: 'layer-1'
+  },
+  color: {
+    isEmphasized: 'gray-900',
+    isDisabled: 'disabled'
+  },
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isSelected: 'elevated',
+    forcedColors: 'none',
+    isDisabled: 'emphasized'
+  },
+  outlineStyle: 'none',
+  position: 'relative',
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isFocusVisible: 'blue-900',
+    isDisabled: 'transparent'
+  },
+  transition: 'default',
+  gap: {
+    orientation: {
+      horizontal: 'text-to-visual'
+    }
+  },
+  cursor: {
+    default: 'pointer',
+    isDisabled: 'default'
+  }
+}, getAllowedOverrides());
+
+const contentContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  justifyContent: 'center',
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  flex: {
+    orientation: {
+      horizontal: 1
+    }
+  }
+}, getAllowedOverrides());
+
+const iconContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  size: {
+    XS: 16,
+    S: 20,
+    M: 24,
+    L: 28,
+    XL: 32
+  },
+  flexShrink: 0,
+  color: {
+    isDisabled: 'disabled'
+  },
+  opacity: {
+    isDisabled: 0.4
+  }
+});
+
+const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  gap: 'text-to-visual',
+  color: {
+    isDisabled: 'disabled'
+  }
+}, getAllowedOverrides());
+
+const descriptionText = style({
+  display: {
+    default: 'none',
+    orientation: {
+      horizontal: 'block'
+    }
+  },
+  font: 'ui-sm',
+  color: {
+    default: 'gray-600',
+    isDisabled: 'disabled'
+  },
+  lineHeight: 'body'
+});
+
+
+const SelectBoxRenderPropsContext = createContext<{
+  isHovered?: boolean,
+  isFocusVisible?: boolean,
+  isPressed?: boolean
+}>({});
+
+/**
+ * SelectBox components allow users to select options from a list.
+ * Works as content within a GridListItem for automatic grid navigation.
+ */
+export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxItemContext);
+  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;
+  let divRef = useRef<HTMLDivElement | null>(null);
+  let domRef = useFocusableRef(ref, divRef);
+  
+  let contextValue = useContext(SelectBoxContext);
+  let {
+    size = 'M',
+    orientation = 'vertical',
+    selectedKeys,
+    isDisabled: groupDisabled = false
+  } = contextValue;
+
+  let renderProps = useContext(SelectBoxRenderPropsContext);
+
+  const isDisabled = individualDisabled || groupDisabled;
+  const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
+  const showCheckbox = isSelected || (!isDisabled && renderProps.isHovered);
+  
+  return (
+    <div
+      ref={domRef}
+      className={selectBoxStyles({
+        size, 
+        orientation, 
+        isDisabled,
+        isSelected,
+        isHovered: renderProps.isHovered || false,
+        isFocusVisible: renderProps.isFocusVisible || false
+      }, props.styles)}
+      style={UNSAFE_style}>
+      
+      {showCheckbox && (
+        <div 
+          className={style({
+            position: 'absolute',
+            top: 16,
+            left: 16
+          })}>
+          <Checkbox 
+            isSelected={isSelected}
+            isDisabled={isDisabled}
+            size={size}
+            isReadOnly />
+        </div>
+      )}
+      {orientation === 'horizontal' ? (
+        <>
+          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+            <div className={iconContainer({size, orientation, isDisabled})}>
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+            </div>
+          )}
+          
+          <div className={contentContainer({size, orientation}, props.styles)}>
+            <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
+              
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description') && (
+                <div className={descriptionText({size, orientation, isDisabled})}>
+                  {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description')}
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+            <div className={iconContainer({size, orientation, isDisabled})}>
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+            </div>
+          )}
+          
+          <div className={textContainer({size, orientation, isDisabled})}>
+            {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
+          </div>
+        </>
+      )}
+      
+      {React.Children.toArray(children).filter((child: any) => 
+        !['icon', 'text', 'description'].includes(child?.props?.slot)
+      )}
+    </div>
+  );
+});
+
+export {SelectBoxRenderPropsContext};
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
new file mode 100644
index 00000000000..efc5346ac45
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -0,0 +1,405 @@
+/*
+ * 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 {
+  ContextValue,
+  GridList,
+  GridListItem,
+  Text
+} from 'react-aria-components';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, Selection, SpectrumLabelableProps} from '@react-types/shared';
+import {FieldLabel} from './Field';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, useId, useMemo} from 'react';
+import {SelectBoxRenderPropsContext} from './SelectBox';
+import {style} from '../style' with {type: 'macro'};
+import {useControlledState} from '@react-stately/utils';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export type SelectBoxValueType = string | string[];
+
+export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps, HelpTextProps {
+  /**
+   * The SelectBox elements contained within the SelectBoxGroup.
+   */
+  children: ReactNode,
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange: (val: SelectBoxValueType) => void,
+  /**
+   * The selection mode for the SelectBoxGroup.
+   * @default 'single'
+   */
+  selectionMode?: 'single' | 'multiple',
+  /**
+   * The current selected value (controlled).
+   */
+  value?: SelectBoxValueType,
+  /**
+   * The default selected value.
+   */
+  defaultValue?: SelectBoxValueType,
+  /**
+   * The size of the SelectBoxGroup.
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The axis the SelectBox elements should align with.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
+  /**
+   * 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 required.
+   */
+  isRequired?: boolean,
+  /**
+   * Whether the SelectBoxGroup is disabled.
+   */
+  isDisabled?: boolean,
+  /**
+   * The name of the form field.
+   */
+  name?: string,
+  /**
+   * The error message to display when validation fails.
+   */
+  errorMessage?: ReactNode,
+  /**
+   * Whether the SelectBoxGroup is in an invalid state.
+   */
+  isInvalid?: boolean,
+  /**
+   * Contextual help text for the SelectBoxGroup.
+   */
+  contextualHelp?: ReactNode
+}
+
+interface SelectBoxContextValue {
+  allowMultiSelect?: boolean,
+  size?: 'S' | 'M' | 'L' | 'XL',
+  orientation?: Orientation,
+  isDisabled?: boolean,
+  selectedKeys?: Selection,
+  onSelectionChange?: (keys: Selection) => void
+}
+
+const convertValueToSelection = (value: SelectBoxValueType | undefined, selectionMode: 'single' | 'multiple'): Selection => {
+  if (value === undefined) {
+    return selectionMode === 'multiple' ? new Set() : new Set();
+  }
+  
+  if (Array.isArray(value)) {
+    return new Set(value);
+  }
+  
+  return selectionMode === 'multiple' ? new Set([value]) : new Set([value]);
+};
+
+const convertSelectionToValue = (selection: Selection, selectionMode: 'single' | 'multiple'): SelectBoxValueType => {
+  if (selection === 'all') {
+    return selectionMode === 'multiple' ? [] : '';
+  }
+  
+  const keys = Array.from(selection).map(key => String(key));
+  
+  if (selectionMode === 'multiple') {
+    return keys;
+  }
+  
+  return keys[0] || '';
+};
+
+export const SelectBoxContext = createContext<SelectBoxContextValue>({
+  size: 'M',
+  orientation: 'vertical'
+});
+
+export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+
+const gridStyles = style({
+  display: 'grid',
+  gridAutoRows: '1fr',
+  gap: {
+    gutterWidth: {
+      default: 16,
+      compact: 8,
+      spacious: 24
+    }
+  },
+  '&[role="grid"]': {
+    display: 'grid'
+  }
+}, getAllowedOverrides());
+
+const containerStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
+}, getAllowedOverrides());
+
+const errorMessageStyles = style({
+  color: 'negative',
+  font: 'ui-sm'
+}, getAllowedOverrides());
+
+interface FormIntegrationProps {
+  name?: string,
+  value: SelectBoxValueType,
+  isRequired?: boolean,
+  isInvalid?: boolean
+}
+
+function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationProps) {
+  if (!name) {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <>
+        {value.map((val, index) => (
+          <input
+            key={index}
+            type="hidden"
+            name={name}
+            value={val}
+            required={isRequired && index === 0}
+            aria-invalid={isInvalid} />
+        ))}
+        {value.length === 0 && isRequired && (
+          <input
+            type="hidden"
+            name={name}
+            value=""
+            required
+            aria-invalid={isInvalid} />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <input
+      type="hidden"
+      name={name}
+      value={value || ''}
+      required={isRequired}
+      aria-invalid={isInvalid} />
+  );
+}
+
+/**
+ * SelectBox groups allow users to select one or more options from a list.
+ * All possible options are exposed up front for users to compare.
+ * Built with GridList for automatic grid-based keyboard navigation.
+ */
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
+  
+  let {
+    label,
+    contextualHelp,
+    children,
+    onSelectionChange,
+    defaultValue,
+    selectionMode = 'single',
+    size = 'M',
+    orientation = 'vertical',
+    numColumns = 2,
+    gutterWidth = 'default',
+    isRequired = false,
+    isDisabled = false,
+    name,
+    errorMessage,
+    isInvalid = false,
+    UNSAFE_style
+  } = props;
+
+  const domRef = useDOMRef(ref);
+  const gridId = useId();
+  const errorId = useId();
+
+  const [selectedKeys, setSelectedKeys] = useControlledState(
+    props.value !== undefined ? convertValueToSelection(props.value, selectionMode) : undefined,
+    convertValueToSelection(defaultValue, selectionMode),
+    (selection) => {
+      const value = convertSelectionToValue(selection, selectionMode);
+
+      onSelectionChange(value);
+    }
+  );
+
+
+  const validationErrors = useMemo(() => {
+    const errors: string[] = [];
+    
+    const selectionSize = selectedKeys === 'all' ? 1 : selectedKeys.size;
+    if (isRequired && selectionSize === 0) {
+      errors.push('Selection is required');
+    }
+    
+    return errors;
+  }, [isRequired, selectedKeys]);
+
+  const hasValidationErrors = isInvalid || validationErrors.length > 0;
+
+  const childrenArray = React.Children.toArray(children).filter((x) => x);
+  
+  const disabledKeys = useMemo(() => {
+    if (isDisabled) {
+      return 'all';
+    }
+    
+    const disabled = new Set<string>();
+    childrenArray.forEach((child, index) => {
+      if (React.isValidElement(child)) {
+        const childElement = child as ReactElement<{value?: string, isDisabled?: boolean}>;
+        const childValue = childElement.props?.value || String(index);
+        if (childElement.props?.isDisabled) {
+          disabled.add(childValue);
+        }
+      }
+    });
+    
+    return disabled.size > 0 ? disabled : undefined;
+  }, [isDisabled, childrenArray]);
+  
+  useEffect(() => {
+    if (childrenArray.length <= 0) {
+      console.error('Invalid content. SelectBox must have at least one item.');
+    }
+    if (childrenArray.length > 9) {
+      console.error('Invalid content. SelectBox cannot have more than 9 children.');
+    }
+  }, [childrenArray.length]);
+
+  const selectBoxContextValue = useMemo(
+    () => {
+      const contextValue = {
+        allowMultiSelect: selectionMode === 'multiple',
+        size,
+        orientation,
+        isDisabled,
+        selectedKeys,
+        onSelectionChange: setSelectedKeys
+      };
+      return contextValue;
+    },
+    [selectionMode, size, orientation, isDisabled, selectedKeys, setSelectedKeys]
+  );
+
+  const currentValue = convertSelectionToValue(selectedKeys, selectionMode);
+
+  return (
+    <div
+      className={containerStyles(null, props.styles)}
+      style={UNSAFE_style}
+      ref={domRef}>
+      
+      <FormIntegration
+        name={name}
+        value={currentValue}
+        isRequired={isRequired}
+        isInvalid={hasValidationErrors} />
+      
+      {label && (
+        <FieldLabel
+          id={`${gridId}-label`}
+          isRequired={isRequired}
+          contextualHelp={contextualHelp}>
+          {label}
+        </FieldLabel>
+      )}
+      
+      <GridList
+        layout="grid"
+        selectionMode={selectionMode}
+        selectedKeys={selectedKeys}
+        onSelectionChange={isDisabled ? () => {} : setSelectedKeys}
+        disabledKeys={disabledKeys}
+        aria-labelledby={label ? `${gridId}-label` : undefined}
+        aria-describedby={hasValidationErrors && errorMessage ? errorId : undefined}
+        aria-invalid={hasValidationErrors}
+        aria-required={isRequired}
+        className={gridStyles({gutterWidth, orientation}, props.styles)}
+        style={{
+          gridTemplateColumns: `repeat(${numColumns}, 1fr)`
+        }}>
+        
+        {childrenArray.map((child, index) => {
+          if (!React.isValidElement(child)) {return null;}
+          
+          const childElement = child as ReactElement<{value?: string}>;
+          const childValue = childElement.props?.value || String(index);
+          
+          const getTextValue = (element: ReactElement): string => {
+            const elementProps = (element as any).props;
+            const children = React.Children.toArray(elementProps.children) as ReactElement[];
+            const textSlot = children.find((child: any) => 
+              React.isValidElement(child) && (child as any).props?.slot === 'text'
+            );
+            
+            if (React.isValidElement(textSlot)) {
+              return String((textSlot as any).props.children || '');
+            }
+            
+            const textContent = children
+              .filter((child: any) => typeof child === 'string')
+              .join(' ');
+            
+            return textContent || childValue;
+          };
+          
+          const textValue = getTextValue(childElement);
+          
+          return (
+            <GridListItem key={childValue} id={childValue} textValue={textValue} className={style({outlineStyle: 'none'})}>
+              {(renderProps) => (
+                <SelectBoxContext.Provider value={selectBoxContextValue}>
+                  <SelectBoxRenderPropsContext.Provider 
+                    value={{
+                      isHovered: renderProps.isHovered,
+                      isFocusVisible: renderProps.isFocusVisible,
+                      isPressed: renderProps.isPressed
+                    }}>
+                    {child}
+                  </SelectBoxRenderPropsContext.Provider>
+                </SelectBoxContext.Provider>
+              )}
+            </GridListItem>
+          );
+        })}
+      </GridList>
+      
+      {hasValidationErrors && errorMessage && (
+        <Text
+          slot="errorMessage"
+          id={errorId}
+          className={errorMessageStyles(null, props.styles)}>
+          {errorMessage}
+        </Text>
+      )}
+    </div>
+  );
+});
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index ab01656ff77..efa16c2fe0a 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -72,6 +72,8 @@ export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
+export {SelectBox} from './SelectBox';
+export {SelectBoxGroup, SelectBoxContext} from './SelectBoxGroup';
 export {Slider, SliderContext} from './Slider';
 export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
@@ -148,6 +150,8 @@ export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
+export type {SelectBoxProps} from './SelectBox';
+export type {SelectBoxGroupProps, SelectBoxValueType} 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..af6603067ec
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -0,0 +1,415 @@
+/*************************************************************************
+ * 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, createIcon, 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 Server from '../spectrum-illustrations/linear/Server';
+import StarFilledSVG from '../s2wf-icons/S2_Icon_StarFilled_20_N.svg';
+import StarSVG from '../s2wf-icons/S2_Icon_Star_20_N.svg';
+
+const StarIcon = createIcon(StarSVG);
+const StarFilledIcon = createIcon(StarFilledSVG);
+
+const meta: Meta<typeof SelectBoxGroup> = {
+  title: 'SelectBoxGroup',
+  component: SelectBoxGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['single', 'multiple']
+    },
+    size: {
+      control: 'select',
+      options: ['S', 'M', 'L', 'XL']
+    },
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal']
+    },
+    numColumns: {
+      control: {type: 'number', min: 1, max: 4}
+    },
+    gutterWidth: {
+      control: 'select',
+      options: ['compact', 'default', 'spacious']
+    }
+  },
+  args: {
+    selectionMode: 'single',
+    size: 'M',
+    orientation: 'vertical',
+    numColumns: 2,
+    gutterWidth: 'default',
+    isRequired: false,
+    isDisabled: false
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic Stories
+export const Default: Story = {
+  args: {
+    label: 'Choose your cloud service'
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="aws">
+        <Server slot="icon" />
+        <Text slot="text">Amazon Web Services</Text>
+        <Text slot="description">Reliable cloud infrastructure</Text>
+      </SelectBox>
+      <SelectBox value="azure">
+        <AlertNotice slot="icon" />
+        <Text slot="text">Microsoft Azure</Text>
+        <Text slot="description">Enterprise cloud solutions</Text>
+      </SelectBox>
+      <SelectBox value="gcp">
+        <Paperairplane slot="icon" />
+        <Text slot="text">Google Cloud Platform</Text>
+        <Text slot="description">Modern cloud services</Text>
+      </SelectBox>
+      <SelectBox value="oracle">
+        <Server slot="icon" />
+        <Text slot="text">Oracle Cloud</Text>
+        <Text slot="description">Database-focused cloud</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+export const MultipleSelection: Story = {
+  args: {
+    selectionMode: 'multiple',
+    label: 'Select your preferred services',
+    defaultValue: ['aws', 'gcp'],
+    necessityIndicator: 'icon'
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="aws">
+        <Server slot="icon" />
+        <Text slot="text">Amazon Web Services</Text>
+      </SelectBox>
+      <SelectBox value="azure">
+        <AlertNotice slot="icon" />
+        <Text slot="text">Microsoft Azure</Text>
+      </SelectBox>
+      <SelectBox value="gcp">
+        <Paperairplane slot="icon" />
+        <Text slot="text">Google Cloud Platform</Text>
+      </SelectBox>
+      <SelectBox value="oracle">
+        <Server slot="icon" />
+        <Text slot="text">Oracle Cloud</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+// Grid Navigation Testing
+export const GridNavigation: Story = {
+  args: {
+    label: 'Test Grid Navigation',
+    numColumns: 3
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        Focus any item (best done by clicking to the side of the group and hitting the tab key) and using arrow keys to navigate:
+      </p>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="1">
+          <Text slot="text">Item 1</Text>
+        </SelectBox>
+        <SelectBox value="2">
+          <Text slot="text">Item 2</Text>
+        </SelectBox>
+        <SelectBox value="3">
+          <Text slot="text">Item 3</Text>
+        </SelectBox>
+        <SelectBox value="4">
+          <Text slot="text">Item 4</Text>
+        </SelectBox>
+        <SelectBox value="5">
+          <Text slot="text">Item 5</Text>
+        </SelectBox>
+        <SelectBox value="6">
+          <Text slot="text">Item 6</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const FormValidation: Story = {
+  args: {
+    label: 'Required Selection',
+    isRequired: true,
+    errorMessage: 'Please select at least one option',
+    isInvalid: true
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="option1">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+// Size Variations
+export const SizeVariations: Story = {
+  render: () => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
+      {(['S', 'M', 'L', 'XL'] as const).map((size) => (
+        <SelectBoxGroup
+          key={size}
+          size={size}
+          label={`Size ${size}`}
+          onSelectionChange={action(`onSelectionChange-${size}`)}>
+          <SelectBox value="option1">
+            <Server slot="icon" />
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <AlertNotice slot="icon" />
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      ))}
+    </div>
+  )
+};
+
+// Horizontal Orientation
+export const HorizontalOrientation: Story = {
+  args: {
+    orientation: 'horizontal',
+    label: 'Favorite cities',
+    numColumns: 1
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="paris">
+        <Text slot="text">Paris</Text>
+        <Text slot="description">France</Text>
+      </SelectBox>
+      <SelectBox value="rome">
+        <Text slot="text">Rome</Text>
+        <Text slot="description">Italy</Text>
+      </SelectBox>
+      <SelectBox value="tokyo">
+        <Text slot="text">Tokyo</Text>
+        <Text slot="description">Japan</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+// Disabled States
+export const DisabledGroup: Story = {
+  args: {
+    label: 'Disabled Group',
+    isDisabled: true,
+    defaultValue: 'option1'
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="option1">
+        <Server slot="icon" />
+        <Text slot="text">Selected then Disabled</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <AlertNotice slot="icon" />
+        <Text slot="text">Disabled</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+export const IndividualDisabled: Story = {
+  args: {
+    label: 'Some items disabled',
+    defaultValue: 'option2'
+  },
+  render: (args) => (
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+      <SelectBox value="option1" isDisabled>
+        <Text slot="text">Option 1 (Disabled)</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
+      <SelectBox value="option3" isDisabled>
+        <Text slot="text">Option 3 (Disabled)</Text>
+      </SelectBox>
+      <SelectBox value="option4">
+        <Text slot="text">Option 4</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  )
+};
+
+function ControlledStory() {
+  const [value, setValue] = useState('option2');
+
+  return (
+    <div>
+      <p>Current value: {value}</p>
+      <SelectBoxGroup
+        label="Controlled SelectBoxGroup"
+        value={value}
+        onSelectionChange={(val) => setValue(val as string)}>
+        <SelectBox value="option1">
+          <Text slot="text">Option 1</Text>
+        </SelectBox>
+        <SelectBox value="option2">
+          <Text slot="text">Option 2</Text>
+        </SelectBox>
+        <SelectBox value="option3">
+          <Text slot="text">Option 3</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+      <button
+        onClick={() => setValue('option1')}
+        style={{marginTop: 16, marginRight: 8}}>
+        Set to Option 1
+      </button>
+      <button onClick={() => setValue('option3')}>Set to Option 3</button>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledStory />
+};
+
+function DynamicIconsStory() {
+  const [selectedValues, setSelectedValues] = useState<Set<string>>(
+    new Set()
+  );
+
+  return (
+    <SelectBoxGroup
+      label="Rate these items"
+      selectionMode="multiple"
+      onSelectionChange={(val) => {
+        const values = Array.isArray(val) ? val : [val];
+        setSelectedValues(new Set(values));
+        action('onSelectionChange')(val);
+      }}>
+      {['item1', 'item2', 'item3', 'item4'].map((value) => (
+        <SelectBox key={value} value={value}>
+          {selectedValues.has(value) ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <StarIcon slot="icon" />
+          )}
+          <Text slot="text">Item {value.slice(-1)}</Text>
+        </SelectBox>
+      ))}
+    </SelectBoxGroup>
+  );
+}
+
+export const DynamicIcons: Story = {
+  render: () => <DynamicIconsStory />
+};
+
+export const MultipleColumns: Story = {
+  args: {
+    label: 'Choose options',
+    numColumns: 4,
+    gutterWidth: 'spacious'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 800}}>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        {Array.from({length: 8}, (_, i) => (
+          <SelectBox key={i} value={`option${i + 1}`}>
+            <Text slot="text">Option {i + 1}</Text>
+          </SelectBox>
+        ))}
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+function FormSubmissionExample() {
+  const [selectedValues, setSelectedValues] = useState<string[]>(['newsletter']);
+  const [submittedData, setSubmittedData] = useState<string[] | null>(null);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const preferences = formData.getAll('preferences') as string[];
+    setSubmittedData(preferences);
+    action('form-submitted')(preferences);
+  };
+
+  return (
+    <div style={{maxWidth: 400}}>
+      <form onSubmit={handleSubmit}>
+        <SelectBoxGroup
+          selectionMode="multiple"
+          value={selectedValues}
+          onSelectionChange={(val) => setSelectedValues(val as string[])}
+          name="preferences"
+          label="Email Preferences"
+          isRequired>
+          <SelectBox value="newsletter">
+            <Text slot="text">Newsletter</Text>
+          </SelectBox>
+          <SelectBox value="marketing">
+            <Text slot="text">Marketing Updates</Text>
+          </SelectBox>
+          <SelectBox value="product">
+            <Text slot="text">Product News</Text>
+          </SelectBox>
+          <SelectBox value="security">
+            <Text slot="text">Security Alerts</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+        
+        <Button type="submit" variant="accent" >
+          Save Preferences
+        </Button>
+      </form>
+      
+      {submittedData && (
+        <Text>Submitted: {submittedData.join(', ')}</Text>
+      )}
+    </div>
+  );
+}
+
+export const FormSubmission: Story = {
+  render: () => <FormSubmissionExample />
+};
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..66451d74b8c
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -0,0 +1,744 @@
+import {act, render, screen, waitFor} from '@testing-library/react';
+import {Button, Text} from '../src';
+import React from 'react';
+import {SelectBox} from '../src/SelectBox';
+import {SelectBoxGroup} from '../src/SelectBoxGroup';
+import userEvent from '@testing-library/user-event';
+
+function SingleSelectBox() {
+  const [value, setValue] = React.useState('');
+  return (
+    <SelectBoxGroup
+      selectionMode="single"
+      onSelectionChange={(val) => setValue(val as string)}
+      value={value}
+      label="Single select test">
+      <SelectBox value="option1">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
+      <SelectBox value="option3">
+        <Text slot="text">Option 3</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+function MultiSelectBox() {
+  const [value, setValue] = React.useState<string[]>([]);
+  return (
+    <SelectBoxGroup
+      selectionMode="multiple"
+      onSelectionChange={(val) => setValue(val as string[])}
+      value={value}
+      label="Multi select test">
+      <SelectBox value="option1">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
+      <SelectBox value="option3">
+        <Text slot="text">Option 3</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+function DisabledSelectBox() {
+  return (
+    <SelectBoxGroup
+      selectionMode="single"
+      onSelectionChange={() => {}}
+      value=""
+      isDisabled
+      label="Disabled select test">
+      <SelectBox value="option1">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+describe('SelectBoxGroup', () => {
+  describe('Basic functionality', () => {
+    it('renders as a grid with rows', () => {
+      render(<SingleSelectBox />);
+      expect(screen.getByRole('grid', {name: 'Single select test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('row')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('renders multiple selection mode', () => {
+      render(<MultiSelectBox />);
+      expect(screen.getByRole('grid', {name: 'Multi select test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('row')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('handles selection in single mode', async () => {
+      render(<SingleSelectBox />);
+      const rows = screen.getAllByRole('row');
+      const option1 = rows.find(row => row.textContent?.includes('Option 1'))!;
+      
+      await userEvent.click(option1);
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('handles multiple selection', async () => {
+      render(<MultiSelectBox />);
+      const rows = screen.getAllByRole('row');
+      const option1 = rows.find(row => row.textContent?.includes('Option 1'))!;
+      const option2 = rows.find(row => row.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 grid = screen.getByRole('grid');
+      expect(grid).toBeInTheDocument();
+      
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Visual checkbox indicators', () => {
+    it('shows checkbox when item is selected', async () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="option1" 
+          label="Checkbox test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const selectedRow = screen.getByRole('row', {name: 'Option 1'});
+      expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+      
+      const checkbox = selectedRow.querySelector('input[type="checkbox"]');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).toBeChecked();
+    });
+
+    it('shows checkbox on hover for non-disabled items', async () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Hover test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('row', {name: 'Option 1'});
+      
+      await userEvent.hover(row);
+      await waitFor(() => {
+        const checkbox = row.querySelector('input[type="checkbox"]');
+        expect(checkbox).toBeInTheDocument();
+      });
+    });
+
+    it('does not show checkbox on hover for disabled items', async () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Disabled hover test">
+          <SelectBox value="option1" isDisabled>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('row', {name: 'Option 1'});
+      
+      await userEvent.hover(row);
+      
+      await waitFor(() => {
+        const checkbox = row.querySelector('input[type="checkbox"]');
+        expect(checkbox).not.toBeInTheDocument();
+      }, {timeout: 1000});
+    });
+
+    it('shows checkbox for disabled but selected items', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          defaultValue="option1"
+          label="Disabled selected test">
+          <SelectBox value="option1" isDisabled>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const row = screen.getByRole('row', {name: 'Option 1'});
+      
+      const checkbox = row.querySelector('input[type="checkbox"]');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  describe('Props and configuration', () => {
+    it('supports different sizes', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          size="L" 
+          label="Size test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('grid', {name: 'Size test'})).toBeInTheDocument();
+    });
+
+    it('supports horizontal orientation', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          orientation="horizontal" 
+          label="Orientation test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('grid', {name: 'Orientation test'})).toBeInTheDocument();
+    });
+
+    it('supports required state', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          isRequired 
+          label="Required test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      const grid = screen.getByRole('grid', {name: 'Required test'});
+      expect(grid).toBeInTheDocument();
+      expect(screen.getByText('Required test')).toBeInTheDocument();
+    });
+
+    it('supports error message and validation', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          isInvalid 
+          errorMessage="Please select an option"
+          label="Validation test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      const grid = screen.getByRole('grid', {name: 'Validation test'});
+      expect(grid).toBeInTheDocument();
+      
+      expect(screen.getByText('Please select an option')).toBeInTheDocument();
+      
+      const errorMessage = screen.getByText('Please select an option');
+      expect(grid.getAttribute('aria-describedby')).toBe(errorMessage.id);
+    });
+  });
+
+  describe('Controlled behavior', () => {
+    it('handles initial value selection', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="option1" 
+          label="Initial value test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      const option2 = screen.getByRole('row', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('handles multiple selection with initial values', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="multiple" 
+          onSelectionChange={() => {}}
+          value={['option1', 'option2']}
+          label="Multiple initial test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="text">Option 3</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      const option2 = screen.getByRole('row', {name: 'Option 2'});
+      const option3 = screen.getByRole('row', {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
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          value=""
+          label="Callback test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).toHaveBeenCalledWith('option1');
+    });
+
+    it('calls onSelectionChange with array for multiple selection', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={onSelectionChange}
+          value={[]}
+          label="Multiple callback test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).toHaveBeenCalledWith(['option1']);
+    });
+  });
+
+  describe('Form integration', () => {
+    it('creates hidden inputs for form submission', () => {
+      const {container} = render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          value={['option1', 'option2']}
+          name="test-field"
+          label="Form test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="test-field"]');
+      expect(hiddenInputs).toHaveLength(2);
+      expect(hiddenInputs[0]).toHaveValue('option1');
+      expect(hiddenInputs[1]).toHaveValue('option2');
+    });
+
+    it('creates single hidden input for single selection', () => {
+      const {container} = render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value="option1"
+          name="test-field"
+          label="Single form test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const hiddenInput = container.querySelector('input[type="hidden"][name="test-field"]');
+      expect(hiddenInput).toBeInTheDocument();
+      expect(hiddenInput).toHaveValue('option1');
+    });
+
+    it('works with form submission using S2 Button', async () => {
+      const onSubmit = jest.fn();
+      render(
+        <form 
+          onSubmit={(e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            const values = formData.getAll('preferences');
+            onSubmit(values);
+          }}>
+          <SelectBoxGroup
+            selectionMode="multiple"
+            onSelectionChange={() => {}}
+            value={['option1', 'option3']}
+            name="preferences"
+            label="User Preferences">
+            <SelectBox value="option1">
+              <Text slot="text">Newsletter</Text>
+            </SelectBox>
+            <SelectBox value="option2">
+              <Text slot="text">Marketing</Text>
+            </SelectBox>
+            <SelectBox value="option3">
+              <Text slot="text">Updates</Text>
+            </SelectBox>
+          </SelectBoxGroup>
+          <Button type="submit" variant="accent">
+            Submit Preferences
+          </Button>
+        </form>
+      );
+
+      const submitButton = screen.getByRole('button', {name: 'Submit Preferences'});
+      expect(submitButton).toBeInTheDocument();
+
+      await userEvent.click(submitButton);
+      
+      expect(onSubmit).toHaveBeenCalledWith(['option1', 'option3']);
+    });
+  });
+
+  describe('Individual SelectBox behavior', () => {
+    it('handles disabled individual items', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value=""
+          label="Individual disabled test">
+          <SelectBox value="option1" isDisabled>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBe(2);
+    });
+
+    it('prevents interaction with disabled items', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          value=""
+          label="Disabled interaction test">
+          <SelectBox value="option1" isDisabled>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Grid navigation', () => {
+    it('supports keyboard navigation', async () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value=""
+          numColumns={2}
+          label="Navigation test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="text">Option 3</Text>
+          </SelectBox>
+          <SelectBox value="option4">
+            <Text slot="text">Option 4</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const grid = screen.getByRole('grid');
+      const rows = screen.getAllByRole('row');
+      
+      expect(grid).toBeInTheDocument();
+      expect(rows).toHaveLength(4);
+      
+      expect(grid).toHaveStyle('grid-template-columns: repeat(2, 1fr)');
+      
+      expect(screen.getByRole('row', {name: 'Option 1'})).toBeInTheDocument();
+      expect(screen.getByRole('row', {name: 'Option 2'})).toBeInTheDocument();
+      expect(screen.getByRole('row', {name: 'Option 3'})).toBeInTheDocument();
+      expect(screen.getByRole('row', {name: 'Option 4'})).toBeInTheDocument();
+    });
+
+    it('supports space key selection', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          value=""
+          label="Space key test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const grid = screen.getByRole('grid');
+      await act(async () => {
+        grid.focus();
+      });
+      
+      await act(async () => {
+        await userEvent.keyboard(' ');
+      });
+      expect(onSelectionChange).toHaveBeenCalledWith('option1');
+    });
+  });
+
+  describe('Children validation', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      (console.error as jest.Mock).mockRestore();
+    });
+
+    it('validates minimum children', () => {
+      render(
+        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Min children test">
+          {[]}
+        </SelectBoxGroup>
+      );
+      
+      expect(console.error).toHaveBeenCalledWith(
+        'Invalid content. SelectBox must have at least one item.'
+      );
+    });
+
+    it('validates maximum children', () => {
+      const manyChildren = Array.from({length: 10}, (_, i) => (
+        <SelectBox key={i} value={`option${i}`}>
+          <Text slot="text">Option {i}</Text>
+        </SelectBox>
+      ));
+      
+      render(
+        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Max children test">
+          {manyChildren}
+        </SelectBoxGroup>
+      );
+      
+      expect(console.error).toHaveBeenCalledWith(
+        'Invalid content. SelectBox cannot have more than 9 children.'
+      );
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper grid structure', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="ARIA test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByRole('grid', {name: 'ARIA test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('row')).toHaveLength(2);
+      expect(screen.getAllByRole('gridcell')).toHaveLength(2);
+    });
+
+    it('associates labels correctly', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Choose option">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const grid = screen.getByRole('grid', {name: 'Choose option'});
+      expect(grid).toBeInTheDocument();
+    });
+
+    it('supports aria-describedby for error messages', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          isInvalid
+          errorMessage="Error occurred"
+          label="Error test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const grid = screen.getByRole('grid');
+      const errorMessage = screen.getByText('Error occurred');
+      
+      expect(grid).toHaveAttribute('aria-describedby');
+      expect(errorMessage).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles complex children with slots', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          orientation="horizontal"
+          label="Complex children test">
+          <SelectBox value="option1">
+            <div>Icon</div>
+            <Text slot="text">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 empty string values', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Empty value test">
+          <SelectBox value="">
+            <Text slot="text">Empty Value</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const row = screen.getByRole('row', {name: 'Empty Value'});
+      expect(row).toBeInTheDocument();
+    });
+
+    it('handles different gutter widths', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          gutterWidth="compact" 
+          label="Gutter test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('grid', {name: 'Gutter test'})).toBeInTheDocument();
+    });
+
+    it('handles emphasized style', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Emphasized test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('grid', {name: 'Emphasized test'})).toBeInTheDocument();
+    });
+  });
+});
+
+