From e4d4c17bd95862c373300d923d8376266e0dbc5a Mon Sep 17 00:00:00 2001
From: Daniel Pandyan <dpadbe@work.local>
Date: Mon, 14 Jul 2025 10:26:59 -0700
Subject: [PATCH 1/9] S2 SelectBox initial implementation

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 220 +++++++++++++++
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 258 ++++++++++++++++++
 packages/@react-spectrum/s2/src/index.ts      |   4 +
 .../s2/stories/SelectBox.stories.tsx          | 169 ++++++++++++
 4 files changed, 651 insertions(+)
 create mode 100644 packages/@react-spectrum/s2/src/SelectBox.tsx
 create mode 100644 packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
 create mode 100644 packages/@react-spectrum/s2/stories/SelectBox.stories.tsx

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
new file mode 100644
index 00000000000..ed828f21030
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -0,0 +1,220 @@
+/*
+ * 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 {Radio as AriaRadio, Checkbox as AriaCheckbox, ContextValue, RadioProps, CheckboxProps} from 'react-aria-components';
+import {FocusableRef, FocusableRefValue, SpectrumLabelableProps, HelpTextProps} from '@react-types/shared';
+import {Checkbox} from './Checkbox';
+import {forwardRef, ReactNode, useContext, useRef, createContext} from 'react';
+import {useFocusableRef} from '@react-spectrum/utils';
+import {SelectBoxContext} from './SelectBoxGroup';
+import {style, focusRing, baseColor} from '../style' with {type: 'macro'};
+import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+import React from 'react';
+
+export interface SelectBoxProps extends 
+  Omit<CheckboxProps & RadioProps, 'className' | 'style' | 'children'>, 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<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+
+// Simple basic styling with proper dark mode support
+const selectBoxStyles = style({
+  ...focusRing(),
+  display: 'flex',
+  flexDirection: 'column',
+  lineHeight: 'title',
+  justifyContent: 'center',
+  flexShrink: 0,
+  alignItems: 'center',
+  fontFamily: 'sans',
+  font: 'ui',
+  //vertical orientation
+  size: {
+    default: {
+      size: {
+        S: 120,
+        M: 170,
+        L: 220,
+        XL: 270
+      }
+    },
+    //WIP horizontal orientation
+    orientation: {
+      horizontal: {
+        size: {
+          S: 280,
+          M: 368,
+          L: 420,
+          XL: 480
+        }
+      }
+    }
+  },
+  minWidth: {
+    default: {
+      size: {
+        S: 100,
+        M: 144,
+        L: 180,
+        XL: 220
+      }
+    },
+    orientation: {
+      horizontal: {
+        size: {
+          S: 160,
+          M: 188,
+          L: 220,
+          XL: 250
+        }
+      }
+    }
+  },
+  maxWidth: {
+    default: {
+      size: {
+        S: 140,
+        M: 200,
+        L: 260,
+        XL: 320
+      }
+    },
+    orientation: {
+      horizontal: {
+        size: {
+          S: 360,
+          M: 420,
+          L: 480,
+          XL: 540
+        }
+      }
+    }
+  },
+  minHeight: {
+    default: {
+      size: {
+        S: 100,
+        M: 144,
+        L: 180,
+        XL: 220
+      }
+    },
+    orientation: {
+      horizontal: 80
+    }
+  },
+  maxHeight: {
+    default: {
+      size: {
+        S: 140,
+        M: 200,
+        L: 260,
+        XL: 320
+      }
+    },
+    orientation: {
+      horizontal: 240
+    }
+  },
+  padding: {
+    size: {
+      S: 16,
+      M: 24,
+      L: 32,
+      XL: 40
+    }
+  },
+  borderRadius: 'lg',
+  backgroundColor: 'layer-2',
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isSelected: 'elevated',
+    forcedColors: 'none'
+  },
+  position: 'relative',
+  borderWidth: 2,
+  borderStyle: {
+    default: 'solid',
+    isSelected: 'solid'
+  },
+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isFocusVisible: 'transparent'
+  },
+  transition: 'default'
+}, getAllowedOverrides());
+
+const checkboxContainer = style({
+  position: 'absolute',
+  top: 16,
+  left: 16
+}, getAllowedOverrides());
+
+/**
+ * SelectBox components allow users to select options from a list.
+ * They can behave as radio buttons (single selection) or checkboxes (multiple selection).
+ */
+export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLLabelElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxItemContext);
+  let {children, value, isDisabled = false, UNSAFE_className = '', UNSAFE_style} = props;
+  let inputRef = useRef<HTMLInputElement | null>(null);
+  let domRef = useFocusableRef(ref, inputRef);
+  
+  let groupContext = useContext(SelectBoxContext);
+  let {
+    allowMultiSelect = false,
+    size = 'M',
+    orientation = 'vertical'
+  } = groupContext || {};
+
+  const Selector = allowMultiSelect ? AriaCheckbox : AriaRadio;
+  
+  return (
+    <Selector
+      value={value}
+      isDisabled={isDisabled}
+      ref={domRef}
+      inputRef={inputRef}
+      style={UNSAFE_style}
+      className={renderProps => UNSAFE_className + selectBoxStyles({...renderProps, size, orientation}, props.styles)}>
+      {renderProps => (
+        <>
+          {(renderProps.isSelected || renderProps.isHovered) && (
+            <div className={checkboxContainer({...renderProps, size}, props.styles)}>
+              <Checkbox 
+                value={value}
+                isSelected={renderProps.isSelected}
+                isDisabled={isDisabled}
+                size={size}
+              />
+            </div>
+          )}
+          {children}
+        </>
+      )}
+    </Selector>
+  );
+});
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
new file mode 100644
index 00000000000..781eb228108
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -0,0 +1,258 @@
+/*
+ * 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 {
+  RadioGroup as AriaRadioGroup,
+  CheckboxGroup as AriaCheckboxGroup,
+  Label,
+  ContextValue
+} from 'react-aria-components';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {StyleProps, getAllowedOverrides} from './style-utils' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactNode, useState, useEffect, useMemo, ReactElement} from 'react';
+import {style} from '../style' with {type: 'macro'};
+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,
+  /**
+   * Whether the SelectBoxGroup should be displayed with an emphasized style.
+   */
+  isEmphasized?: boolean,
+  /**
+   * 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
+}
+
+interface SelectBoxContextValue {
+  allowMultiSelect?: boolean,
+  value?: SelectBoxValueType,
+  size?: 'S' | 'M' | 'L' | 'XL',
+  orientation?: Orientation,
+  isEmphasized?: boolean
+}
+
+// Utility functions
+const unwrapValue = (value: SelectBoxValueType | undefined): string | undefined => {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  return value;
+};
+
+const ensureArray = (value: SelectBoxValueType | undefined): string[] => {
+  if (value === undefined) return [];
+  if (Array.isArray(value)) return value;
+  return [value];
+};
+
+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
+    }
+  }
+}, getAllowedOverrides());
+
+
+// Selector Group component
+interface SelectorGroupProps {
+  allowMultiSelect: boolean;
+  children: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  onChange: (value: SelectBoxValueType) => void;
+  value?: SelectBoxValueType;
+  defaultValue?: SelectBoxValueType;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}
+
+const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({
+  allowMultiSelect,
+  children,
+  className,
+  onChange,
+  value,
+  style,
+  defaultValue,
+  isRequired,
+  isDisabled,
+}, ref) {
+  const props = { 
+    isRequired,
+    isDisabled,
+    className,
+    style,
+    children,
+    onChange,
+    ref,
+  };
+
+  return allowMultiSelect ? (
+    <AriaCheckboxGroup
+      {...props}
+      value={ensureArray(value)}
+      defaultValue={ensureArray(defaultValue)}
+    />
+  ) : (
+    <AriaRadioGroup
+      {...props}
+      value={unwrapValue(value)}
+      defaultValue={unwrapValue(defaultValue)}
+    />
+  );
+});
+
+/**
+ * SelectBox groups allow users to select one or more options from a list.
+ * All possible options are exposed up front for users to compare.
+ */
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
+  
+  let {
+    label,
+    children,
+    onSelectionChange,
+    defaultValue,
+    selectionMode = 'single',
+    size = 'M',
+    orientation = 'vertical',
+    isEmphasized,
+    numColumns = 2,
+    gutterWidth = 'default',
+    isRequired = false,
+    isDisabled = false,
+    UNSAFE_style,
+  } = props;
+
+  const [value, setValue] = useState<SelectBoxValueType | undefined>(defaultValue);
+  const allowMultiSelect = selectionMode === 'multiple';
+  
+  const domRef = useDOMRef(ref);
+
+  const getChildrenToRender = () => {
+    const childrenToRender = React.Children.toArray(children).filter((x) => x);
+    try {
+      const childrenLength = childrenToRender.length;
+      if (childrenLength <= 0) {
+        throw new Error('Invalid content. SelectBox must have at least a title.');
+      }
+      if (childrenLength > 9) {
+        throw new Error('Invalid content. SelectBox cannot have more than 9 children.');
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return childrenToRender;
+  };
+
+  useEffect(() => {
+    if (value !== undefined) {
+      onSelectionChange(value);
+    }
+  }, [onSelectionChange, value]);
+
+  // Context value
+  const selectBoxContextValue = useMemo(
+    () => ({
+      allowMultiSelect,
+      value,
+      size,
+      orientation,
+      isEmphasized
+    }),
+    [allowMultiSelect, value, size, orientation, isEmphasized]
+  );
+
+  return (
+    <SelectorGroup
+      allowMultiSelect={allowMultiSelect}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={setValue}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
+      ref={domRef}
+      className={gridStyles({gutterWidth, orientation}, props.styles)}
+      style={{
+        ...UNSAFE_style,
+        gridTemplateColumns: `repeat(${numColumns}, 1fr)`
+      }}
+    >
+      <SelectBoxContext.Provider value={selectBoxContextValue}>
+        {getChildrenToRender().map((child, _) => {
+          return child as ReactElement;
+        })}
+      </SelectBoxContext.Provider>
+    </SelectorGroup>
+  );
+});
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index ab01656ff77..843be0d6af3 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -69,6 +69,8 @@ export {Provider} from './Provider';
 export {Radio} from './Radio';
 export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
+export {SelectBox} from './SelectBox';
+export {SelectBoxGroup, SelectBoxContext} from './SelectBoxGroup';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
@@ -146,6 +148,8 @@ export type {ProgressCircleProps} from './ProgressCircle';
 export type {ProviderProps} from './Provider';
 export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
+export type {SelectBoxProps} from './SelectBox';
+export type {SelectBoxGroupProps, SelectBoxValueType} from './SelectBoxGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
 export type {SliderProps} from './Slider';
diff --git a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
new file mode 100644
index 00000000000..511be078104
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
@@ -0,0 +1,169 @@
+/*************************************************************************
+ * 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 React from "react";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectBox, SelectBoxGroup, Text, createIcon } from "../src";
+import Server from "../spectrum-illustrations/linear/Server";
+import StarSVG from "../s2wf-icons/S2_Icon_Star_20_N.svg";
+
+const StarIcon = createIcon(StarSVG);
+
+const meta: Meta<typeof SelectBoxGroup> = {
+  component: SelectBoxGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSelectionChange: { table: { category: "Events" } },
+    label: { control: { type: "text" } },
+    description: { control: { type: "text" } },
+    errorMessage: { control: { type: "text" } },
+    children: { table: { disable: true } },
+  },
+  title: "SelectBox",
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectBoxGroup>;
+
+export const Example: Story = {
+  args: {
+    label: "Choose an option",
+    orientation: "vertical",
+    necessityIndicator: "label",
+    size: "M",
+    labelPosition: "side",
+  },
+  render: (args) => (
+    <SelectBoxGroup
+      {...args}
+      onSelectionChange={(v) => console.log("Selection changed:", v)}
+    >
+      <SelectBox value="select-box-label">
+        <Server slot="icon" />
+        <Text slot="text">Select Box Label</Text>
+      </SelectBox>
+      <SelectBox value="select-box-label2">
+        <Server slot="icon" />
+        <Text slot="text">Select Box Label</Text>
+      </SelectBox>
+      <SelectBox value="select-box-label3">
+        <Server slot="icon" />
+        <Text slot="text">Select Box Label</Text>
+      </SelectBox>
+    </SelectBoxGroup>
+  ),
+};
+
+export const SingleSelectNumColumns: Story = {
+  args: {
+    numColumns: 2,
+    label: "Favorite city",
+    size: "XL",
+    gutterWidth: "default",
+  },
+  render: (args) => {
+    return (
+      <SelectBoxGroup
+        {...args}
+        onSelectionChange={(v) => action("onSelectionChange")(v)}
+      >
+        <SelectBox value="Paris">
+          <StarIcon slot="icon" />
+          <Text slot="text">Paris</Text>
+          <Text slot="description">France</Text>
+        </SelectBox>
+        <SelectBox value="Rome">
+          <StarIcon slot="icon" />
+          <Text slot="text">Rome</Text>
+          <Text slot="description">Italy</Text>
+        </SelectBox>
+        <SelectBox value="San Francisco">
+          <StarIcon slot="icon" />
+          <Text slot="text">San Francisco</Text>
+          <Text slot="description">USA</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    );
+  },
+  name: "Multiple columns",
+};
+
+export const MultipleSelection: Story = {
+  args: {
+    numColumns: 1,
+    label: "Favorite cities",
+    selectionMode: "multiple",
+  },
+  render: (args) => {
+    return (
+      <SelectBoxGroup
+        {...args}
+        onSelectionChange={(v) => action("onSelectionChange")(v)}
+      >
+        <SelectBox value="Paris">
+          {/* <StarIcon slot="icon" /> */}
+          <Text slot="text">Paris</Text>
+          <Text slot="description">France</Text>
+        </SelectBox>
+        <SelectBox value="Rome">
+          {/* <StarIcon slot="icon" /> */}
+          <Text slot="text">Rome</Text>
+          <Text slot="description">Italy</Text>
+        </SelectBox>
+        <SelectBox value="San Francisco">
+          {/* <StarIcon slot="icon" /> */}
+          <Text slot="text">San Francisco</Text>
+          <Text slot="description">USA</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    );
+  },
+  name: "Multiple selection mode",
+};
+
+export const HorizontalOrientation: Story = {
+  args: {
+    orientation: "horizontal",
+    label: "Favorite cities",
+  },
+  render: (args) => {
+    return (
+      <SelectBoxGroup
+        {...args}
+        onSelectionChange={(v) => action("onSelectionChange")(v)}
+      >
+        <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="San Francisco">
+          <Text slot="text">San Francisco</Text>
+          <Text slot="description">USA</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    );
+  },
+  name: "Horizontal orientation",
+};

From a431ce0160631ecf76e06253243b7362a26767db Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 14 Jul 2025 15:23:32 -0700
Subject: [PATCH 2/9] Added tests and fixed linting

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 141 ++++---
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  51 +--
 .../s2/stories/SelectBox.stories.tsx          |  68 ++--
 .../s2/test/SelectBox.test.tsx                | 363 ++++++++++++++++++
 4 files changed, 488 insertions(+), 135 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/SelectBox.test.tsx

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index ed828f21030..f257a99ae42 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -9,16 +9,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {Radio as AriaRadio, Checkbox as AriaCheckbox, ContextValue, RadioProps, CheckboxProps} from 'react-aria-components';
-import {FocusableRef, FocusableRefValue, SpectrumLabelableProps, HelpTextProps} from '@react-types/shared';
+import {Checkbox as AriaCheckbox, Radio as AriaRadio, CheckboxProps, ContextValue, RadioProps} from 'react-aria-components';
 import {Checkbox} from './Checkbox';
-import {forwardRef, ReactNode, useContext, useRef, createContext} from 'react';
-import {useFocusableRef} from '@react-spectrum/utils';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {focusRing, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {SelectBoxContext} from './SelectBoxGroup';
-import {style, focusRing, baseColor} from '../style' with {type: 'macro'};
-import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
-import React from 'react';
 
 export interface SelectBoxProps extends 
   Omit<CheckboxProps & RadioProps, 'className' | 'style' | 'children'>, StyleProps {
@@ -33,7 +32,15 @@ export interface SelectBoxProps extends
   /**
    * Whether the SelectBox is disabled.
    */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  /**
+   * Whether the SelectBox is selected (controlled).
+   */
+  isSelected?: boolean,
+  /**
+   * Handler called when the SelectBox selection changes.
+   */
+  onChange?: (isSelected: boolean) => void
 }
 
 export const SelectBoxItemContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
@@ -49,102 +56,76 @@ const selectBoxStyles = style({
   alignItems: 'center',
   fontFamily: 'sans',
   font: 'ui',
-  //vertical orientation
-  size: {
-    default: {
-      size: {
-        S: 120,
-        M: 170,
-        L: 220,
-        XL: 270
-      }
-    },
-    //WIP horizontal orientation
-    orientation: {
-      horizontal: {
-        size: {
-          S: 280,
-          M: 368,
-          L: 420,
-          XL: 480
-        }
-      }
-    }
-  },
-  minWidth: {
+  
+  // Vertical orientation (default) - Fixed square dimensions
+  width: {
     default: {
       size: {
-        S: 100,
-        M: 144,
-        L: 180,
-        XL: 220
+        XS: 100,
+        S: 128,
+        M: 136,
+        L: 160,
+        XL: 192
       }
     },
     orientation: {
       horizontal: {
         size: {
-          S: 160,
-          M: 188,
-          L: 220,
-          XL: 250
+          XS: 'auto',
+          S: 'auto',
+          M: 'auto',
+          L: 'auto',
+          XL: 'auto'
         }
       }
     }
   },
-  maxWidth: {
+  
+  height: {
     default: {
       size: {
-        S: 140,
-        M: 200,
-        L: 260,
-        XL: 320
+        XS: 100,
+        S: 128,
+        M: 136,
+        L: 160,
+        XL: 192
       }
     },
     orientation: {
       horizontal: {
         size: {
-          S: 360,
-          M: 420,
-          L: 480,
-          XL: 540
+          XS: 'auto',
+          S: 'auto',
+          M: 'auto',
+          L: 'auto',
+          XL: 'auto'
         }
       }
     }
   },
-  minHeight: {
-    default: {
-      size: {
-        S: 100,
-        M: 144,
-        L: 180,
-        XL: 220
-      }
-    },
+  
+  minWidth: {
     orientation: {
-      horizontal: 80
+      horizontal: 160
     }
   },
-  maxHeight: {
-    default: {
-      size: {
-        S: 140,
-        M: 200,
-        L: 260,
-        XL: 320
-      }
-    },
+  
+  maxWidth: {
     orientation: {
-      horizontal: 240
+      horizontal: 272
     }
   },
+
   padding: {
     size: {
+      XS: 12,
       S: 16,
-      M: 24,
-      L: 32,
-      XL: 40
+      M: 20,
+      L: 24,
+      XL: 28
     }
   },
+  
   borderRadius: 'lg',
   backgroundColor: 'layer-2',
   boxShadow: {
@@ -179,7 +160,7 @@ const checkboxContainer = style({
  */
 export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxItemContext);
-  let {children, value, isDisabled = false, UNSAFE_className = '', UNSAFE_style} = props;
+  let {children, value, isDisabled = false, isSelected, onChange, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
   let domRef = useFocusableRef(ref, inputRef);
   
@@ -188,14 +169,23 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     allowMultiSelect = false,
     size = 'M',
     orientation = 'vertical'
-  } = groupContext || {};
+  } = groupContext;
 
   const Selector = allowMultiSelect ? AriaCheckbox : AriaRadio;
   
+  // Handle controlled selection
+  const handleSelectionChange = (selected: boolean) => {
+    if (onChange) {
+      onChange(selected);
+    }
+  };
+  
   return (
     <Selector
       value={value}
       isDisabled={isDisabled}
+      isSelected={isSelected}
+      onChange={handleSelectionChange}
       ref={domRef}
       inputRef={inputRef}
       style={UNSAFE_style}
@@ -208,8 +198,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
                 value={value}
                 isSelected={renderProps.isSelected}
                 isDisabled={isDisabled}
-                size={size}
-              />
+                size={size} />
             </div>
           )}
           {children}
@@ -217,4 +206,4 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       )}
     </Selector>
   );
-});
\ No newline at end of file
+});
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 781eb228108..17db7606753 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -10,14 +10,13 @@
  */
 
 import {
-  RadioGroup as AriaRadioGroup,
   CheckboxGroup as AriaCheckboxGroup,
-  Label,
+  RadioGroup as AriaRadioGroup,
   ContextValue
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
-import {StyleProps, getAllowedOverrides} from './style-utils' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useState, useEffect, useMemo, ReactElement} from 'react';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -97,8 +96,12 @@ const unwrapValue = (value: SelectBoxValueType | undefined): string | undefined
 };
 
 const ensureArray = (value: SelectBoxValueType | undefined): string[] => {
-  if (value === undefined) return [];
-  if (Array.isArray(value)) return value;
+  if (value === undefined) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
   return [value];
 };
 
@@ -124,15 +127,16 @@ const gridStyles = style({
 
 // Selector Group component
 interface SelectorGroupProps {
-  allowMultiSelect: boolean;
-  children: ReactNode;
-  style?: React.CSSProperties;
-  className?: string;
-  onChange: (value: SelectBoxValueType) => void;
-  value?: SelectBoxValueType;
-  defaultValue?: SelectBoxValueType;
-  isRequired?: boolean;
-  isDisabled?: boolean;
+  allowMultiSelect: boolean,
+  children: ReactNode,
+  style?: React.CSSProperties,
+  className?: string,
+  onChange: (value: SelectBoxValueType) => void,
+  value?: SelectBoxValueType,
+  defaultValue?: SelectBoxValueType,
+  isRequired?: boolean,
+  isDisabled?: boolean,
+  label?: ReactNode
 }
 
 const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({
@@ -145,6 +149,7 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
   defaultValue,
   isRequired,
   isDisabled,
+  label
 }, ref) {
   const props = { 
     isRequired,
@@ -153,7 +158,7 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
     style,
     children,
     onChange,
-    ref,
+    ref
   };
 
   return allowMultiSelect ? (
@@ -161,13 +166,13 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
       {...props}
       value={ensureArray(value)}
       defaultValue={ensureArray(defaultValue)}
-    />
+      aria-label={label ? String(label) : undefined} />
   ) : (
     <AriaRadioGroup
       {...props}
       value={unwrapValue(value)}
       defaultValue={unwrapValue(defaultValue)}
-    />
+      aria-label={label ? String(label) : undefined} />
   );
 });
 
@@ -191,7 +196,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     gutterWidth = 'default',
     isRequired = false,
     isDisabled = false,
-    UNSAFE_style,
+    UNSAFE_style
   } = props;
 
   const [value, setValue] = useState<SelectBoxValueType | undefined>(defaultValue);
@@ -241,18 +246,18 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       onChange={setValue}
       isRequired={isRequired}
       isDisabled={isDisabled}
+      label={label}
       ref={domRef}
       className={gridStyles({gutterWidth, orientation}, props.styles)}
       style={{
         ...UNSAFE_style,
         gridTemplateColumns: `repeat(${numColumns}, 1fr)`
-      }}
-    >
+      }}>
       <SelectBoxContext.Provider value={selectBoxContextValue}>
-        {getChildrenToRender().map((child, _) => {
+        {getChildrenToRender().map((child) => {
           return child as ReactElement;
         })}
       </SelectBoxContext.Provider>
     </SelectorGroup>
   );
-});
\ No newline at end of file
+});
diff --git a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
index 511be078104..2e0c0b2696e 100644
--- a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
@@ -15,12 +15,12 @@
  * from Adobe.
  **************************************************************************/
 
-import React from "react";
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { SelectBox, SelectBoxGroup, Text, createIcon } from "../src";
-import Server from "../spectrum-illustrations/linear/Server";
-import StarSVG from "../s2wf-icons/S2_Icon_Star_20_N.svg";
+import {action} from '@storybook/addon-actions';
+import {createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
+import Server from '../spectrum-illustrations/linear/Server';
+import StarSVG from '../s2wf-icons/S2_Icon_Star_20_N.svg';
 
 const StarIcon = createIcon(StarSVG);
 
@@ -31,13 +31,13 @@ const meta: Meta<typeof SelectBoxGroup> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    onSelectionChange: { table: { category: "Events" } },
-    label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
-    errorMessage: { control: { type: "text" } },
-    children: { table: { disable: true } },
+    onSelectionChange: {table: {category: 'Events'}},
+    label: {control: {type: 'text'}},
+    description: {control: {type: 'text'}},
+    errorMessage: {control: {type: 'text'}},
+    children: {table: {disable: true}}
   },
-  title: "SelectBox",
+  title: 'SelectBox'
 };
 
 export default meta;
@@ -45,17 +45,16 @@ type Story = StoryObj<typeof SelectBoxGroup>;
 
 export const Example: Story = {
   args: {
-    label: "Choose an option",
-    orientation: "vertical",
-    necessityIndicator: "label",
-    size: "M",
-    labelPosition: "side",
+    label: 'Choose an option',
+    orientation: 'vertical',
+    necessityIndicator: 'label',
+    size: 'M',
+    labelPosition: 'side'
   },
   render: (args) => (
     <SelectBoxGroup
       {...args}
-      onSelectionChange={(v) => console.log("Selection changed:", v)}
-    >
+      onSelectionChange={(v) => console.log('Selection changed:', v)}>
       <SelectBox value="select-box-label">
         <Server slot="icon" />
         <Text slot="text">Select Box Label</Text>
@@ -69,22 +68,21 @@ export const Example: Story = {
         <Text slot="text">Select Box Label</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
 export const SingleSelectNumColumns: Story = {
   args: {
     numColumns: 2,
-    label: "Favorite city",
-    size: "XL",
-    gutterWidth: "default",
+    label: 'Favorite city',
+    size: 'XL',
+    gutterWidth: 'default'
   },
   render: (args) => {
     return (
       <SelectBoxGroup
         {...args}
-        onSelectionChange={(v) => action("onSelectionChange")(v)}
-      >
+        onSelectionChange={(v) => action('onSelectionChange')(v)}>
         <SelectBox value="Paris">
           <StarIcon slot="icon" />
           <Text slot="text">Paris</Text>
@@ -103,21 +101,20 @@ export const SingleSelectNumColumns: Story = {
       </SelectBoxGroup>
     );
   },
-  name: "Multiple columns",
+  name: 'Multiple columns'
 };
 
 export const MultipleSelection: Story = {
   args: {
     numColumns: 1,
-    label: "Favorite cities",
-    selectionMode: "multiple",
+    label: 'Favorite cities',
+    selectionMode: 'multiple'
   },
   render: (args) => {
     return (
       <SelectBoxGroup
         {...args}
-        onSelectionChange={(v) => action("onSelectionChange")(v)}
-      >
+        onSelectionChange={(v) => action('onSelectionChange')(v)}>
         <SelectBox value="Paris">
           {/* <StarIcon slot="icon" /> */}
           <Text slot="text">Paris</Text>
@@ -136,20 +133,19 @@ export const MultipleSelection: Story = {
       </SelectBoxGroup>
     );
   },
-  name: "Multiple selection mode",
+  name: 'Multiple selection mode'
 };
 
 export const HorizontalOrientation: Story = {
   args: {
-    orientation: "horizontal",
-    label: "Favorite cities",
+    orientation: 'horizontal',
+    label: 'Favorite cities'
   },
   render: (args) => {
     return (
       <SelectBoxGroup
         {...args}
-        onSelectionChange={(v) => action("onSelectionChange")(v)}
-      >
+        onSelectionChange={(v) => action('onSelectionChange')(v)}>
         <SelectBox value="Paris">
           <Text slot="text">Paris</Text>
           <Text slot="description">France</Text>
@@ -165,5 +161,5 @@ export const HorizontalOrientation: Story = {
       </SelectBoxGroup>
     );
   },
-  name: "Horizontal orientation",
+  name: 'Horizontal orientation'
 };
diff --git a/packages/@react-spectrum/s2/test/SelectBox.test.tsx b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
new file mode 100644
index 00000000000..dbc55035cd3
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
@@ -0,0 +1,363 @@
+import React from 'react';
+import {render, screen, waitFor} from '@testing-library/react';
+import {SelectBox} from '../src/SelectBox';
+import {SelectBoxGroup} from '../src/SelectBoxGroup';
+import userEvent from '@testing-library/user-event';
+
+// Mock all style-related imports
+jest.mock('../style', () => ({
+  style: jest.fn(() => jest.fn(() => 'mocked-style')), // Return a function that can be called
+  focusRing: jest.fn(() => ({})),
+  baseColor: jest.fn(() => ({})),
+  color: jest.fn(() => '#000000'),
+  raw: jest.fn((strings) => strings.join('')),
+  lightDark: jest.fn(() => '#000000')
+}));
+
+jest.mock('../src/style-utils', () => ({
+  controlFont: {},
+  getAllowedOverrides: jest.fn(() => ({}))
+}));
+
+jest.mock('@react-spectrum/utils', () => ({
+  useFocusableRef: jest.fn((ref) => ref),
+  useDOMRef: jest.fn((ref) => ref)
+}));
+
+jest.mock('../src/useSpectrumContextProps', () => ({
+  useSpectrumContextProps: jest.fn((props, ref) => [props, ref])
+}));
+
+jest.mock('../src/Checkbox', () => ({
+  Checkbox: ({value, isSelected, isDisabled, size}) => 
+    React.createElement('div', {
+      role: 'checkbox',
+      'aria-checked': isSelected,
+      'aria-disabled': isDisabled,
+      'data-testid': `checkbox-${value}`,
+      'data-size': size
+    }, 'Mock Checkbox')
+}));
+
+// Test helpers
+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">Option 1</SelectBox>
+      <SelectBox value="option2">Option 2</SelectBox>
+      <SelectBox value="option3">Option 3</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">Option 1</SelectBox>
+      <SelectBox value="option2">Option 2</SelectBox>
+      <SelectBox value="option3">Option 3</SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+function DisabledSelectBox() {
+  return (
+    <SelectBoxGroup
+      selectionMode="single"
+      onSelectionChange={() => {}}
+      isDisabled
+      label="Disabled select test">
+      <SelectBox value="option1">Option 1</SelectBox>
+      <SelectBox value="option2">Option 2</SelectBox>
+    </SelectBoxGroup>
+  );
+}
+
+describe('SelectBox', () => {
+  describe('Basic functionality', () => {
+    it('renders single select mode', () => {
+      render(<SingleSelectBox />);
+      expect(screen.getAllByRole('radio')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('renders multiple select mode', () => {
+      render(<MultiSelectBox />);
+      expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('handles multiple selection', async () => {
+      render(<MultiSelectBox />);
+      const option1 = screen.getByDisplayValue('option1');
+      const option2 = screen.getByDisplayValue('option2');
+      
+      await userEvent.click(option1);
+      await userEvent.click(option2);
+      
+      expect(option1).toBeChecked();
+      expect(option2).toBeChecked();
+    });
+
+    it('handles disabled state', () => {
+      render(<DisabledSelectBox />);
+      const inputs = screen.getAllByRole('radio');
+      inputs.forEach(input => {
+        expect(input).toBeDisabled();
+      });
+    });
+  });
+
+  describe('Props and configuration', () => {
+    it('supports different sizes', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} size="L" label="Size test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('supports horizontal orientation', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} orientation="horizontal" label="Orientation test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('supports custom number of columns', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} numColumns={3} label="Columns test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('supports labels with aria-label', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Choose an option">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByLabelText('Choose an option')).toBeInTheDocument();
+    });
+
+    it('supports required state', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} isRequired label="Required test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      const group = screen.getByRole('radiogroup');
+      expect(group).toBeRequired();
+    });
+  });
+
+  describe('Controlled and uncontrolled behavior', () => {
+    it('handles default value', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} defaultValue="option1" label="Default value test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByDisplayValue('option1');
+      expect(option1).toBeChecked();
+    });
+
+    it('handles multiple selection with default values', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="multiple" 
+          onSelectionChange={() => {}}
+          defaultValue={['option1', 'option2']}
+          label="Multiple default test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+          <SelectBox value="option3">Option 3</SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByDisplayValue('option1');
+      const option2 = screen.getByDisplayValue('option2');
+      const option3 = screen.getByDisplayValue('option3');
+      
+      expect(option1).toBeChecked();
+      expect(option2).toBeChecked();
+      expect(option3).not.toBeChecked();
+    });
+  });
+
+  describe('Individual SelectBox behavior', () => {
+    it('shows checkbox indicator when hovered', async () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Hover test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      const option1 = screen.getByDisplayValue('option1');
+      await userEvent.hover(option1);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('checkbox-option1')).toBeInTheDocument();
+      });
+    });
+
+    it('handles disabled individual items', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Individual disabled test">
+          <SelectBox value="option1" isDisabled>Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByDisplayValue('option1');
+      const option2 = screen.getByDisplayValue('option2');
+      
+      expect(option1).toBeDisabled();
+      expect(option2).not.toBeDisabled();
+    });
+  });
+
+  describe('Children validation', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      (console.error as jest.Mock).mockRestore();
+    });
+
+    it('validates minimum children', () => {
+      render(
+        <SelectBoxGroup onSelectionChange={() => {}} label="Min children test">
+          {[]}
+        </SelectBoxGroup>
+      );
+      
+      expect(console.error).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining('at least a title')
+        })
+      );
+    });
+
+    it('validates maximum children', () => {
+      const manyChildren = Array.from({length: 10}, (_, i) => (
+        <SelectBox key={i} value={`option${i}`}>Option {i}</SelectBox>
+      ));
+      
+      render(
+        <SelectBoxGroup onSelectionChange={() => {}} label="Max children test">
+          {manyChildren}
+        </SelectBoxGroup>
+      );
+      
+      expect(console.error).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining('more than 9 children')
+        })
+      );
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA roles', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="ARIA test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+          <SelectBox value="option3">Option 3</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+      expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+
+    it('has proper ARIA roles for multiple selection', () => {
+      render(
+        <SelectBoxGroup selectionMode="multiple" onSelectionChange={() => {}} label="ARIA multi test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+          <SelectBox value="option3">Option 3</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('group')).toBeInTheDocument();
+      expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+    });
+
+    it('associates labels correctly', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Choose option">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByLabelText('Choose option')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles empty value', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Empty value test">
+          <SelectBox value="">Empty</SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const option = screen.getByDisplayValue('');
+      expect(option).toHaveAttribute('value', '');
+    });
+
+    it('handles complex children', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Complex children test">
+          <SelectBox value="option1">
+            <div>
+              <h3>Title</h3>
+              <p>Description</p>
+            </div>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText('Description')).toBeInTheDocument();
+    });
+
+    it('handles different gutter widths', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} gutterWidth="compact" label="Gutter test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('handles emphasized style', () => {
+      render(
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} isEmphasized label="Emphasized test">
+          <SelectBox value="option1">Option 1</SelectBox>
+        </SelectBoxGroup>
+      );
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+  });
+});
+
+

From 7c6a91bb7f0044029a3c60f6eeb532853f1d5905 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 14 Jul 2025 15:59:23 -0700
Subject: [PATCH 3/9] updated tests to remove styles

---
 .../s2/test/SelectBox.test.tsx                | 68 ++++++-------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/packages/@react-spectrum/s2/test/SelectBox.test.tsx b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
index dbc55035cd3..9adc3639b7c 100644
--- a/packages/@react-spectrum/s2/test/SelectBox.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
@@ -4,42 +4,6 @@ import {SelectBox} from '../src/SelectBox';
 import {SelectBoxGroup} from '../src/SelectBoxGroup';
 import userEvent from '@testing-library/user-event';
 
-// Mock all style-related imports
-jest.mock('../style', () => ({
-  style: jest.fn(() => jest.fn(() => 'mocked-style')), // Return a function that can be called
-  focusRing: jest.fn(() => ({})),
-  baseColor: jest.fn(() => ({})),
-  color: jest.fn(() => '#000000'),
-  raw: jest.fn((strings) => strings.join('')),
-  lightDark: jest.fn(() => '#000000')
-}));
-
-jest.mock('../src/style-utils', () => ({
-  controlFont: {},
-  getAllowedOverrides: jest.fn(() => ({}))
-}));
-
-jest.mock('@react-spectrum/utils', () => ({
-  useFocusableRef: jest.fn((ref) => ref),
-  useDOMRef: jest.fn((ref) => ref)
-}));
-
-jest.mock('../src/useSpectrumContextProps', () => ({
-  useSpectrumContextProps: jest.fn((props, ref) => [props, ref])
-}));
-
-jest.mock('../src/Checkbox', () => ({
-  Checkbox: ({value, isSelected, isDisabled, size}) => 
-    React.createElement('div', {
-      role: 'checkbox',
-      'aria-checked': isSelected,
-      'aria-disabled': isDisabled,
-      'data-testid': `checkbox-${value}`,
-      'data-size': size
-    }, 'Mock Checkbox')
-}));
-
-// Test helpers
 function SingleSelectBox() {
   const [value, setValue] = React.useState('');
   return (
@@ -99,8 +63,9 @@ describe('SelectBox', () => {
 
     it('handles multiple selection', async () => {
       render(<MultiSelectBox />);
-      const option1 = screen.getByDisplayValue('option1');
-      const option2 = screen.getByDisplayValue('option2');
+      const checkboxes = screen.getAllByRole('checkbox');
+      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
+      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
       
       await userEvent.click(option1);
       await userEvent.click(option2);
@@ -176,7 +141,8 @@ describe('SelectBox', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByDisplayValue('option1');
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
       expect(option1).toBeChecked();
     });
 
@@ -193,9 +159,10 @@ describe('SelectBox', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByDisplayValue('option1');
-      const option2 = screen.getByDisplayValue('option2');
-      const option3 = screen.getByDisplayValue('option3');
+      const checkboxes = screen.getAllByRole('checkbox');
+      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
+      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
+      const option3 = checkboxes.find(cb => cb.getAttribute('value') === 'option3')!;
       
       expect(option1).toBeChecked();
       expect(option2).toBeChecked();
@@ -210,11 +177,13 @@ describe('SelectBox', () => {
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
-      const option1 = screen.getByDisplayValue('option1');
-      await userEvent.hover(option1);
+      
+      const label = screen.getByText('Option 1').closest('label')!;
+      await userEvent.hover(label);
       
       await waitFor(() => {
-        expect(screen.getByTestId('checkbox-option1')).toBeInTheDocument();
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes.length).toBeGreaterThan(0);
       });
     });
 
@@ -226,8 +195,9 @@ describe('SelectBox', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByDisplayValue('option1');
-      const option2 = screen.getByDisplayValue('option2');
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
+      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
       
       expect(option1).toBeDisabled();
       expect(option2).not.toBeDisabled();
@@ -320,8 +290,8 @@ describe('SelectBox', () => {
         </SelectBoxGroup>
       );
       
-      const option = screen.getByDisplayValue('');
-      expect(option).toHaveAttribute('value', '');
+      const radio = screen.getByRole('radio');
+      expect(radio).toHaveAttribute('value', '');
     });
 
     it('handles complex children', () => {

From b0a9b78351106b7149aee7ad32f0db8e7a4cdd13 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 15 Jul 2025 13:23:13 -0700
Subject: [PATCH 4/9] selectbox refactor and tests refactor

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 142 ++++++++++++--
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  61 ++++--
 .../s2/test/SelectBox.test.tsx                | 182 +++++++++++++++---
 3 files changed, 326 insertions(+), 59 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index f257a99ae42..1ce9d35d8c5 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -49,7 +49,12 @@ export const SelectBoxItemContext = createContext<ContextValue<Partial<SelectBox
 const selectBoxStyles = style({
   ...focusRing(),
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: {
+    default: 'column',
+    orientation: {
+      horizontal: 'row'
+    }
+  },
   lineHeight: 'title',
   justifyContent: 'center',
   flexShrink: 0,
@@ -145,7 +150,67 @@ const selectBoxStyles = style({
     isSelected: 'gray-900',
     isFocusVisible: 'transparent'
   },
-  transition: 'default'
+  transition: 'default',
+  
+  gap: {
+    orientation: {
+      horizontal: 'text-to-visual'
+    }
+  }
+}, 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',
+  flexShrink: 0
+}, getAllowedOverrides());
+
+const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  gap: 'text-to-visual'
+}, getAllowedOverrides());
+
+const descriptionText = style({
+  display: {
+    default: 'none',
+    orientation: {
+      horizontal: 'block'
+    }
+  },
+  font: 'ui-sm',
+  color: 'gray-600',
+  lineHeight: 'body'
 }, getAllowedOverrides());
 
 const checkboxContainer = style({
@@ -190,20 +255,65 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       inputRef={inputRef}
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + selectBoxStyles({...renderProps, size, orientation}, props.styles)}>
-      {renderProps => (
-        <>
-          {(renderProps.isSelected || renderProps.isHovered) && (
-            <div className={checkboxContainer({...renderProps, size}, props.styles)}>
-              <Checkbox 
-                value={value}
-                isSelected={renderProps.isSelected}
-                isDisabled={isDisabled}
-                size={size} />
-            </div>
-          )}
-          {children}
-        </>
-      )}
+      {renderProps => {
+        // Separate icon and text content from children
+        const childrenArray = React.Children.toArray(children);
+        const iconElement = childrenArray.find((child: any) => child?.props?.slot === 'icon');
+        const textElement = childrenArray.find((child: any) => child?.props?.slot === 'text');
+        const descriptionElement = childrenArray.find((child: any) => child?.props?.slot === 'description');
+        const otherChildren = childrenArray.filter((child: any) => 
+          !['icon', 'text', 'description'].includes(child?.props?.slot)
+        );
+
+        return (
+          <>
+            {(renderProps.isSelected || renderProps.isHovered) && (
+              <div className={checkboxContainer({...renderProps, size}, props.styles)}>
+                <Checkbox 
+                  value={value}
+                  isSelected={renderProps.isSelected}
+                  isDisabled={isDisabled}
+                  size={size} />
+              </div>
+            )}
+            
+            {orientation === 'horizontal' ? (
+              <>
+                {iconElement && (
+                  <div className={iconContainer({...renderProps, size, orientation}, props.styles)}>
+                    {iconElement}
+                  </div>
+                )}
+                <div className={contentContainer({...renderProps, size, orientation}, props.styles)}>
+                  <div className={textContainer({...renderProps, size, orientation}, props.styles)}>
+                    {textElement}
+                    {descriptionElement && (
+                      <div className={descriptionText({...renderProps, size, orientation}, props.styles)}>
+                        {descriptionElement}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                {iconElement && (
+                  <div className={iconContainer({...renderProps, size, orientation}, props.styles)}>
+                    {iconElement}
+                  </div>
+                )}
+                <div className={textContainer({...renderProps, size, orientation}, props.styles)}>
+                  {textElement}
+                  {/* Description is hidden in vertical orientation */}
+                </div>
+              </>
+            )}
+            
+            {/* Render any other children that don't have slots */}
+            {otherChildren.length > 0 && otherChildren}
+          </>
+        );
+      }}
     </Selector>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 17db7606753..439c8bc87cd 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -16,7 +16,7 @@ import {
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useMemo, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -40,11 +40,7 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * The current selected value (controlled).
    */
-  value?: SelectBoxValueType,
-  /**
-   * The default selected value.
-   */
-  defaultValue?: SelectBoxValueType,
+  value: SelectBoxValueType,
   /**
    * The size of the SelectBoxGroup.
    * @default 'M'
@@ -132,8 +128,7 @@ interface SelectorGroupProps {
   style?: React.CSSProperties,
   className?: string,
   onChange: (value: SelectBoxValueType) => void,
-  value?: SelectBoxValueType,
-  defaultValue?: SelectBoxValueType,
+  value: SelectBoxValueType,
   isRequired?: boolean,
   isDisabled?: boolean,
   label?: ReactNode
@@ -146,7 +141,6 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
   onChange,
   value,
   style,
-  defaultValue,
   isRequired,
   isDisabled,
   label
@@ -165,13 +159,11 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
     <AriaCheckboxGroup
       {...props}
       value={ensureArray(value)}
-      defaultValue={ensureArray(defaultValue)}
       aria-label={label ? String(label) : undefined} />
   ) : (
     <AriaRadioGroup
       {...props}
       value={unwrapValue(value)}
-      defaultValue={unwrapValue(defaultValue)}
       aria-label={label ? String(label) : undefined} />
   );
 });
@@ -179,6 +171,41 @@ const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function Se
 /**
  * SelectBox groups allow users to select one or more options from a list.
  * All possible options are exposed up front for users to compare.
+ * 
+ * SelectBoxGroup is a controlled component that requires a `value` prop and
+ * `onSelectionChange` callback.
+ * 
+ * @example
+ * ```tsx
+ * // Single selection
+ * function SingleSelectExample() {
+ *   const [selected, setSelected] = React.useState('option1');
+ *   return (
+ *     <SelectBoxGroup
+ *       label="Choose an option"
+ *       value={selected}
+ *       onSelectionChange={setSelected}>
+ *       <SelectBox value="option1">Option 1</SelectBox>
+ *       <SelectBox value="option2">Option 2</SelectBox>
+ *     </SelectBoxGroup>
+ *   );
+ * }
+ * 
+ * // Multiple selection
+ * function MultiSelectExample() {
+ *   const [selected, setSelected] = React.useState(['option1']);
+ *   return (
+ *     <SelectBoxGroup
+ *       label="Choose options"
+ *       selectionMode="multiple"
+ *       value={selected}
+ *       onSelectionChange={setSelected}>
+ *       <SelectBox value="option1">Option 1</SelectBox>
+ *       <SelectBox value="option2">Option 2</SelectBox>
+ *     </SelectBoxGroup>
+ *   );
+ * }
+ * ```
  */
 export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
@@ -187,7 +214,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     label,
     children,
     onSelectionChange,
-    defaultValue,
+    value,
     selectionMode = 'single',
     size = 'M',
     orientation = 'vertical',
@@ -199,7 +226,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     UNSAFE_style
   } = props;
 
-  const [value, setValue] = useState<SelectBoxValueType | undefined>(defaultValue);
   const allowMultiSelect = selectionMode === 'multiple';
   
   const domRef = useDOMRef(ref);
@@ -220,12 +246,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     return childrenToRender;
   };
 
-  useEffect(() => {
-    if (value !== undefined) {
-      onSelectionChange(value);
-    }
-  }, [onSelectionChange, value]);
-
   // Context value
   const selectBoxContextValue = useMemo(
     () => ({
@@ -242,8 +262,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     <SelectorGroup
       allowMultiSelect={allowMultiSelect}
       value={value}
-      defaultValue={defaultValue}
-      onChange={setValue}
+      onChange={onSelectionChange}
       isRequired={isRequired}
       isDisabled={isDisabled}
       label={label}
diff --git a/packages/@react-spectrum/s2/test/SelectBox.test.tsx b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
index 9adc3639b7c..a9591a0fae4 100644
--- a/packages/@react-spectrum/s2/test/SelectBox.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBox.test.tsx
@@ -39,6 +39,7 @@ function DisabledSelectBox() {
     <SelectBoxGroup
       selectionMode="single"
       onSelectionChange={() => {}}
+      value=""
       isDisabled
       label="Disabled select test">
       <SelectBox value="option1">Option 1</SelectBox>
@@ -86,7 +87,7 @@ describe('SelectBox', () => {
   describe('Props and configuration', () => {
     it('supports different sizes', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} size="L" label="Size test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" size="L" label="Size test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -95,7 +96,7 @@ describe('SelectBox', () => {
 
     it('supports horizontal orientation', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} orientation="horizontal" label="Orientation test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" orientation="horizontal" label="Orientation test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -104,7 +105,7 @@ describe('SelectBox', () => {
 
     it('supports custom number of columns', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} numColumns={3} label="Columns test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" numColumns={3} label="Columns test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -113,7 +114,7 @@ describe('SelectBox', () => {
 
     it('supports labels with aria-label', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Choose an option">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Choose an option">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -123,7 +124,7 @@ describe('SelectBox', () => {
 
     it('supports required state', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} isRequired label="Required test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" isRequired label="Required test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -132,10 +133,10 @@ describe('SelectBox', () => {
     });
   });
 
-  describe('Controlled and uncontrolled behavior', () => {
-    it('handles default value', () => {
+  describe('Controlled behavior', () => {
+    it('handles initial value selection', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} defaultValue="option1" label="Default value test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="option1" label="Initial value test">
           <SelectBox value="option1">Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
         </SelectBoxGroup>
@@ -146,13 +147,13 @@ describe('SelectBox', () => {
       expect(option1).toBeChecked();
     });
 
-    it('handles multiple selection with default values', () => {
+    it('handles multiple selection with initial values', () => {
       render(
         <SelectBoxGroup 
           selectionMode="multiple" 
           onSelectionChange={() => {}}
-          defaultValue={['option1', 'option2']}
-          label="Multiple default test">
+          value={['option1', 'option2']}
+          label="Multiple initial test">
           <SelectBox value="option1">Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
           <SelectBox value="option3">Option 3</SelectBox>
@@ -170,10 +171,142 @@ describe('SelectBox', () => {
     });
   });
 
+  describe('Controlled values', () => {
+    it('handles controlled single selection', async () => {
+      const ControlledSingleSelect = () => {
+        const [value, setValue] = React.useState('option1');
+        return (
+          <SelectBoxGroup
+            selectionMode="single"
+            onSelectionChange={(val) => setValue(val as string)}
+            value={value}
+            label="Controlled single select">
+            <SelectBox value="option1">Option 1</SelectBox>
+            <SelectBox value="option2">Option 2</SelectBox>
+            <SelectBox value="option3">Option 3</SelectBox>
+          </SelectBoxGroup>
+        );
+      };
+
+      render(<ControlledSingleSelect />);
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
+      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      
+      expect(option1).toBeChecked();
+      expect(option2).not.toBeChecked();
+      
+      await userEvent.click(option2);
+      expect(option2).toBeChecked();
+      expect(option1).not.toBeChecked();
+    });
+
+    it('handles controlled multiple selection', async () => {
+      const ControlledMultiSelect = () => {
+        const [value, setValue] = React.useState(['option1']);
+        return (
+          <SelectBoxGroup
+            selectionMode="multiple"
+            onSelectionChange={(val) => setValue(val as string[])}
+            value={value}
+            label="Controlled multi select">
+            <SelectBox value="option1">Option 1</SelectBox>
+            <SelectBox value="option2">Option 2</SelectBox>
+            <SelectBox value="option3">Option 3</SelectBox>
+          </SelectBoxGroup>
+        );
+      };
+
+      render(<ControlledMultiSelect />);
+      const checkboxes = screen.getAllByRole('checkbox');
+      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
+      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
+      
+      expect(option1).toBeChecked();
+      expect(option2).not.toBeChecked();
+      
+      await userEvent.click(option2);
+      expect(option1).toBeChecked();
+      expect(option2).toBeChecked();
+    });
+
+         it('controlled value works as expected', () => {
+       render(
+         <SelectBoxGroup
+           selectionMode="single"
+           onSelectionChange={() => {}}
+           value="option2"
+           label="Controlled test">
+           <SelectBox value="option1">Option 1</SelectBox>
+           <SelectBox value="option2">Option 2</SelectBox>
+         </SelectBoxGroup>
+       );
+
+       const radios = screen.getAllByRole('radio');
+       const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
+       const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+       
+       expect(option1).not.toBeChecked();
+       expect(option2).toBeChecked();
+     });
+
+    it('calls onSelectionChange when controlled value changes', async () => {
+      const onSelectionChange = jest.fn();
+      const ControlledWithCallback = () => {
+        const [value, setValue] = React.useState('option1');
+        return (
+          <SelectBoxGroup
+            selectionMode="single"
+            onSelectionChange={(val) => {
+              setValue(val as string);
+              onSelectionChange(val);
+            }}
+            value={value}
+            label="Controlled callback test">
+            <SelectBox value="option1">Option 1</SelectBox>
+            <SelectBox value="option2">Option 2</SelectBox>
+          </SelectBoxGroup>
+        );
+      };
+
+      render(<ControlledWithCallback />);
+      const radios = screen.getAllByRole('radio');
+      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      
+      await userEvent.click(option2);
+      expect(onSelectionChange).toHaveBeenCalledWith('option2');
+    });
+
+    it('handles external controlled value changes', () => {
+      const ControlledExternal = ({externalValue}: {externalValue: string}) => (
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value={externalValue}
+          label="External controlled test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const {rerender} = render(<ControlledExternal externalValue="option1" />);
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
+      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      
+      expect(option1).toBeChecked();
+      expect(option2).not.toBeChecked();
+      
+      rerender(<ControlledExternal externalValue="option2" />);
+      expect(option1).not.toBeChecked();
+      expect(option2).toBeChecked();
+    });
+  });
+
   describe('Individual SelectBox behavior', () => {
     it('shows checkbox indicator when hovered', async () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Hover test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Hover test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -189,7 +322,12 @@ describe('SelectBox', () => {
 
     it('handles disabled individual items', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Individual disabled test">
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value="option2"
+          label="Individual disabled test"
+        >
           <SelectBox value="option1" isDisabled>Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
         </SelectBoxGroup>
@@ -215,7 +353,7 @@ describe('SelectBox', () => {
 
     it('validates minimum children', () => {
       render(
-        <SelectBoxGroup onSelectionChange={() => {}} label="Min children test">
+        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Min children test">
           {[]}
         </SelectBoxGroup>
       );
@@ -233,7 +371,7 @@ describe('SelectBox', () => {
       ));
       
       render(
-        <SelectBoxGroup onSelectionChange={() => {}} label="Max children test">
+        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Max children test">
           {manyChildren}
         </SelectBoxGroup>
       );
@@ -249,7 +387,7 @@ describe('SelectBox', () => {
   describe('Accessibility', () => {
     it('has proper ARIA roles', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="ARIA test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="ARIA test">
           <SelectBox value="option1">Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
           <SelectBox value="option3">Option 3</SelectBox>
@@ -261,7 +399,7 @@ describe('SelectBox', () => {
 
     it('has proper ARIA roles for multiple selection', () => {
       render(
-        <SelectBoxGroup selectionMode="multiple" onSelectionChange={() => {}} label="ARIA multi test">
+        <SelectBoxGroup selectionMode="multiple" onSelectionChange={() => {}} value={[]} label="ARIA multi test">
           <SelectBox value="option1">Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
           <SelectBox value="option3">Option 3</SelectBox>
@@ -273,7 +411,7 @@ describe('SelectBox', () => {
 
     it('associates labels correctly', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Choose option">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Choose option">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -285,7 +423,7 @@ describe('SelectBox', () => {
   describe('Edge cases', () => {
     it('handles empty value', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Empty value test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Empty value test">
           <SelectBox value="">Empty</SelectBox>
         </SelectBoxGroup>
       );
@@ -296,7 +434,7 @@ describe('SelectBox', () => {
 
     it('handles complex children', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} label="Complex children test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Complex children test">
           <SelectBox value="option1">
             <div>
               <h3>Title</h3>
@@ -312,7 +450,7 @@ describe('SelectBox', () => {
 
     it('handles different gutter widths', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} gutterWidth="compact" label="Gutter test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" gutterWidth="compact" label="Gutter test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );
@@ -321,7 +459,7 @@ describe('SelectBox', () => {
 
     it('handles emphasized style', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} isEmphasized label="Emphasized test">
+        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" isEmphasized label="Emphasized test">
           <SelectBox value="option1">Option 1</SelectBox>
         </SelectBoxGroup>
       );

From 151e4f6f626f6f7811ea95e1602d7f869afd58f1 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 15 Jul 2025 16:27:07 -0700
Subject: [PATCH 5/9] stories changes and various edits

---
 packages/@react-spectrum/s2/src/SelectBox.tsx |  87 ++++------
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 156 ++++++++----------
 packages/@react-spectrum/s2/src/index.ts      |   8 +-
 .../s2/stories/SelectBox.stories.tsx          |  46 +++++-
 4 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 1ce9d35d8c5..0fd79694656 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -61,8 +61,6 @@ const selectBoxStyles = style({
   alignItems: 'center',
   fontFamily: 'sans',
   font: 'ui',
-  
-  // Vertical orientation (default) - Fixed square dimensions
   width: {
     default: {
       size: {
@@ -74,18 +72,9 @@ const selectBoxStyles = style({
       }
     },
     orientation: {
-      horizontal: {
-        size: {
-          XS: 'auto',
-          S: 'auto',
-          M: 'auto',
-          L: 'auto',
-          XL: 'auto'
-        }
-      }
+      horizontal: 'auto'
     }
   },
-  
   height: {
     default: {
       size: {
@@ -97,30 +86,19 @@ const selectBoxStyles = style({
       }
     },
     orientation: {
-      horizontal: {
-        size: {
-          XS: 'auto',
-          S: 'auto',
-          M: 'auto',
-          L: 'auto',
-          XL: 'auto'
-        }
-      }
+      horizontal: 'auto'
     }
   },
-  
   minWidth: {
     orientation: {
       horizontal: 160
     }
   },
-  
   maxWidth: {
     orientation: {
       horizontal: 272
     }
   },
-
   padding: {
     size: {
       XS: 12,
@@ -130,9 +108,15 @@ const selectBoxStyles = style({
       XL: 28
     }
   },
-  
   borderRadius: 'lg',
-  backgroundColor: 'layer-2',
+  backgroundColor: {
+    default: 'layer-2',
+    isDisabled: 'layer-1',
+  },
+  color: {
+    isEmphasized: 'gray-900',
+    isDisabled: 'disabled'
+  },
   boxShadow: {
     default: 'emphasized',
     isHovered: 'elevated',
@@ -141,17 +125,13 @@ const selectBoxStyles = style({
   },
   position: 'relative',
   borderWidth: 2,
-  borderStyle: {
-    default: 'solid',
-    isSelected: 'solid'
-  },
+  borderStyle: 'solid',
   borderColor: {
+    // isHovered: 'gray-900',
+    // isSelected: 'gray-900',
     default: 'transparent',
-    isSelected: 'gray-900',
-    isFocusVisible: 'transparent'
   },
   transition: 'default',
-  
   gap: {
     orientation: {
       horizontal: 'text-to-visual'
@@ -186,7 +166,17 @@ const iconContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  flexShrink: 0
+  size: {
+    XS: 16,
+    S: 20,
+    M: 24,
+    L: 28,
+    XL: 32
+  },
+  flexShrink: 0,
+  color: {
+    isDisabled: 'disabled'
+  }
 }, getAllowedOverrides());
 
 const textContainer = style({
@@ -198,7 +188,10 @@ const textContainer = style({
       horizontal: 'start'
     }
   },
-  gap: 'text-to-visual'
+  gap: 'text-to-visual',
+  color: {
+    isDisabled: 'disabled'
+  }
 }, getAllowedOverrides());
 
 const descriptionText = style({
@@ -209,7 +202,10 @@ const descriptionText = style({
     }
   },
   font: 'ui-sm',
-  color: 'gray-600',
+  color: {
+    default: 'gray-600',
+    isDisabled: 'disabled'
+  },
   lineHeight: 'body'
 }, getAllowedOverrides());
 
@@ -229,28 +225,20 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
   let inputRef = useRef<HTMLInputElement | null>(null);
   let domRef = useFocusableRef(ref, inputRef);
   
-  let groupContext = useContext(SelectBoxContext);
   let {
     allowMultiSelect = false,
     size = 'M',
     orientation = 'vertical'
-  } = groupContext;
+  } = useContext(SelectBoxContext);
 
   const Selector = allowMultiSelect ? AriaCheckbox : AriaRadio;
   
-  // Handle controlled selection
-  const handleSelectionChange = (selected: boolean) => {
-    if (onChange) {
-      onChange(selected);
-    }
-  };
-  
   return (
     <Selector
       value={value}
       isDisabled={isDisabled}
       isSelected={isSelected}
-      onChange={handleSelectionChange}
+      onChange={() => onChange?.(isSelected ?? false)}
       ref={domRef}
       inputRef={inputRef}
       style={UNSAFE_style}
@@ -267,13 +255,13 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
 
         return (
           <>
-            {(renderProps.isSelected || renderProps.isHovered) && (
+            {(renderProps.isSelected || renderProps.isHovered || renderProps.isFocusVisible) && (
               <div className={checkboxContainer({...renderProps, size}, props.styles)}>
                 <Checkbox 
                   value={value}
                   isSelected={renderProps.isSelected}
                   isDisabled={isDisabled}
-                  size={size} />
+                  size={size === 'XS' ? 'S' : size} />
               </div>
             )}
             
@@ -304,12 +292,9 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
                 )}
                 <div className={textContainer({...renderProps, size, orientation}, props.styles)}>
                   {textElement}
-                  {/* Description is hidden in vertical orientation */}
                 </div>
               </>
             )}
-            
-            {/* Render any other children that don't have slots */}
             {otherChildren.length > 0 && otherChildren}
           </>
         );
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 439c8bc87cd..4cabddebeae 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -41,11 +41,15 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * 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',
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   /**
    * The axis the SelectBox elements should align with.
    * @default 'vertical'
@@ -77,13 +81,11 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
-  value?: SelectBoxValueType,
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
   isEmphasized?: boolean
 }
 
-// Utility functions
 const unwrapValue = (value: SelectBoxValueType | undefined): string | undefined => {
   if (Array.isArray(value)) {
     return value[0];
@@ -121,92 +123,25 @@ const gridStyles = style({
 }, getAllowedOverrides());
 
 
-// Selector Group component
 interface SelectorGroupProps {
   allowMultiSelect: boolean,
   children: ReactNode,
-  style?: React.CSSProperties,
-  className?: string,
+  UNSAFE_className?: string,
+  UNSAFE_style?: React.CSSProperties,
+  styles?: StyleProps,
   onChange: (value: SelectBoxValueType) => void,
-  value: SelectBoxValueType,
+  value?: SelectBoxValueType,
+  defaultValue?: SelectBoxValueType,
   isRequired?: boolean,
   isDisabled?: boolean,
   label?: ReactNode
 }
 
-const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({
-  allowMultiSelect,
-  children,
-  className,
-  onChange,
-  value,
-  style,
-  isRequired,
-  isDisabled,
-  label
-}, ref) {
-  const props = { 
-    isRequired,
-    isDisabled,
-    className,
-    style,
-    children,
-    onChange,
-    ref
-  };
-
-  return allowMultiSelect ? (
-    <AriaCheckboxGroup
-      {...props}
-      value={ensureArray(value)}
-      aria-label={label ? String(label) : undefined} />
-  ) : (
-    <AriaRadioGroup
-      {...props}
-      value={unwrapValue(value)}
-      aria-label={label ? String(label) : undefined} />
-  );
-});
-
 /**
  * SelectBox groups allow users to select one or more options from a list.
  * All possible options are exposed up front for users to compare.
- * 
- * SelectBoxGroup is a controlled component that requires a `value` prop and
- * `onSelectionChange` callback.
- * 
- * @example
- * ```tsx
- * // Single selection
- * function SingleSelectExample() {
- *   const [selected, setSelected] = React.useState('option1');
- *   return (
- *     <SelectBoxGroup
- *       label="Choose an option"
- *       value={selected}
- *       onSelectionChange={setSelected}>
- *       <SelectBox value="option1">Option 1</SelectBox>
- *       <SelectBox value="option2">Option 2</SelectBox>
- *     </SelectBoxGroup>
- *   );
- * }
- * 
- * // Multiple selection
- * function MultiSelectExample() {
- *   const [selected, setSelected] = React.useState(['option1']);
- *   return (
- *     <SelectBoxGroup
- *       label="Choose options"
- *       selectionMode="multiple"
- *       value={selected}
- *       onSelectionChange={setSelected}>
- *       <SelectBox value="option1">Option 1</SelectBox>
- *       <SelectBox value="option2">Option 2</SelectBox>
- *     </SelectBoxGroup>
- *   );
- * }
- * ```
  */
+
 export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
   
@@ -214,7 +149,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     label,
     children,
     onSelectionChange,
-    value,
+    defaultValue,
     selectionMode = 'single',
     size = 'M',
     orientation = 'vertical',
@@ -250,33 +185,72 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   const selectBoxContextValue = useMemo(
     () => ({
       allowMultiSelect,
-      value,
       size,
       orientation,
       isEmphasized
     }),
-    [allowMultiSelect, value, size, orientation, isEmphasized]
+    [allowMultiSelect, size, orientation, isEmphasized]
   );
 
   return (
     <SelectorGroup
       allowMultiSelect={allowMultiSelect}
-      value={value}
+      value={props.value}
+      defaultValue={defaultValue}
       onChange={onSelectionChange}
       isRequired={isRequired}
       isDisabled={isDisabled}
       label={label}
       ref={domRef}
-      className={gridStyles({gutterWidth, orientation}, props.styles)}
-      style={{
-        ...UNSAFE_style,
-        gridTemplateColumns: `repeat(${numColumns}, 1fr)`
-      }}>
-      <SelectBoxContext.Provider value={selectBoxContextValue}>
-        {getChildrenToRender().map((child) => {
-          return child as ReactElement;
-        })}
-      </SelectBoxContext.Provider>
+      UNSAFE_style={UNSAFE_style}>
+      <div
+        className={gridStyles({gutterWidth, orientation}, props.styles)}
+        style={{
+          gridTemplateColumns: `repeat(${numColumns}, 1fr)`
+        }}>
+        <SelectBoxContext.Provider value={selectBoxContextValue}>
+          {getChildrenToRender().map((child) => {
+            return child as ReactElement;
+          })}
+        </SelectBoxContext.Provider>
+      </div>
     </SelectorGroup>
   );
 });
+
+const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({
+  allowMultiSelect,
+  children,
+  UNSAFE_className,
+  onChange,
+  value,
+  defaultValue,
+  UNSAFE_style,
+  isRequired,
+  isDisabled,
+  label
+}, ref) {
+  const baseProps = { 
+    isRequired,
+    isDisabled,
+    UNSAFE_className,
+    UNSAFE_style,
+    children,
+    onChange,
+    ref
+  };
+
+  return allowMultiSelect ? (
+    <AriaCheckboxGroup
+      {...baseProps}
+      value={value ? ensureArray(value) : undefined}
+      defaultValue={defaultValue ? ensureArray(defaultValue) : undefined}
+      aria-label={label ? String(label) : undefined} />
+  ) : (
+    <AriaRadioGroup
+      {...baseProps}
+      value={value ? unwrapValue(value) : undefined}
+      defaultValue={defaultValue ? unwrapValue(defaultValue) : undefined}
+      aria-label={label ? String(label) : undefined} />
+  );
+});
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 843be0d6af3..efa16c2fe0a 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -69,11 +69,11 @@ export {Provider} from './Provider';
 export {Radio} from './Radio';
 export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
-export {SelectBox} from './SelectBox';
-export {SelectBoxGroup, SelectBoxContext} from './SelectBoxGroup';
 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,10 +148,10 @@ export type {ProgressCircleProps} from './ProgressCircle';
 export type {ProviderProps} from './Provider';
 export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
-export type {SelectBoxProps} from './SelectBox';
-export type {SelectBoxGroupProps, SelectBoxValueType} from './SelectBoxGroup';
 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/SelectBox.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
index 2e0c0b2696e..c897bb79dc5 100644
--- a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
@@ -56,15 +56,18 @@ export const Example: Story = {
       {...args}
       onSelectionChange={(v) => console.log('Selection changed:', v)}>
       <SelectBox value="select-box-label">
-        <Server slot="icon" />
+        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
+        <Text slot="description">Select Box Label</Text>
         <Text slot="text">Select Box Label</Text>
       </SelectBox>
       <SelectBox value="select-box-label2">
-        <Server slot="icon" />
+        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
+        <Text slot="description">Select Box Label</Text>
         <Text slot="text">Select Box Label</Text>
       </SelectBox>
       <SelectBox value="select-box-label3">
-        <Server slot="icon" />
+        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
+        <Text slot="description">Select Box Label</Text>
         <Text slot="text">Select Box Label</Text>
       </SelectBox>
     </SelectBoxGroup>
@@ -163,3 +166,40 @@ export const HorizontalOrientation: Story = {
   },
   name: 'Horizontal orientation'
 };
+
+export const IndividualDisabled: Story = {
+  args: {
+    numColumns: 2,
+    label: 'Choose options (some disabled)',
+    selectionMode: 'multiple'
+  },
+  render: (args) => {
+    return (
+      <SelectBoxGroup
+        {...args}
+        onSelectionChange={(v) => action('onSelectionChange')(v)}>
+        <SelectBox value="option1">
+          <StarIcon slot="icon" />
+          <Text slot="text">Available Option</Text>
+          <Text slot="description">This option is enabled</Text>
+        </SelectBox>
+        <SelectBox value="option2" isDisabled>
+          <StarIcon slot="icon" />
+          <Text slot="text">Disabled Option</Text>
+          <Text slot="description">This option is disabled</Text>
+        </SelectBox>
+        <SelectBox value="option3">
+          <StarIcon slot="icon" />
+          <Text slot="text">Another Available</Text>
+          <Text slot="description">This option is also enabled</Text>
+        </SelectBox>
+        <SelectBox value="option4" isDisabled>
+          <StarIcon slot="icon" />
+          <Text slot="text">Another Disabled</Text>
+          <Text slot="description">This option is also disabled</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    );
+  },
+  name: 'Individual disabled SelectBoxes'
+};

From d64c17be0ea24311aa399b38522f0ef5a1658aba Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Wed, 16 Jul 2025 16:56:30 -0700
Subject: [PATCH 6/9] replaced aria components with a gridlist

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 210 +++++----
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 381 ++++++++++++-----
 .../s2/stories/SelectBox.stories.tsx          | 205 ---------
 .../s2/stories/SelectBoxGroup.stories.tsx     | 403 ++++++++++++++++++
 ...ctBox.test.tsx => SelectBoxGroup.test.tsx} |  41 +-
 5 files changed, 814 insertions(+), 426 deletions(-)
 delete mode 100644 packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
 rename packages/@react-spectrum/s2/test/{SelectBox.test.tsx => SelectBoxGroup.test.tsx} (95%)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 0fd79694656..c70854584bb 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -9,18 +9,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox as AriaCheckbox, Radio as AriaRadio, CheckboxProps, ContextValue, RadioProps} from 'react-aria-components';
 import {Checkbox} from './Checkbox';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {focusRing, style, lightDark} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {SelectBoxContext} from './SelectBoxGroup';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxProps extends 
-  Omit<CheckboxProps & RadioProps, 'className' | 'style' | 'children'>, StyleProps {
+export interface SelectBoxProps extends StyleProps {
   /**
    * The value of the SelectBox.
    */
@@ -32,22 +30,13 @@ export interface SelectBoxProps extends
   /**
    * Whether the SelectBox is disabled.
    */
-  isDisabled?: boolean,
-  /**
-   * Whether the SelectBox is selected (controlled).
-   */
-  isSelected?: boolean,
-  /**
-   * Handler called when the SelectBox selection changes.
-   */
-  onChange?: (isSelected: boolean) => void
+  isDisabled?: boolean
 }
 
-export const SelectBoxItemContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SelectBoxItemContext = createContext<any>(null);
 
 // Simple basic styling with proper dark mode support
 const selectBoxStyles = style({
-  ...focusRing(),
   display: 'flex',
   flexDirection: {
     default: 'column',
@@ -59,7 +48,6 @@ const selectBoxStyles = style({
   justifyContent: 'center',
   flexShrink: 0,
   alignItems: 'center',
-  fontFamily: 'sans',
   font: 'ui',
   width: {
     default: {
@@ -112,6 +100,7 @@ const selectBoxStyles = style({
   backgroundColor: {
     default: 'layer-2',
     isDisabled: 'layer-1',
+    isSelected: 'layer-2'
   },
   color: {
     isEmphasized: 'gray-900',
@@ -123,20 +112,27 @@ const selectBoxStyles = style({
     isSelected: 'elevated',
     forcedColors: 'none'
   },
+  outlineStyle: 'none',
   position: 'relative',
   borderWidth: 2,
   borderStyle: 'solid',
   borderColor: {
-    // isHovered: 'gray-900',
-    // isSelected: 'gray-900',
+    // default: 'transparent',
+    // isSelected: lightDark('accent-900', 'accent-700')
     default: 'transparent',
+    isSelected: 'gray-900',
+    isFocusVisible: 'blue-900'
   },
   transition: 'default',
   gap: {
     orientation: {
       horizontal: 'text-to-visual'
     }
-  }
+  },
+  cursor: {
+    default: 'pointer',
+    isDisabled: 'default'
+  },
 }, getAllowedOverrides());
 
 const contentContainer = style({
@@ -215,90 +211,118 @@ const checkboxContainer = style({
   left: 16
 }, getAllowedOverrides());
 
+// Context for passing GridListItem render props down to SelectBox
+const SelectBoxRenderPropsContext = createContext<{
+  isHovered?: boolean;
+  isFocusVisible?: boolean;
+  isPressed?: boolean;
+}>({});
+
 /**
  * SelectBox components allow users to select options from a list.
- * They can behave as radio buttons (single selection) or checkboxes (multiple selection).
+ * Works as content within a GridListItem for automatic grid navigation.
  */
-export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxItemContext);
-  let {children, value, isDisabled = false, isSelected, onChange, UNSAFE_className = '', UNSAFE_style} = props;
-  let inputRef = useRef<HTMLInputElement | null>(null);
-  let domRef = useFocusableRef(ref, inputRef);
+  let {children, value, isDisabled: individualDisabled = false, UNSAFE_className = '', UNSAFE_style} = props;
+  let divRef = useRef<HTMLDivElement | null>(null);
+  let domRef = useFocusableRef(ref, divRef);
   
+  let contextValue = useContext(SelectBoxContext);
   let {
-    allowMultiSelect = false,
-    size = 'M',
-    orientation = 'vertical'
-  } = useContext(SelectBoxContext);
+    size = 'M',  // Match SelectBoxGroup default
+    orientation = 'vertical',
+    selectedKeys,
+    isDisabled: groupDisabled = false
+  } = contextValue;
+
+  // Access GridListItem render props from context
+  let renderProps = useContext(SelectBoxRenderPropsContext);
+
+  // Merge individual and group disabled states
+  const isDisabled = individualDisabled || groupDisabled;
+
+  // Determine if this item is selected based on the parent's selectedKeys
+  const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
 
-  const Selector = allowMultiSelect ? AriaCheckbox : AriaRadio;
+  // Show checkbox when selected, disabled, or hovered
+  const showCheckbox = isSelected || isDisabled || renderProps.isHovered;
   
   return (
-    <Selector
-      value={value}
-      isDisabled={isDisabled}
-      isSelected={isSelected}
-      onChange={() => onChange?.(isSelected ?? false)}
+    <div
       ref={domRef}
-      inputRef={inputRef}
-      style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + selectBoxStyles({...renderProps, size, orientation}, props.styles)}>
-      {renderProps => {
-        // Separate icon and text content from children
-        const childrenArray = React.Children.toArray(children);
-        const iconElement = childrenArray.find((child: any) => child?.props?.slot === 'icon');
-        const textElement = childrenArray.find((child: any) => child?.props?.slot === 'text');
-        const descriptionElement = childrenArray.find((child: any) => child?.props?.slot === 'description');
-        const otherChildren = childrenArray.filter((child: any) => 
-          !['icon', 'text', 'description'].includes(child?.props?.slot)
-        );
-
-        return (
-          <>
-            {(renderProps.isSelected || renderProps.isHovered || renderProps.isFocusVisible) && (
-              <div className={checkboxContainer({...renderProps, size}, props.styles)}>
-                <Checkbox 
-                  value={value}
-                  isSelected={renderProps.isSelected}
-                  isDisabled={isDisabled}
-                  size={size === 'XS' ? 'S' : size} />
-              </div>
-            )}
-            
-            {orientation === 'horizontal' ? (
-              <>
-                {iconElement && (
-                  <div className={iconContainer({...renderProps, size, orientation}, props.styles)}>
-                    {iconElement}
-                  </div>
-                )}
-                <div className={contentContainer({...renderProps, size, orientation}, props.styles)}>
-                  <div className={textContainer({...renderProps, size, orientation}, props.styles)}>
-                    {textElement}
-                    {descriptionElement && (
-                      <div className={descriptionText({...renderProps, size, orientation}, props.styles)}>
-                        {descriptionElement}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </>
-            ) : (
-              <>
-                {iconElement && (
-                  <div className={iconContainer({...renderProps, size, orientation}, props.styles)}>
-                    {iconElement}
-                  </div>
-                )}
-                <div className={textContainer({...renderProps, size, orientation}, props.styles)}>
-                  {textElement}
+      className={selectBoxStyles({
+        size, 
+        orientation, 
+        isDisabled,
+        isSelected,
+        isHovered: renderProps.isHovered || false,
+        isFocusVisible: renderProps.isFocusVisible || false
+      }, props.styles)}
+      style={UNSAFE_style}>
+      
+      {/* Show selection indicator */}
+      {showCheckbox && (
+        <div className={checkboxContainer(null, props.styles)}>
+          <div style={{pointerEvents: 'none'}}>
+            <Checkbox 
+              isSelected={isSelected}
+              isDisabled={isDisabled}
+              size={size === 'XS' ? 'S' : size}
+              isReadOnly
+              />
+          </div>
+        </div>
+      )}
+      
+      {/* Content layout */}
+      {orientation === 'horizontal' ? (
+        <>
+          {/* Icon */}
+          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+            <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+            </div>
+          )}
+          
+          {/* Content container for horizontal layout */}
+          <div className={contentContainer({size, orientation}, props.styles)}>
+            <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+              {/* Text */}
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
+              
+              {/* Description */}
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description') && (
+                <div className={descriptionText({size, orientation, isDisabled}, props.styles)}>
+                  {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description')}
                 </div>
-              </>
-            )}
-            {otherChildren.length > 0 && otherChildren}
-          </>
-        );
-      }}
-    </Selector>
+              )}
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Icon */}
+          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+            <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
+              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+            </div>
+          )}
+          
+          {/* Text container for vertical layout */}
+          <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+            {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
+          </div>
+        </>
+      )}
+      
+      {/* Other children */}
+      {React.Children.toArray(children).filter((child: any) => 
+        !['icon', 'text', 'description'].includes(child?.props?.slot)
+      )}
+    </div>
   );
 });
+
+// Export the context for use in SelectBoxGroup
+export {SelectBoxRenderPropsContext};
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 4cabddebeae..f3dea51753c 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -10,16 +10,19 @@
  */
 
 import {
-  CheckboxGroup as AriaCheckboxGroup,
-  RadioGroup as AriaRadioGroup,
-  ContextValue
+  GridList,
+  GridListItem,
+  ContextValue,
+  Text
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps, Key, Selection} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactElement, ReactNode, useMemo, useState} from 'react';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useMemo, useId, useEffect, useRef} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
+import {useControlledState} from '@react-stately/utils';
+import {SelectBoxRenderPropsContext} from './SelectBox';
 
 export type SelectBoxValueType = string | string[];
 
@@ -40,7 +43,7 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * The current selected value (controlled).
    */
-  value: SelectBoxValueType,
+  value?: SelectBoxValueType,
   /**
    * The default selected value.
    */
@@ -76,31 +79,56 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * Whether the SelectBoxGroup is disabled.
    */
-  isDisabled?: boolean
+  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
 }
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
-  isEmphasized?: boolean
+  isEmphasized?: boolean,
+  isDisabled?: boolean,
+  selectedKeys?: Selection,
+  onSelectionChange?: (keys: Selection) => void
 }
 
-const unwrapValue = (value: SelectBoxValueType | undefined): string | undefined => {
+const convertValueToSelection = (value: SelectBoxValueType | undefined, selectionMode: 'single' | 'multiple'): Selection => {
+  if (value === undefined) {
+    return selectionMode === 'multiple' ? new Set() : new Set();
+  }
+  
   if (Array.isArray(value)) {
-    return value[0];
+    return new Set(value);
   }
-  return value;
+  
+  return selectionMode === 'multiple' ? new Set([value]) : new Set([value]);
 };
 
-const ensureArray = (value: SelectBoxValueType | undefined): string[] => {
-  if (value === undefined) {
-    return [];
+const convertSelectionToValue = (selection: Selection, selectionMode: 'single' | 'multiple'): SelectBoxValueType => {
+  // Handle 'all' selection
+  if (selection === 'all') {
+    return selectionMode === 'multiple' ? [] : '';
   }
-  if (Array.isArray(value)) {
-    return value;
+  
+  const keys = Array.from(selection).map(key => String(key));
+  
+  if (selectionMode === 'multiple') {
+    return keys;
   }
-  return [value];
+  
+  return keys[0] || '';
 };
 
 export const SelectBoxContext = createContext<SelectBoxContextValue>({
@@ -119,29 +147,77 @@ const gridStyles = style({
       compact: 8,
       spacious: 24
     }
+  },
+  // Override default GridList styles to work with our grid layout
+  '&[role="grid"]': {
+    display: 'grid'
   }
 }, getAllowedOverrides());
 
+const containerStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
+}, getAllowedOverrides());
 
-interface SelectorGroupProps {
-  allowMultiSelect: boolean,
-  children: ReactNode,
-  UNSAFE_className?: string,
-  UNSAFE_style?: React.CSSProperties,
-  styles?: StyleProps,
-  onChange: (value: SelectBoxValueType) => void,
-  value?: SelectBoxValueType,
-  defaultValue?: SelectBoxValueType,
+const errorMessageStyles = style({
+  color: 'negative',
+  font: 'ui-sm'
+}, getAllowedOverrides());
+
+interface FormIntegrationProps {
+  name?: string,
+  value: SelectBoxValueType,
   isRequired?: boolean,
-  isDisabled?: boolean,
-  label?: ReactNode
+  isInvalid?: boolean
+}
+
+// Hidden form inputs for form integration
+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);
   
@@ -158,99 +234,190 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     gutterWidth = 'default',
     isRequired = false,
     isDisabled = false,
+    name,
+    errorMessage,
+    isInvalid = false,
     UNSAFE_style
   } = props;
 
-  const allowMultiSelect = selectionMode === 'multiple';
-  
   const domRef = useDOMRef(ref);
+  const gridId = useId();
+  const errorId = useId();
 
-  const getChildrenToRender = () => {
-    const childrenToRender = React.Children.toArray(children).filter((x) => x);
-    try {
-      const childrenLength = childrenToRender.length;
-      if (childrenLength <= 0) {
-        throw new Error('Invalid content. SelectBox must have at least a title.');
-      }
-      if (childrenLength > 9) {
-        throw new Error('Invalid content. SelectBox cannot have more than 9 children.');
+  // Convert between our API and GridList selection API
+  const [selectedKeys, setSelectedKeys] = useControlledState(
+    props.value !== undefined ? convertValueToSelection(props.value, selectionMode) : undefined,
+    convertValueToSelection(defaultValue, selectionMode),
+    (selection) => {
+      const value = convertSelectionToValue(selection, selectionMode);
+
+      onSelectionChange(value);
+    }
+  );
+
+
+
+  // Handle validation
+  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;
+
+  // Extract SelectBox children and convert to GridListItems
+  const childrenArray = React.Children.toArray(children).filter((x) => x);
+  
+  // Build disabled keys set for individual disabled items
+  const disabledKeys = useMemo(() => {
+    if (isDisabled) {
+      return 'all'; // Entire group is disabled
+    }
+    
+    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);
+        }
       }
-    } catch (e) {
-      console.error(e);
+    });
+    
+    return disabled.size > 0 ? disabled : undefined;
+  }, [isDisabled, childrenArray]);
+  
+  // Validate children count
+  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.');
     }
-    return childrenToRender;
-  };
+  }, [childrenArray.length]);
 
-  // Context value
+  // Context value for child SelectBox components
   const selectBoxContextValue = useMemo(
-    () => ({
-      allowMultiSelect,
-      size,
-      orientation,
-      isEmphasized
-    }),
-    [allowMultiSelect, size, orientation, isEmphasized]
+    () => {
+      const contextValue = {
+        allowMultiSelect: selectionMode === 'multiple',
+        size,
+        orientation,
+        isEmphasized,
+        isDisabled,
+        selectedKeys,
+        onSelectionChange: setSelectedKeys
+      };
+      return contextValue;
+    },
+    [selectionMode, size, orientation, isEmphasized, isDisabled, selectedKeys, setSelectedKeys]
   );
 
+  const currentValue = convertSelectionToValue(selectedKeys, selectionMode);
+
   return (
-    <SelectorGroup
-      allowMultiSelect={allowMultiSelect}
-      value={props.value}
-      defaultValue={defaultValue}
-      onChange={onSelectionChange}
-      isRequired={isRequired}
-      isDisabled={isDisabled}
-      label={label}
-      ref={domRef}
-      UNSAFE_style={UNSAFE_style}>
-      <div
+    <div
+      className={containerStyles(null, props.styles)}
+      style={UNSAFE_style}
+      ref={domRef}>
+      
+      {/* Form integration */}
+      <FormIntegration
+        name={name}
+        value={currentValue}
+        isRequired={isRequired}
+        isInvalid={hasValidationErrors}
+      />
+      
+      {/* Label */}
+      {label && (
+        <Text slot="label" id={`${gridId}-label`}>
+          {label}
+          {isRequired && <span aria-label="required"> *</span>}
+        </Text>
+      )}
+      
+      {/* Grid List with automatic grid navigation */}
+      <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)`
         }}>
-        <SelectBoxContext.Provider value={selectBoxContextValue}>
-          {getChildrenToRender().map((child) => {
-            return child as ReactElement;
-          })}
-        </SelectBoxContext.Provider>
-      </div>
-    </SelectorGroup>
+        
+        {childrenArray.map((child, index) => {
+          if (!React.isValidElement(child)) return null;
+          
+          const childElement = child as ReactElement<{value?: string}>;
+          const childValue = childElement.props?.value || String(index);
+          
+          // Extract text content for accessibility
+          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 || '');
+            }
+            
+            // Fallback to any text content
+            const textContent = children
+              .filter((child: any) => typeof child === 'string')
+              .join(' ');
+            
+            return textContent || childValue;
+          };
+          
+          const textValue = getTextValue(childElement);
+          
+          // Convert SelectBox to GridListItem with render props
+          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>
+      
+      {/* Error message */}
+      {hasValidationErrors && errorMessage && (
+        <Text
+          slot="errorMessage"
+          id={errorId}
+          className={errorMessageStyles(null, props.styles)}>
+          {errorMessage}
+        </Text>
+      )}
+    </div>
   );
 });
-
-const SelectorGroup = forwardRef<HTMLDivElement, SelectorGroupProps>(function SelectorGroupComponent({
-  allowMultiSelect,
-  children,
-  UNSAFE_className,
-  onChange,
-  value,
-  defaultValue,
-  UNSAFE_style,
-  isRequired,
-  isDisabled,
-  label
-}, ref) {
-  const baseProps = { 
-    isRequired,
-    isDisabled,
-    UNSAFE_className,
-    UNSAFE_style,
-    children,
-    onChange,
-    ref
-  };
-
-  return allowMultiSelect ? (
-    <AriaCheckboxGroup
-      {...baseProps}
-      value={value ? ensureArray(value) : undefined}
-      defaultValue={defaultValue ? ensureArray(defaultValue) : undefined}
-      aria-label={label ? String(label) : undefined} />
-  ) : (
-    <AriaRadioGroup
-      {...baseProps}
-      value={value ? unwrapValue(value) : undefined}
-      defaultValue={defaultValue ? unwrapValue(defaultValue) : undefined}
-      aria-label={label ? String(label) : undefined} />
-  );
-});
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
deleted file mode 100644
index c897bb79dc5..00000000000
--- a/packages/@react-spectrum/s2/stories/SelectBox.stories.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-/*************************************************************************
- * 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 {createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
-import type {Meta, StoryObj} from '@storybook/react';
-import React from 'react';
-import Server from '../spectrum-illustrations/linear/Server';
-import StarSVG from '../s2wf-icons/S2_Icon_Star_20_N.svg';
-
-const StarIcon = createIcon(StarSVG);
-
-const meta: Meta<typeof SelectBoxGroup> = {
-  component: SelectBoxGroup,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onSelectionChange: {table: {category: 'Events'}},
-    label: {control: {type: 'text'}},
-    description: {control: {type: 'text'}},
-    errorMessage: {control: {type: 'text'}},
-    children: {table: {disable: true}}
-  },
-  title: 'SelectBox'
-};
-
-export default meta;
-type Story = StoryObj<typeof SelectBoxGroup>;
-
-export const Example: Story = {
-  args: {
-    label: 'Choose an option',
-    orientation: 'vertical',
-    necessityIndicator: 'label',
-    size: 'M',
-    labelPosition: 'side'
-  },
-  render: (args) => (
-    <SelectBoxGroup
-      {...args}
-      onSelectionChange={(v) => console.log('Selection changed:', v)}>
-      <SelectBox value="select-box-label">
-        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
-        <Text slot="description">Select Box Label</Text>
-        <Text slot="text">Select Box Label</Text>
-      </SelectBox>
-      <SelectBox value="select-box-label2">
-        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
-        <Text slot="description">Select Box Label</Text>
-        <Text slot="text">Select Box Label</Text>
-      </SelectBox>
-      <SelectBox value="select-box-label3">
-        <Server slot="icon" size={args.size === 'XS' || args.size === 'XL' ? undefined : args.size} />
-        <Text slot="description">Select Box Label</Text>
-        <Text slot="text">Select Box Label</Text>
-      </SelectBox>
-    </SelectBoxGroup>
-  )
-};
-
-export const SingleSelectNumColumns: Story = {
-  args: {
-    numColumns: 2,
-    label: 'Favorite city',
-    size: 'XL',
-    gutterWidth: 'default'
-  },
-  render: (args) => {
-    return (
-      <SelectBoxGroup
-        {...args}
-        onSelectionChange={(v) => action('onSelectionChange')(v)}>
-        <SelectBox value="Paris">
-          <StarIcon slot="icon" />
-          <Text slot="text">Paris</Text>
-          <Text slot="description">France</Text>
-        </SelectBox>
-        <SelectBox value="Rome">
-          <StarIcon slot="icon" />
-          <Text slot="text">Rome</Text>
-          <Text slot="description">Italy</Text>
-        </SelectBox>
-        <SelectBox value="San Francisco">
-          <StarIcon slot="icon" />
-          <Text slot="text">San Francisco</Text>
-          <Text slot="description">USA</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-    );
-  },
-  name: 'Multiple columns'
-};
-
-export const MultipleSelection: Story = {
-  args: {
-    numColumns: 1,
-    label: 'Favorite cities',
-    selectionMode: 'multiple'
-  },
-  render: (args) => {
-    return (
-      <SelectBoxGroup
-        {...args}
-        onSelectionChange={(v) => action('onSelectionChange')(v)}>
-        <SelectBox value="Paris">
-          {/* <StarIcon slot="icon" /> */}
-          <Text slot="text">Paris</Text>
-          <Text slot="description">France</Text>
-        </SelectBox>
-        <SelectBox value="Rome">
-          {/* <StarIcon slot="icon" /> */}
-          <Text slot="text">Rome</Text>
-          <Text slot="description">Italy</Text>
-        </SelectBox>
-        <SelectBox value="San Francisco">
-          {/* <StarIcon slot="icon" /> */}
-          <Text slot="text">San Francisco</Text>
-          <Text slot="description">USA</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-    );
-  },
-  name: 'Multiple selection mode'
-};
-
-export const HorizontalOrientation: Story = {
-  args: {
-    orientation: 'horizontal',
-    label: 'Favorite cities'
-  },
-  render: (args) => {
-    return (
-      <SelectBoxGroup
-        {...args}
-        onSelectionChange={(v) => action('onSelectionChange')(v)}>
-        <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="San Francisco">
-          <Text slot="text">San Francisco</Text>
-          <Text slot="description">USA</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-    );
-  },
-  name: 'Horizontal orientation'
-};
-
-export const IndividualDisabled: Story = {
-  args: {
-    numColumns: 2,
-    label: 'Choose options (some disabled)',
-    selectionMode: 'multiple'
-  },
-  render: (args) => {
-    return (
-      <SelectBoxGroup
-        {...args}
-        onSelectionChange={(v) => action('onSelectionChange')(v)}>
-        <SelectBox value="option1">
-          <StarIcon slot="icon" />
-          <Text slot="text">Available Option</Text>
-          <Text slot="description">This option is enabled</Text>
-        </SelectBox>
-        <SelectBox value="option2" isDisabled>
-          <StarIcon slot="icon" />
-          <Text slot="text">Disabled Option</Text>
-          <Text slot="description">This option is disabled</Text>
-        </SelectBox>
-        <SelectBox value="option3">
-          <StarIcon slot="icon" />
-          <Text slot="text">Another Available</Text>
-          <Text slot="description">This option is also enabled</Text>
-        </SelectBox>
-        <SelectBox value="option4" isDisabled>
-          <StarIcon slot="icon" />
-          <Text slot="text">Another Disabled</Text>
-          <Text slot="description">This option is also disabled</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-    );
-  },
-  name: 'Individual disabled SelectBoxes'
-};
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..813247812fe
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -0,0 +1,403 @@
+/*************************************************************************
+ * 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 type { Meta, StoryObj } from "@storybook/react";
+import { SelectBox, SelectBoxGroup, Text, createIcon } from "../src";
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import Server from "../spectrum-illustrations/linear/Server";
+import AlertNotice from "../spectrum-illustrations/linear/AlertNotice";
+import Paperairplane from "../spectrum-illustrations/linear/Paperairplane";
+import StarSVG from "../s2wf-icons/S2_Icon_Star_20_N.svg";
+import StarFilledSVG from "../s2wf-icons/S2_Icon_StarFilled_20_N.svg";
+
+const StarIcon = createIcon(StarSVG);
+const StarFilledIcon = createIcon(StarFilledSVG);
+
+const meta: Meta<typeof SelectBoxGroup> = {
+  title: "SelectBoxGroup (Collection)",
+  component: SelectBoxGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    selectionMode: {
+      control: "select",
+      options: ["single", "multiple"],
+    },
+    size: {
+      control: "select",
+      options: ["XS", "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,
+    isEmphasized: 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 (Use Arrow Keys)",
+    numColumns: 3,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <p style={{ marginBottom: 16, fontSize: 14, color: "#666" }}>
+        Focus any item and use arrow keys to navigate:
+        <br />• ↑↓ moves vertically (same column)
+        <br />• ←→ moves horizontally (same row)
+      </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>
+  ),
+};
+
+// Form Integration
+export const FormIntegration: Story = {
+  args: {
+    label: "Select your option",
+    name: "user_preference",
+    isRequired: true,
+  },
+  render: (args) => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        action("Form submitted")(Object.fromEntries(formData));
+      }}
+    >
+      <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>
+        <SelectBox value="option3">
+          <Text slot="text">Option 3</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+      <button type="submit" style={{ marginTop: 16 }}>
+        Submit Form
+      </button>
+    </form>
+  ),
+};
+
+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 }}>
+      {(["XS", "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">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</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>
+  ),
+};
+
+// Controlled Mode
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.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>
+    );
+  },
+};
+
+// Dynamic Icons
+export const DynamicIcons: Story = {
+  args: {
+    label: "Rate these items",
+  },
+  render: (args) => {
+    const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
+      new Set(),
+    );
+
+    return (
+      <SelectBoxGroup
+        {...args}
+        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>
+    );
+  },
+};
+
+// Multiple Columns
+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>
+  ),
+};
diff --git a/packages/@react-spectrum/s2/test/SelectBox.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
similarity index 95%
rename from packages/@react-spectrum/s2/test/SelectBox.test.tsx
rename to packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index a9591a0fae4..2fc4319723b 100644
--- a/packages/@react-spectrum/s2/test/SelectBox.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -230,25 +230,25 @@ describe('SelectBox', () => {
       expect(option2).toBeChecked();
     });
 
-         it('controlled value works as expected', () => {
-       render(
-         <SelectBoxGroup
-           selectionMode="single"
-           onSelectionChange={() => {}}
-           value="option2"
-           label="Controlled test">
-           <SelectBox value="option1">Option 1</SelectBox>
-           <SelectBox value="option2">Option 2</SelectBox>
-         </SelectBoxGroup>
-       );
-
-       const radios = screen.getAllByRole('radio');
-       const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-       const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
-       
-       expect(option1).not.toBeChecked();
-       expect(option2).toBeChecked();
-     });
+    it('controlled value works as expected', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          value="option2"
+          label="Controlled test">
+          <SelectBox value="option1">Option 1</SelectBox>
+          <SelectBox value="option2">Option 2</SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
+      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      
+      expect(option1).not.toBeChecked();
+      expect(option2).toBeChecked();
+    });
 
     it('calls onSelectionChange when controlled value changes', async () => {
       const onSelectionChange = jest.fn();
@@ -326,8 +326,7 @@ describe('SelectBox', () => {
           selectionMode="single"
           onSelectionChange={() => {}}
           value="option2"
-          label="Individual disabled test"
-        >
+          label="Individual disabled test">
           <SelectBox value="option1" isDisabled>Option 1</SelectBox>
           <SelectBox value="option2">Option 2</SelectBox>
         </SelectBoxGroup>

From 23590e24cc66e35cea0dea524b0c24882b31ce89 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Thu, 17 Jul 2025 14:31:29 -0700
Subject: [PATCH 7/9] fixed borders and redid stories/tests

---
 packages/@react-spectrum/s2/src/SelectBox.tsx |  55 +-
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  47 +-
 .../s2/stories/SelectBoxGroup.stories.tsx     | 298 ++++----
 .../s2/test/SelectBoxGroup.test.tsx           | 709 ++++++++++++------
 4 files changed, 654 insertions(+), 455 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index c70854584bb..9216333f689 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -10,11 +10,11 @@
  */
 
 import {Checkbox} from './Checkbox';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, style, lightDark} from '../style' with {type: 'macro'};
+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';
 
@@ -35,7 +35,6 @@ export interface SelectBoxProps extends StyleProps {
 
 export const SelectBoxItemContext = createContext<any>(null);
 
-// Simple basic styling with proper dark mode support
 const selectBoxStyles = style({
   display: 'flex',
   flexDirection: {
@@ -99,8 +98,8 @@ const selectBoxStyles = style({
   borderRadius: 'lg',
   backgroundColor: {
     default: 'layer-2',
-    isDisabled: 'layer-1',
-    isSelected: 'layer-2'
+    isSelected: 'layer-2',
+    isDisabled: 'layer-1'
   },
   color: {
     isEmphasized: 'gray-900',
@@ -110,18 +109,18 @@ const selectBoxStyles = style({
     default: 'emphasized',
     isHovered: 'elevated',
     isSelected: 'elevated',
-    forcedColors: 'none'
+    forcedColors: 'none',
+    isDisabled: 'emphasized'
   },
   outlineStyle: 'none',
   position: 'relative',
   borderWidth: 2,
   borderStyle: 'solid',
   borderColor: {
-    // default: 'transparent',
-    // isSelected: lightDark('accent-900', 'accent-700')
     default: 'transparent',
     isSelected: 'gray-900',
-    isFocusVisible: 'blue-900'
+    isFocusVisible: 'blue-900',
+    isDisabled: 'transparent'
   },
   transition: 'default',
   gap: {
@@ -132,7 +131,7 @@ const selectBoxStyles = style({
   cursor: {
     default: 'pointer',
     isDisabled: 'default'
-  },
+  }
 }, getAllowedOverrides());
 
 const contentContainer = style({
@@ -172,6 +171,9 @@ const iconContainer = style({
   flexShrink: 0,
   color: {
     isDisabled: 'disabled'
+  },
+  opacity: {
+    isDisabled: 0.4
   }
 }, getAllowedOverrides());
 
@@ -211,11 +213,10 @@ const checkboxContainer = style({
   left: 16
 }, getAllowedOverrides());
 
-// Context for passing GridListItem render props down to SelectBox
 const SelectBoxRenderPropsContext = createContext<{
-  isHovered?: boolean;
-  isFocusVisible?: boolean;
-  isPressed?: boolean;
+  isHovered?: boolean,
+  isFocusVisible?: boolean,
+  isPressed?: boolean
 }>({});
 
 /**
@@ -224,29 +225,23 @@ const SelectBoxRenderPropsContext = createContext<{
  */
 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_className = '', UNSAFE_style} = props;
+  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',  // Match SelectBoxGroup default
+    size = 'M',
     orientation = 'vertical',
     selectedKeys,
     isDisabled: groupDisabled = false
   } = contextValue;
 
-  // Access GridListItem render props from context
   let renderProps = useContext(SelectBoxRenderPropsContext);
 
-  // Merge individual and group disabled states
   const isDisabled = individualDisabled || groupDisabled;
-
-  // Determine if this item is selected based on the parent's selectedKeys
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
-
-  // Show checkbox when selected, disabled, or hovered
-  const showCheckbox = isSelected || isDisabled || renderProps.isHovered;
+  const showCheckbox = isSelected || (!isDisabled && renderProps.isHovered);
   
   return (
     <div
@@ -261,7 +256,6 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       }, props.styles)}
       style={UNSAFE_style}>
       
-      {/* Show selection indicator */}
       {showCheckbox && (
         <div className={checkboxContainer(null, props.styles)}>
           <div style={{pointerEvents: 'none'}}>
@@ -269,29 +263,22 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
               isSelected={isSelected}
               isDisabled={isDisabled}
               size={size === 'XS' ? 'S' : size}
-              isReadOnly
-              />
+              isReadOnly />
           </div>
         </div>
       )}
-      
-      {/* Content layout */}
       {orientation === 'horizontal' ? (
         <>
-          {/* Icon */}
           {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
             <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
             </div>
           )}
           
-          {/* Content container for horizontal layout */}
           <div className={contentContainer({size, orientation}, props.styles)}>
             <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-              {/* Text */}
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
               
-              {/* Description */}
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description') && (
                 <div className={descriptionText({size, orientation, isDisabled}, props.styles)}>
                   {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description')}
@@ -302,21 +289,18 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
         </>
       ) : (
         <>
-          {/* Icon */}
           {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
             <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
             </div>
           )}
           
-          {/* Text container for vertical layout */}
           <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
             {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
           </div>
         </>
       )}
       
-      {/* Other children */}
       {React.Children.toArray(children).filter((child: any) => 
         !['icon', 'text', 'description'].includes(child?.props?.slot)
       )}
@@ -324,5 +308,4 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
   );
 });
 
-// Export the context for use in SelectBoxGroup
 export {SelectBoxRenderPropsContext};
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index f3dea51753c..2f6f6fe1226 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -10,19 +10,19 @@
  */
 
 import {
+  ContextValue,
   GridList,
   GridListItem,
-  ContextValue,
   Text
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps, Key, Selection} from '@react-types/shared';
+import {DOMRef, DOMRefValue, HelpTextProps, Orientation, Selection, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactElement, ReactNode, useMemo, useId, useEffect, useRef} from 'react';
+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';
-import {useControlledState} from '@react-stately/utils';
-import {SelectBoxRenderPropsContext} from './SelectBox';
 
 export type SelectBoxValueType = string | string[];
 
@@ -117,7 +117,6 @@ const convertValueToSelection = (value: SelectBoxValueType | undefined, selectio
 };
 
 const convertSelectionToValue = (selection: Selection, selectionMode: 'single' | 'multiple'): SelectBoxValueType => {
-  // Handle 'all' selection
   if (selection === 'all') {
     return selectionMode === 'multiple' ? [] : '';
   }
@@ -148,7 +147,6 @@ const gridStyles = style({
       spacious: 24
     }
   },
-  // Override default GridList styles to work with our grid layout
   '&[role="grid"]': {
     display: 'grid'
   }
@@ -172,9 +170,10 @@ interface FormIntegrationProps {
   isInvalid?: boolean
 }
 
-// Hidden form inputs for form integration
 function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationProps) {
-  if (!name) return null;
+  if (!name) {
+    return null;
+  }
 
   if (Array.isArray(value)) {
     return (
@@ -186,8 +185,7 @@ function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationPr
             name={name}
             value={val}
             required={isRequired && index === 0}
-            aria-invalid={isInvalid}
-          />
+            aria-invalid={isInvalid} />
         ))}
         {value.length === 0 && isRequired && (
           <input
@@ -195,8 +193,7 @@ function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationPr
             name={name}
             value=""
             required
-            aria-invalid={isInvalid}
-          />
+            aria-invalid={isInvalid} />
         )}
       </>
     );
@@ -208,8 +205,7 @@ function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationPr
       name={name}
       value={value || ''}
       required={isRequired}
-      aria-invalid={isInvalid}
-    />
+      aria-invalid={isInvalid} />
   );
 }
 
@@ -244,7 +240,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   const gridId = useId();
   const errorId = useId();
 
-  // Convert between our API and GridList selection API
   const [selectedKeys, setSelectedKeys] = useControlledState(
     props.value !== undefined ? convertValueToSelection(props.value, selectionMode) : undefined,
     convertValueToSelection(defaultValue, selectionMode),
@@ -256,8 +251,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   );
 
 
-
-  // Handle validation
   const validationErrors = useMemo(() => {
     const errors: string[] = [];
     
@@ -271,13 +264,11 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
 
   const hasValidationErrors = isInvalid || validationErrors.length > 0;
 
-  // Extract SelectBox children and convert to GridListItems
   const childrenArray = React.Children.toArray(children).filter((x) => x);
   
-  // Build disabled keys set for individual disabled items
   const disabledKeys = useMemo(() => {
     if (isDisabled) {
-      return 'all'; // Entire group is disabled
+      return 'all';
     }
     
     const disabled = new Set<string>();
@@ -294,7 +285,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     return disabled.size > 0 ? disabled : undefined;
   }, [isDisabled, childrenArray]);
   
-  // Validate children count
   useEffect(() => {
     if (childrenArray.length <= 0) {
       console.error('Invalid content. SelectBox must have at least one item.');
@@ -304,7 +294,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     }
   }, [childrenArray.length]);
 
-  // Context value for child SelectBox components
   const selectBoxContextValue = useMemo(
     () => {
       const contextValue = {
@@ -329,15 +318,12 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       style={UNSAFE_style}
       ref={domRef}>
       
-      {/* Form integration */}
       <FormIntegration
         name={name}
         value={currentValue}
         isRequired={isRequired}
-        isInvalid={hasValidationErrors}
-      />
+        isInvalid={hasValidationErrors} />
       
-      {/* Label */}
       {label && (
         <Text slot="label" id={`${gridId}-label`}>
           {label}
@@ -345,7 +331,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         </Text>
       )}
       
-      {/* Grid List with automatic grid navigation */}
       <GridList
         layout="grid"
         selectionMode={selectionMode}
@@ -362,12 +347,11 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         }}>
         
         {childrenArray.map((child, index) => {
-          if (!React.isValidElement(child)) return null;
+          if (!React.isValidElement(child)) {return null;}
           
           const childElement = child as ReactElement<{value?: string}>;
           const childValue = childElement.props?.value || String(index);
           
-          // Extract text content for accessibility
           const getTextValue = (element: ReactElement): string => {
             const elementProps = (element as any).props;
             const children = React.Children.toArray(elementProps.children) as ReactElement[];
@@ -379,7 +363,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
               return String((textSlot as any).props.children || '');
             }
             
-            // Fallback to any text content
             const textContent = children
               .filter((child: any) => typeof child === 'string')
               .join(' ');
@@ -389,7 +372,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
           
           const textValue = getTextValue(childElement);
           
-          // Convert SelectBox to GridListItem with render props
           return (
             <GridListItem key={childValue} id={childValue} textValue={textValue} className={style({outlineStyle: 'none'})}>
               {(renderProps) => (
@@ -409,7 +391,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         })}
       </GridList>
       
-      {/* Error message */}
       {hasValidationErrors && errorMessage && (
         <Text
           slot="errorMessage"
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 813247812fe..97c903a9bcc 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -15,57 +15,57 @@
  * from Adobe.
  **************************************************************************/
 
-import type { Meta, StoryObj } from "@storybook/react";
-import { SelectBox, SelectBoxGroup, Text, createIcon } from "../src";
-import { action } from "@storybook/addon-actions";
-import React from "react";
-import Server from "../spectrum-illustrations/linear/Server";
-import AlertNotice from "../spectrum-illustrations/linear/AlertNotice";
-import Paperairplane from "../spectrum-illustrations/linear/Paperairplane";
-import StarSVG from "../s2wf-icons/S2_Icon_Star_20_N.svg";
-import StarFilledSVG from "../s2wf-icons/S2_Icon_StarFilled_20_N.svg";
+import {action} from '@storybook/addon-actions';
+import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
+import {createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
+import type {Meta, StoryObj} from '@storybook/react';
+import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
+import React 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 (Collection)",
+  title: 'SelectBoxGroup (Collection)',
   component: SelectBoxGroup,
   parameters: {
-    layout: "centered",
+    layout: 'centered'
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     selectionMode: {
-      control: "select",
-      options: ["single", "multiple"],
+      control: 'select',
+      options: ['single', 'multiple']
     },
     size: {
-      control: "select",
-      options: ["XS", "S", "M", "L", "XL"],
+      control: 'select',
+      options: ['XS', 'S', 'M', 'L', 'XL']
     },
     orientation: {
-      control: "select",
-      options: ["vertical", "horizontal"],
+      control: 'select',
+      options: ['vertical', 'horizontal']
     },
     numColumns: {
-      control: { type: "number", min: 1, max: 4 },
+      control: {type: 'number', min: 1, max: 4}
     },
     gutterWidth: {
-      control: "select",
-      options: ["compact", "default", "spacious"],
-    },
+      control: 'select',
+      options: ['compact', 'default', 'spacious']
+    }
   },
   args: {
-    selectionMode: "single",
-    size: "M",
-    orientation: "vertical",
+    selectionMode: 'single',
+    size: 'M',
+    orientation: 'vertical',
     numColumns: 2,
-    gutterWidth: "default",
+    gutterWidth: 'default',
     isRequired: false,
     isDisabled: false,
-    isEmphasized: false,
-  },
+    isEmphasized: false
+  }
 };
 
 export default meta;
@@ -74,10 +74,10 @@ type Story = StoryObj<typeof meta>;
 // Basic Stories
 export const Default: Story = {
   args: {
-    label: "Choose your cloud service",
+    label: 'Choose your cloud service'
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="aws">
         <Server slot="icon" />
         <Text slot="text">Amazon Web Services</Text>
@@ -99,18 +99,18 @@ export const Default: Story = {
         <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",
+    selectionMode: 'multiple',
+    label: 'Select your preferred services',
+    defaultValue: ['aws', 'gcp'],
+    necessityIndicator: 'icon'
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="aws">
         <Server slot="icon" />
         <Text slot="text">Amazon Web Services</Text>
@@ -128,23 +128,23 @@ export const MultipleSelection: Story = {
         <Text slot="text">Oracle Cloud</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
 // Grid Navigation Testing
 export const GridNavigation: Story = {
   args: {
-    label: "Test Grid Navigation (Use Arrow Keys)",
-    numColumns: 3,
+    label: 'Test Grid Navigation (Use Arrow Keys)',
+    numColumns: 3
   },
   render: (args) => (
-    <div style={{ maxWidth: 600 }}>
-      <p style={{ marginBottom: 16, fontSize: 14, color: "#666" }}>
-        Focus any item and use arrow keys to navigate:
-        <br />• ↑↓ moves vertically (same column)
-        <br />• ←→ moves horizontally (same row)
+    <div style={{maxWidth: 600}}>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        Focus any item (best done by clicking to the left of the group and hitting the tab key) and use arrow keys to navigate:
+        {/* <br />• ↑↓ moves vertically (same column)
+        <br />• ←→ moves horizontally (same row) */}
       </p>
-      <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="1">
           <Text slot="text">Item 1</Text>
         </SelectBox>
@@ -165,25 +165,24 @@ export const GridNavigation: Story = {
         </SelectBox>
       </SelectBoxGroup>
     </div>
-  ),
+  )
 };
 
 // Form Integration
 export const FormIntegration: Story = {
   args: {
-    label: "Select your option",
-    name: "user_preference",
-    isRequired: true,
+    label: 'Select your option',
+    name: 'user_preference',
+    isRequired: true
   },
   render: (args) => (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         const formData = new FormData(e.currentTarget);
-        action("Form submitted")(Object.fromEntries(formData));
-      }}
-    >
-      <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+        action('Form submitted')(Object.fromEntries(formData));
+      }}>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="option1">
           <Text slot="text">Option 1</Text>
         </SelectBox>
@@ -194,22 +193,22 @@ export const FormIntegration: Story = {
           <Text slot="text">Option 3</Text>
         </SelectBox>
       </SelectBoxGroup>
-      <button type="submit" style={{ marginTop: 16 }}>
+      <button type="submit" style={{marginTop: 16}}>
         Submit Form
       </button>
     </form>
-  ),
+  )
 };
 
 export const FormValidation: Story = {
   args: {
-    label: "Required Selection",
+    label: 'Required Selection',
     isRequired: true,
-    errorMessage: "Please select at least one option",
-    isInvalid: true,
+    errorMessage: 'Please select at least one option',
+    isInvalid: true
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
       </SelectBox>
@@ -217,20 +216,19 @@ export const FormValidation: Story = {
         <Text slot="text">Option 2</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
 // Size Variations
 export const SizeVariations: Story = {
   render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
-      {(["XS", "S", "M", "L", "XL"] as const).map((size) => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
+      {(['XS', 'S', 'M', 'L', 'XL'] as const).map((size) => (
         <SelectBoxGroup
           key={size}
           size={size}
           label={`Size ${size}`}
-          onSelectionChange={action(`onSelectionChange-${size}`)}
-        >
+          onSelectionChange={action(`onSelectionChange-${size}`)}>
           <SelectBox value="option1">
             <Server slot="icon" />
             <Text slot="text">Option 1</Text>
@@ -242,18 +240,18 @@ export const SizeVariations: Story = {
         </SelectBoxGroup>
       ))}
     </div>
-  ),
+  )
 };
 
 // Horizontal Orientation
 export const HorizontalOrientation: Story = {
   args: {
-    orientation: "horizontal",
-    label: "Favorite cities",
-    numColumns: 1,
+    orientation: 'horizontal',
+    label: 'Favorite cities',
+    numColumns: 1
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="paris">
         <Text slot="text">Paris</Text>
         <Text slot="description">France</Text>
@@ -267,35 +265,37 @@ export const HorizontalOrientation: Story = {
         <Text slot="description">Japan</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
 // Disabled States
 export const DisabledGroup: Story = {
   args: {
-    label: "Disabled Group",
+    label: 'Disabled Group',
     isDisabled: true,
-    defaultValue: "option1",
+    defaultValue: 'option1'
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="option1">
-        <Text slot="text">Option 1</Text>
+        <Server slot="icon" />
+        <Text slot="text">Selected then Disabled</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
+        <AlertNotice slot="icon" />
+        <Text slot="text">Disabled</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
 export const IndividualDisabled: Story = {
   args: {
-    label: "Some items disabled",
-    defaultValue: "option2",
+    label: 'Some items disabled',
+    defaultValue: 'option2'
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="option1" isDisabled>
         <Text slot="text">Option 1 (Disabled)</Text>
       </SelectBox>
@@ -309,95 +309,93 @@ export const IndividualDisabled: Story = {
         <Text slot="text">Option 4</Text>
       </SelectBox>
     </SelectBoxGroup>
-  ),
+  )
 };
 
-// Controlled Mode
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = React.useState("option2");
+// Controlled Mode - Convert to proper component to use React hooks
+function ControlledStory() {
+  const [value, setValue] = React.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>
-    );
-  },
+  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 />
 };
 
-// Dynamic Icons
-export const DynamicIcons: Story = {
-  args: {
-    label: "Rate these items",
-  },
-  render: (args) => {
-    const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
-      new Set(),
-    );
+// Dynamic Icons - Convert to proper component to use React hooks
+function DynamicIconsStory() {
+  const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
+    new Set()
+  );
 
-    return (
-      <SelectBoxGroup
-        {...args}
-        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>
-    );
-  },
+  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 />
 };
 
 // Multiple Columns
 export const MultipleColumns: Story = {
   args: {
-    label: "Choose options",
+    label: 'Choose options',
     numColumns: 4,
-    gutterWidth: "spacious",
+    gutterWidth: 'spacious'
   },
   render: (args) => (
-    <div style={{ maxWidth: 800 }}>
-      <SelectBoxGroup {...args} onSelectionChange={action("onSelectionChange")}>
-        {Array.from({ length: 8 }, (_, i) => (
+    <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>
-  ),
+  )
 };
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 2fc4319723b..e00e0f74652 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import {render, screen, waitFor} from '@testing-library/react';
+import {render, screen, waitFor, act} from '@testing-library/react';
 import {SelectBox} from '../src/SelectBox';
 import {SelectBoxGroup} from '../src/SelectBoxGroup';
+import {Text} from '../src';
 import userEvent from '@testing-library/user-event';
 
 function SingleSelectBox() {
@@ -12,9 +13,15 @@ function SingleSelectBox() {
       onSelectionChange={(val) => setValue(val as string)}
       value={value}
       label="Single select test">
-      <SelectBox value="option1">Option 1</SelectBox>
-      <SelectBox value="option2">Option 2</SelectBox>
-      <SelectBox value="option3">Option 3</SelectBox>
+      <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>
   );
 }
@@ -27,9 +34,15 @@ function MultiSelectBox() {
       onSelectionChange={(val) => setValue(val as string[])}
       value={value}
       label="Multi select test">
-      <SelectBox value="option1">Option 1</SelectBox>
-      <SelectBox value="option2">Option 2</SelectBox>
-      <SelectBox value="option3">Option 3</SelectBox>
+      <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>
   );
 }
@@ -42,109 +55,254 @@ function DisabledSelectBox() {
       value=""
       isDisabled
       label="Disabled select test">
-      <SelectBox value="option1">Option 1</SelectBox>
-      <SelectBox value="option2">Option 2</SelectBox>
+      <SelectBox value="option1">
+        <Text slot="text">Option 1</Text>
+      </SelectBox>
+      <SelectBox value="option2">
+        <Text slot="text">Option 2</Text>
+      </SelectBox>
     </SelectBoxGroup>
   );
 }
 
-describe('SelectBox', () => {
+describe('SelectBoxGroup', () => {
   describe('Basic functionality', () => {
-    it('renders single select mode', () => {
+    it('renders as a grid with rows', () => {
       render(<SingleSelectBox />);
-      expect(screen.getAllByRole('radio')).toHaveLength(3);
+      expect(screen.getByRole('grid', {name: 'Single select test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('row')).toHaveLength(3);
       expect(screen.getByText('Option 1')).toBeInTheDocument();
     });
 
-    it('renders multiple select mode', () => {
+    it('renders multiple selection mode', () => {
       render(<MultiSelectBox />);
-      expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+      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 checkboxes = screen.getAllByRole('checkbox');
-      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
-      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
+      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).toBeChecked();
-      expect(option2).toBeChecked();
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
     });
 
     it('handles disabled state', () => {
       render(<DisabledSelectBox />);
-      const inputs = screen.getAllByRole('radio');
-      inputs.forEach(input => {
-        expect(input).toBeDisabled();
-      });
+      const grid = screen.getByRole('grid');
+      expect(grid).toBeInTheDocument();
+      
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(0);
     });
   });
 
-  describe('Props and configuration', () => {
-    it('supports different sizes', () => {
+  describe('Visual checkbox indicators', () => {
+    it('shows checkbox when item is selected', async () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" size="L" label="Size test">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <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>
       );
-      expect(screen.getByRole('radio')).toBeInTheDocument();
+
+      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('supports horizontal orientation', () => {
+    it('shows checkbox on hover for non-disabled items', async () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" orientation="horizontal" label="Orientation test">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Hover test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('radio')).toBeInTheDocument();
+
+      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('supports custom number of columns', () => {
+    it('does not show checkbox on hover for disabled items', async () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" numColumns={3} label="Columns test">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Disabled hover test">
+          <SelectBox value="option1" isDisabled>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('radio')).toBeInTheDocument();
+
+      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('supports labels with aria-label', () => {
+    it('shows checkbox for disabled but selected items', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Choose an option">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <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'});
       
-      expect(screen.getByLabelText('Choose an option')).toBeInTheDocument();
+      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">Option 1</SelectBox>
+        <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 required'});
+      expect(grid).toBeInTheDocument();
+      
+      expect(screen.getByText('Required test')).toBeInTheDocument();
+      expect(screen.getByText('*')).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 group = screen.getByRole('radiogroup');
-      expect(group).toBeRequired();
+      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">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
+        <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 radios = screen.getAllByRole('radio');
-      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-      expect(option1).toBeChecked();
+      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', () => {
@@ -154,190 +312,221 @@ describe('SelectBox', () => {
           onSelectionChange={() => {}}
           value={['option1', 'option2']}
           label="Multiple initial test">
-          <SelectBox value="option1">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
-          <SelectBox value="option3">Option 3</SelectBox>
+          <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 checkboxes = screen.getAllByRole('checkbox');
-      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
-      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
-      const option3 = checkboxes.find(cb => cb.getAttribute('value') === 'option3')!;
+      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).toBeChecked();
-      expect(option2).toBeChecked();
-      expect(option3).not.toBeChecked();
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+      expect(option3).toHaveAttribute('aria-selected', 'false');
     });
-  });
 
-  describe('Controlled values', () => {
-    it('handles controlled single selection', async () => {
-      const ControlledSingleSelect = () => {
-        const [value, setValue] = React.useState('option1');
-        return (
-          <SelectBoxGroup
-            selectionMode="single"
-            onSelectionChange={(val) => setValue(val as string)}
-            value={value}
-            label="Controlled single select">
-            <SelectBox value="option1">Option 1</SelectBox>
-            <SelectBox value="option2">Option 2</SelectBox>
-            <SelectBox value="option3">Option 3</SelectBox>
-          </SelectBoxGroup>
-        );
-      };
-
-      render(<ControlledSingleSelect />);
-      const radios = screen.getAllByRole('radio');
-      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
-      
-      expect(option1).toBeChecked();
-      expect(option2).not.toBeChecked();
-      
-      await userEvent.click(option2);
-      expect(option2).toBeChecked();
-      expect(option1).not.toBeChecked();
-    });
-
-    it('handles controlled multiple selection', async () => {
-      const ControlledMultiSelect = () => {
-        const [value, setValue] = React.useState(['option1']);
-        return (
-          <SelectBoxGroup
-            selectionMode="multiple"
-            onSelectionChange={(val) => setValue(val as string[])}
-            value={value}
-            label="Controlled multi select">
-            <SelectBox value="option1">Option 1</SelectBox>
-            <SelectBox value="option2">Option 2</SelectBox>
-            <SelectBox value="option3">Option 3</SelectBox>
-          </SelectBoxGroup>
-        );
-      };
-
-      render(<ControlledMultiSelect />);
-      const checkboxes = screen.getAllByRole('checkbox');
-      const option1 = checkboxes.find(cb => cb.getAttribute('value') === 'option1')!;
-      const option2 = checkboxes.find(cb => cb.getAttribute('value') === 'option2')!;
-      
-      expect(option1).toBeChecked();
-      expect(option2).not.toBeChecked();
-      
-      await userEvent.click(option2);
-      expect(option1).toBeChecked();
-      expect(option2).toBeChecked();
-    });
-
-    it('controlled value works as expected', () => {
+    it('calls onSelectionChange when selection changes', async () => {
+      const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
           selectionMode="single"
-          onSelectionChange={() => {}}
-          value="option2"
-          label="Controlled test">
-          <SelectBox value="option1">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
+          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 radios = screen.getAllByRole('radio');
-      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      await userEvent.click(option1);
       
-      expect(option1).not.toBeChecked();
-      expect(option2).toBeChecked();
+      expect(onSelectionChange).toHaveBeenCalledWith('option1');
     });
 
-    it('calls onSelectionChange when controlled value changes', async () => {
+    it('calls onSelectionChange with array for multiple selection', async () => {
       const onSelectionChange = jest.fn();
-      const ControlledWithCallback = () => {
-        const [value, setValue] = React.useState('option1');
-        return (
-          <SelectBoxGroup
-            selectionMode="single"
-            onSelectionChange={(val) => {
-              setValue(val as string);
-              onSelectionChange(val);
-            }}
-            value={value}
-            label="Controlled callback test">
-            <SelectBox value="option1">Option 1</SelectBox>
-            <SelectBox value="option2">Option 2</SelectBox>
-          </SelectBoxGroup>
-        );
-      };
-
-      render(<ControlledWithCallback />);
-      const radios = screen.getAllByRole('radio');
-      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      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);
       
-      await userEvent.click(option2);
-      expect(onSelectionChange).toHaveBeenCalledWith('option2');
+      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('handles external controlled value changes', () => {
-      const ControlledExternal = ({externalValue}: {externalValue: string}) => (
+    it('creates single hidden input for single selection', () => {
+      const {container} = render(
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={() => {}}
-          value={externalValue}
-          label="External controlled test">
-          <SelectBox value="option1">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
+          value="option1"
+          name="test-field"
+          label="Single form test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
 
-      const {rerender} = render(<ControlledExternal externalValue="option1" />);
-      const radios = screen.getAllByRole('radio');
-      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
-      
-      expect(option1).toBeChecked();
-      expect(option2).not.toBeChecked();
-      
-      rerender(<ControlledExternal externalValue="option2" />);
-      expect(option1).not.toBeChecked();
-      expect(option2).toBeChecked();
+      const hiddenInput = container.querySelector('input[type="hidden"][name="test-field"]');
+      expect(hiddenInput).toBeInTheDocument();
+      expect(hiddenInput).toHaveValue('option1');
     });
   });
 
   describe('Individual SelectBox behavior', () => {
-    it('shows checkbox indicator when hovered', async () => {
+    it('handles disabled individual items', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Hover test">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <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);
       
-      const label = screen.getByText('Option 1').closest('label')!;
-      await userEvent.hover(label);
-      
-      await waitFor(() => {
-        const checkboxes = screen.getAllByRole('checkbox');
-        expect(checkboxes.length).toBeGreaterThan(0);
-      });
+      expect(onSelectionChange).not.toHaveBeenCalled();
     });
+  });
 
-    it('handles disabled individual items', () => {
+  describe('Grid navigation', () => {
+    it('supports keyboard navigation', async () => {
       render(
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={() => {}}
-          value="option2"
-          label="Individual disabled test">
-          <SelectBox value="option1" isDisabled>Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
+          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 radios = screen.getAllByRole('radio');
-      const option1 = radios.find(radio => radio.getAttribute('value') === 'option1')!;
-      const option2 = radios.find(radio => radio.getAttribute('value') === 'option2')!;
+      const grid = screen.getByRole('grid');
+      await act(async () => {
+        grid.focus();
+      });
       
-      expect(option1).toBeDisabled();
-      expect(option2).not.toBeDisabled();
+      await act(async () => {
+        await userEvent.keyboard(' ');
+      });
+      expect(onSelectionChange).toHaveBeenCalledWith('option1');
     });
   });
 
@@ -358,15 +547,15 @@ describe('SelectBox', () => {
       );
       
       expect(console.error).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: expect.stringContaining('at least a title')
-        })
+        '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}`}>Option {i}</SelectBox>
+        <SelectBox key={i} value={`option${i}`}>
+          <Text slot="text">Option {i}</Text>
+        </SelectBox>
       ));
       
       render(
@@ -376,93 +565,141 @@ describe('SelectBox', () => {
       );
       
       expect(console.error).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: expect.stringContaining('more than 9 children')
-        })
+        'Invalid content. SelectBox cannot have more than 9 children.'
       );
     });
   });
 
   describe('Accessibility', () => {
-    it('has proper ARIA roles', () => {
+    it('has proper grid structure', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="ARIA test">
-          <SelectBox value="option1">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
-          <SelectBox value="option3">Option 3</SelectBox>
+        <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('radiogroup')).toBeInTheDocument();
-      expect(screen.getAllByRole('radio')).toHaveLength(3);
+      
+      expect(screen.getByRole('grid', {name: 'ARIA test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('row')).toHaveLength(2);
+      expect(screen.getAllByRole('gridcell')).toHaveLength(2);
     });
 
-    it('has proper ARIA roles for multiple selection', () => {
+    it('associates labels correctly', () => {
       render(
-        <SelectBoxGroup selectionMode="multiple" onSelectionChange={() => {}} value={[]} label="ARIA multi test">
-          <SelectBox value="option1">Option 1</SelectBox>
-          <SelectBox value="option2">Option 2</SelectBox>
-          <SelectBox value="option3">Option 3</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Choose option">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('group')).toBeInTheDocument();
-      expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+      
+      const grid = screen.getByRole('grid', {name: 'Choose option'});
+      expect(grid).toBeInTheDocument();
     });
 
-    it('associates labels correctly', () => {
+    it('supports aria-describedby for error messages', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Choose option">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          isInvalid
+          errorMessage="Error occurred"
+          label="Error test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
       
-      expect(screen.getByLabelText('Choose option')).toBeInTheDocument();
+      const grid = screen.getByRole('grid');
+      const errorMessage = screen.getByText('Error occurred');
+      
+      expect(grid).toHaveAttribute('aria-describedby');
+      expect(errorMessage).toBeInTheDocument();
     });
   });
 
   describe('Edge cases', () => {
-    it('handles empty value', () => {
+    it('handles complex children with slots', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Empty value test">
-          <SelectBox value="">Empty</SelectBox>
+        <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>
       );
       
-      const radio = screen.getByRole('radio');
-      expect(radio).toHaveAttribute('value', '');
+      expect(screen.getByText('Complex Option')).toBeInTheDocument();
+      expect(screen.getByText('With description')).toBeInTheDocument();
     });
 
-    it('handles complex children', () => {
+    it('handles empty string values', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" label="Complex children test">
-          <SelectBox value="option1">
-            <div>
-              <h3>Title</h3>
-              <p>Description</p>
-            </div>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          label="Empty value test">
+          <SelectBox value="">
+            <Text slot="text">Empty Value</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
       
-      expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('Description')).toBeInTheDocument();
+      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">Option 1</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          gutterWidth="compact" 
+          label="Gutter test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('radio')).toBeInTheDocument();
+      expect(screen.getByRole('grid', {name: 'Gutter test'})).toBeInTheDocument();
     });
 
     it('handles emphasized style', () => {
       render(
-        <SelectBoxGroup selectionMode="single" onSelectionChange={() => {}} value="" isEmphasized label="Emphasized test">
-          <SelectBox value="option1">Option 1</SelectBox>
+        <SelectBoxGroup 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          value="" 
+          isEmphasized 
+          label="Emphasized test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('radio')).toBeInTheDocument();
+      expect(screen.getByRole('grid', {name: 'Emphasized test'})).toBeInTheDocument();
     });
   });
 });

From 1a7e962fa7de31557615451e2ceb25b4aa565c5d Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Thu, 17 Jul 2025 14:45:13 -0700
Subject: [PATCH 8/9] removed extraneous overrides and isEmphasized prop

---
 packages/@react-spectrum/s2/src/SelectBox.tsx    | 16 ++++++++--------
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx    |  9 +--------
 .../s2/stories/SelectBoxGroup.stories.tsx        |  1 -
 .../s2/test/SelectBoxGroup.test.tsx              |  1 -
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 9216333f689..155db40d755 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -175,7 +175,7 @@ const iconContainer = style({
   opacity: {
     isDisabled: 0.4
   }
-}, getAllowedOverrides());
+});
 
 const textContainer = style({
   display: 'flex',
@@ -205,13 +205,13 @@ const descriptionText = style({
     isDisabled: 'disabled'
   },
   lineHeight: 'body'
-}, getAllowedOverrides());
+});
 
 const checkboxContainer = style({
   position: 'absolute',
   top: 16,
   left: 16
-}, getAllowedOverrides());
+});
 
 const SelectBoxRenderPropsContext = createContext<{
   isHovered?: boolean,
@@ -257,7 +257,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       style={UNSAFE_style}>
       
       {showCheckbox && (
-        <div className={checkboxContainer(null, props.styles)}>
+        <div className={checkboxContainer}>
           <div style={{pointerEvents: 'none'}}>
             <Checkbox 
               isSelected={isSelected}
@@ -270,7 +270,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       {orientation === 'horizontal' ? (
         <>
           {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
-            <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
+            <div className={iconContainer({size, orientation, isDisabled})}>
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
             </div>
           )}
@@ -280,7 +280,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
               {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}, props.styles)}>
+                <div className={descriptionText({size, orientation, isDisabled})}>
                   {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description')}
                 </div>
               )}
@@ -290,12 +290,12 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       ) : (
         <>
           {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
-            <div className={iconContainer({size, orientation, isDisabled}, props.styles)}>
+            <div className={iconContainer({size, orientation, isDisabled})}>
               {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
             </div>
           )}
           
-          <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+          <div className={textContainer({size, orientation, isDisabled})}>
             {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
           </div>
         </>
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 2f6f6fe1226..4f786c4aa76 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -58,10 +58,6 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * @default 'vertical'
    */
   orientation?: Orientation,
-  /**
-   * Whether the SelectBoxGroup should be displayed with an emphasized style.
-   */
-  isEmphasized?: boolean,
   /**
    * Number of columns to display the SelectBox elements in.
    * @default 2
@@ -98,7 +94,6 @@ interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
-  isEmphasized?: boolean,
   isDisabled?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
@@ -225,7 +220,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     selectionMode = 'single',
     size = 'M',
     orientation = 'vertical',
-    isEmphasized,
     numColumns = 2,
     gutterWidth = 'default',
     isRequired = false,
@@ -300,14 +294,13 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         allowMultiSelect: selectionMode === 'multiple',
         size,
         orientation,
-        isEmphasized,
         isDisabled,
         selectedKeys,
         onSelectionChange: setSelectedKeys
       };
       return contextValue;
     },
-    [selectionMode, size, orientation, isEmphasized, isDisabled, selectedKeys, setSelectedKeys]
+    [selectionMode, size, orientation, isDisabled, selectedKeys, setSelectedKeys]
   );
 
   const currentValue = convertSelectionToValue(selectedKeys, selectionMode);
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 97c903a9bcc..ac2e83a8a85 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -64,7 +64,6 @@ const meta: Meta<typeof SelectBoxGroup> = {
     gutterWidth: 'default',
     isRequired: false,
     isDisabled: false,
-    isEmphasized: false
   }
 };
 
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index e00e0f74652..bb14a3a5e03 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -692,7 +692,6 @@ describe('SelectBoxGroup', () => {
           selectionMode="single" 
           onSelectionChange={() => {}} 
           value="" 
-          isEmphasized 
           label="Emphasized test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>

From 29734bb7626da03efc3c6f338f6b01ee5948a33b Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Fri, 18 Jul 2025 11:36:25 -0700
Subject: [PATCH 9/9] lint and removed XS

---
 packages/@react-spectrum/s2/src/SelectBox.tsx |  27 ++---
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  20 +++-
 .../s2/stories/SelectBoxGroup.stories.tsx     | 109 ++++++++++--------
 .../s2/test/SelectBoxGroup.test.tsx           |  48 +++++++-
 4 files changed, 130 insertions(+), 74 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 155db40d755..de1b3f1a496 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -51,7 +51,6 @@ const selectBoxStyles = style({
   width: {
     default: {
       size: {
-        XS: 100,
         S: 128,
         M: 136,
         L: 160,
@@ -65,7 +64,6 @@ const selectBoxStyles = style({
   height: {
     default: {
       size: {
-        XS: 100,
         S: 128,
         M: 136,
         L: 160,
@@ -88,7 +86,6 @@ const selectBoxStyles = style({
   },
   padding: {
     size: {
-      XS: 12,
       S: 16,
       M: 20,
       L: 24,
@@ -207,11 +204,6 @@ const descriptionText = style({
   lineHeight: 'body'
 });
 
-const checkboxContainer = style({
-  position: 'absolute',
-  top: 16,
-  left: 16
-});
 
 const SelectBoxRenderPropsContext = createContext<{
   isHovered?: boolean,
@@ -257,14 +249,17 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       style={UNSAFE_style}>
       
       {showCheckbox && (
-        <div className={checkboxContainer}>
-          <div style={{pointerEvents: 'none'}}>
-            <Checkbox 
-              isSelected={isSelected}
-              isDisabled={isDisabled}
-              size={size === 'XS' ? 'S' : size}
-              isReadOnly />
-          </div>
+        <div 
+          className={style({
+            position: 'absolute',
+            top: 16,
+            left: 16
+          })}>
+          <Checkbox 
+            isSelected={isSelected}
+            isDisabled={isDisabled}
+            size={size}
+            isReadOnly />
         </div>
       )}
       {orientation === 'horizontal' ? (
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 4f786c4aa76..efc5346ac45 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -16,6 +16,7 @@ import {
   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';
@@ -52,7 +53,7 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * The size of the SelectBoxGroup.
    * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * The axis the SelectBox elements should align with.
    * @default 'vertical'
@@ -87,12 +88,16 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * Whether the SelectBoxGroup is in an invalid state.
    */
-  isInvalid?: boolean
+  isInvalid?: boolean,
+  /**
+   * Contextual help text for the SelectBoxGroup.
+   */
+  contextualHelp?: ReactNode
 }
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
   isDisabled?: boolean,
   selectedKeys?: Selection,
@@ -214,6 +219,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   
   let {
     label,
+    contextualHelp,
     children,
     onSelectionChange,
     defaultValue,
@@ -318,10 +324,12 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         isInvalid={hasValidationErrors} />
       
       {label && (
-        <Text slot="label" id={`${gridId}-label`}>
+        <FieldLabel
+          id={`${gridId}-label`}
+          isRequired={isRequired}
+          contextualHelp={contextualHelp}>
           {label}
-          {isRequired && <span aria-label="required"> *</span>}
-        </Text>
+        </FieldLabel>
       )}
       
       <GridList
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index ac2e83a8a85..af6603067ec 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -17,10 +17,10 @@
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
-import {createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
+import {Button, createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
-import React from 'react';
+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';
@@ -29,7 +29,7 @@ const StarIcon = createIcon(StarSVG);
 const StarFilledIcon = createIcon(StarFilledSVG);
 
 const meta: Meta<typeof SelectBoxGroup> = {
-  title: 'SelectBoxGroup (Collection)',
+  title: 'SelectBoxGroup',
   component: SelectBoxGroup,
   parameters: {
     layout: 'centered'
@@ -42,7 +42,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
     },
     size: {
       control: 'select',
-      options: ['XS', 'S', 'M', 'L', 'XL']
+      options: ['S', 'M', 'L', 'XL']
     },
     orientation: {
       control: 'select',
@@ -63,7 +63,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
     numColumns: 2,
     gutterWidth: 'default',
     isRequired: false,
-    isDisabled: false,
+    isDisabled: false
   }
 };
 
@@ -133,15 +133,13 @@ export const MultipleSelection: Story = {
 // Grid Navigation Testing
 export const GridNavigation: Story = {
   args: {
-    label: 'Test Grid Navigation (Use Arrow Keys)',
+    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 left of the group and hitting the tab key) and use arrow keys to navigate:
-        {/* <br />• ↑↓ moves vertically (same column)
-        <br />• ←→ moves horizontally (same row) */}
+        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">
@@ -167,38 +165,6 @@ export const GridNavigation: Story = {
   )
 };
 
-// Form Integration
-export const FormIntegration: Story = {
-  args: {
-    label: 'Select your option',
-    name: 'user_preference',
-    isRequired: true
-  },
-  render: (args) => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        action('Form submitted')(Object.fromEntries(formData));
-      }}>
-      <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>
-        <SelectBox value="option3">
-          <Text slot="text">Option 3</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-      <button type="submit" style={{marginTop: 16}}>
-        Submit Form
-      </button>
-    </form>
-  )
-};
-
 export const FormValidation: Story = {
   args: {
     label: 'Required Selection',
@@ -222,7 +188,7 @@ export const FormValidation: Story = {
 export const SizeVariations: Story = {
   render: () => (
     <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
-      {(['XS', 'S', 'M', 'L', 'XL'] as const).map((size) => (
+      {(['S', 'M', 'L', 'XL'] as const).map((size) => (
         <SelectBoxGroup
           key={size}
           size={size}
@@ -311,9 +277,8 @@ export const IndividualDisabled: Story = {
   )
 };
 
-// Controlled Mode - Convert to proper component to use React hooks
 function ControlledStory() {
-  const [value, setValue] = React.useState('option2');
+  const [value, setValue] = useState('option2');
 
   return (
     <div>
@@ -346,9 +311,8 @@ export const Controlled: Story = {
   render: () => <ControlledStory />
 };
 
-// Dynamic Icons - Convert to proper component to use React hooks
 function DynamicIconsStory() {
-  const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
+  const [selectedValues, setSelectedValues] = useState<Set<string>>(
     new Set()
   );
 
@@ -379,7 +343,6 @@ export const DynamicIcons: Story = {
   render: () => <DynamicIconsStory />
 };
 
-// Multiple Columns
 export const MultipleColumns: Story = {
   args: {
     label: 'Choose options',
@@ -398,3 +361,55 @@ export const MultipleColumns: Story = {
     </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
index bb14a3a5e03..66451d74b8c 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,8 +1,8 @@
+import {act, render, screen, waitFor} from '@testing-library/react';
+import {Button, Text} from '../src';
 import React from 'react';
-import {render, screen, waitFor, act} from '@testing-library/react';
 import {SelectBox} from '../src/SelectBox';
 import {SelectBoxGroup} from '../src/SelectBoxGroup';
-import {Text} from '../src';
 import userEvent from '@testing-library/user-event';
 
 function SingleSelectBox() {
@@ -250,11 +250,9 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      const grid = screen.getByRole('grid', {name: 'Required test required'});
+      const grid = screen.getByRole('grid', {name: 'Required test'});
       expect(grid).toBeInTheDocument();
-      
       expect(screen.getByText('Required test')).toBeInTheDocument();
-      expect(screen.getByText('*')).toBeInTheDocument();
     });
 
     it('supports error message and validation', () => {
@@ -422,6 +420,46 @@ describe('SelectBoxGroup', () => {
       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', () => {