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 01/24] 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 02/24] 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 03/24] 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 04/24] 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 05/24] 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 06/24] 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 07/24] 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 08/24] 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 09/24] 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', () => {

From cab2c79db92cee52b42c38c956a778c7d3acb1b4 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 21 Jul 2025 12:24:22 -0700
Subject: [PATCH 10/24] test-utils-internal swap

---
 packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 66451d74b8c..40a43b2c5ce 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,4 +1,4 @@
-import {act, render, screen, waitFor} from '@testing-library/react';
+import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal';
 import {Button, Text} from '../src';
 import React from 'react';
 import {SelectBox} from '../src/SelectBox';

From 2f1c99d978daa1a965149a11b2356272914f8a56 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 21 Jul 2025 12:24:22 -0700
Subject: [PATCH 11/24] test-utils-internal swap

---
 packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 66451d74b8c..a4bc5ce383a 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,8 +1,7 @@
-import {act, render, screen, waitFor} from '@testing-library/react';
+import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal';
 import {Button, Text} from '../src';
 import React from 'react';
-import {SelectBox} from '../src/SelectBox';
-import {SelectBoxGroup} from '../src/SelectBoxGroup';
+import {SelectBox, SelectBoxGroup} from '../src';
 import userEvent from '@testing-library/user-event';
 
 function SingleSelectBox() {

From ea0f8d5d3b6236acfa3980f7aae3768ba800e6e0 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 22 Jul 2025 10:02:58 -0700
Subject: [PATCH 12/24] swapped useId library

---
 packages/@react-spectrum/s2/src/SelectBox.tsx      | 3 ++-
 packages/@react-spectrum/s2/src/SelectBoxGroup.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index de1b3f1a496..09731adb919 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -259,7 +259,8 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
             isSelected={isSelected}
             isDisabled={isDisabled}
             size={size}
-            isReadOnly />
+            isReadOnly
+            excludeFromTabOrder />
         </div>
       )}
       {orientation === 'horizontal' ? (
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index efc5346ac45..cc0c9c731d6 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -18,11 +18,12 @@ import {
 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 React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, 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 {useId} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export type SelectBoxValueType = string | string[];
@@ -325,7 +326,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       
       {label && (
         <FieldLabel
-          id={`${gridId}-label`}
+          id={gridId}
           isRequired={isRequired}
           contextualHelp={contextualHelp}>
           {label}
@@ -338,7 +339,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         selectedKeys={selectedKeys}
         onSelectionChange={isDisabled ? () => {} : setSelectedKeys}
         disabledKeys={disabledKeys}
-        aria-labelledby={label ? `${gridId}-label` : undefined}
+        aria-labelledby={label ? gridId : undefined}
         aria-describedby={hasValidationErrors && errorMessage ? errorId : undefined}
         aria-invalid={hasValidationErrors}
         aria-required={isRequired}

From 19a536ca3aa2c4fb3f9bd7f5cbbb340ee7514fe6 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Fri, 25 Jul 2025 19:45:19 -0700
Subject: [PATCH 13/24] swapped to listbox

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 100 ++-
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 168 ++---
 .../s2/stories/SelectBoxGroup.stories.tsx     | 657 ++++++++++++------
 3 files changed, 572 insertions(+), 353 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 09731adb919..ddb2f77520a 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -10,10 +10,11 @@
  */
 
 import {Checkbox} from './Checkbox';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} 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 {ContextValue} from 'react-aria-components';
+import {SelectBoxContext, SelectBoxGroupContext} from './SelectBoxGroup';
 import {style} from '../style' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -33,7 +34,7 @@ export interface SelectBoxProps extends StyleProps {
   isDisabled?: boolean
 }
 
-export const SelectBoxItemContext = createContext<any>(null);
+export const SelectBoxSpectrumContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 const selectBoxStyles = style({
   display: 'flex',
@@ -185,7 +186,11 @@ const textContainer = style({
   },
   gap: 'text-to-visual',
   color: {
-    isDisabled: 'disabled'
+    default: 'neutral',
+    isDisabled: {
+      default: 'gray-600',
+      forcedColors: 'GrayText'
+    }
   }
 }, getAllowedOverrides());
 
@@ -216,14 +221,13 @@ const SelectBoxRenderPropsContext = createContext<{
  * Works as content within a GridListItem for automatic grid navigation.
  */
 export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxItemContext);
+  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxSpectrumContext);
   let {children, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;
   let divRef = useRef<HTMLDivElement | null>(null);
   let domRef = useFocusableRef(ref, divRef);
   
   let contextValue = useContext(SelectBoxContext);
   let {
-    size = 'M',
     orientation = 'vertical',
     selectedKeys,
     isDisabled: groupDisabled = false
@@ -231,10 +235,22 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
 
   let renderProps = useContext(SelectBoxRenderPropsContext);
 
+  const size = 'M'; //Only medium size is supported
   const isDisabled = individualDisabled || groupDisabled;
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
   const showCheckbox = isSelected || (!isDisabled && renderProps.isHovered);
   
+  const childrenArray = React.Children.toArray(children);
+  const iconSlot = childrenArray.find((child: any) => child?.props?.slot === 'icon');
+  const textSlot = childrenArray.find((child: any) => child?.props?.slot === 'text');
+  const descriptionSlot = childrenArray.find((child: any) => child?.props?.slot === 'description');
+  const otherChildren = childrenArray.filter((child: any) => 
+    !['icon', 'text', 'description'].includes(child?.props?.slot)
+  );
+
+  const hasIcon = !!iconSlot;
+  const hasDescription = !!descriptionSlot;
+  
   return (
     <div
       ref={domRef}
@@ -258,48 +274,80 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
           <Checkbox 
             isSelected={isSelected}
             isDisabled={isDisabled}
-            size={size}
             isReadOnly
-            excludeFromTabOrder />
+            excludeFromTabOrder
+            aria-label={isSelected ? 'Selected' : 'Select'} />
         </div>
       )}
+      
       {orientation === 'horizontal' ? (
+        // Horizontal layout with all combinations
         <>
-          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+          {hasIcon && (
             <div className={iconContainer({size, orientation, isDisabled})}>
-              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+              {iconSlot}
             </div>
           )}
           
-          <div className={contentContainer({size, orientation}, props.styles)}>
-            <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
-              
-              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description') && (
-                <div className={descriptionText({size, orientation, isDisabled})}>
-                  {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'description')}
-                </div>
-              )}
+          {hasIcon || hasDescription ? (
+            // Standard horizontal layout with icon and/or description
+            <div className={contentContainer({size, orientation}, props.styles)}>
+              <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+                {textSlot}
+                
+                {hasDescription && (
+                  <div className={descriptionText({size, orientation, isDisabled})}>
+                    {descriptionSlot}
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
+          ) : (
+            // Text-only horizontal layout (optimized)
+            <div className={style({
+              display: 'flex',
+              alignItems: 'center', 
+              justifyContent: 'center',
+              flexGrow: 1,
+              textAlign: 'center',
+              paddingInline: 'edge-to-text'
+            })}>
+              <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+                {textSlot}
+              </div>
+            </div>
+          )}
         </>
       ) : (
+        // Vertical layout with icon and/or description
         <>
-          {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon') && (
+          {hasIcon && (
             <div className={iconContainer({size, orientation, isDisabled})}>
-              {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'icon')}
+              {iconSlot}
             </div>
           )}
           
           <div className={textContainer({size, orientation, isDisabled})}>
-            {React.Children.toArray(children).find((child: any) => child?.props?.slot === 'text')}
+            {textSlot}
           </div>
+          
+          {hasDescription && (
+            <div className={style({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              textAlign: 'center',
+              marginTop: 'text-to-visual'
+            })}>
+              <div className={descriptionText({size, orientation, isDisabled})}>
+                {descriptionSlot}
+              </div>
+            </div>
+          )}
         </>
       )}
       
-      {React.Children.toArray(children).filter((child: any) => 
-        !['icon', 'text', 'description'].includes(child?.props?.slot)
-      )}
+      {otherChildren}
     </div>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index cc0c9c731d6..c62be8f63ec 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -11,8 +11,8 @@
 
 import {
   ContextValue,
-  GridList,
-  GridListItem,
+  ListBox,
+  ListBoxItem,
   Text
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, HelpTextProps, Orientation, Selection, SpectrumLabelableProps} from '@react-types/shared';
@@ -26,8 +26,6 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useId} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export type SelectBoxValueType = string | string[];
-
 export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
@@ -36,25 +34,20 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * Handler that is called when the selection changes.
    */
-  onSelectionChange: (val: SelectBoxValueType) => void,
+  onSelectionChange?: (selection: Selection) => void,
   /**
    * The selection mode for the SelectBoxGroup.
    * @default 'single'
    */
   selectionMode?: 'single' | 'multiple',
   /**
-   * The current selected value (controlled).
-   */
-  value?: SelectBoxValueType,
-  /**
-   * The default selected value.
+   * The currently selected keys in the collection (controlled).
    */
-  defaultValue?: SelectBoxValueType,
+  selectedKeys?: Selection,
   /**
-   * The size of the SelectBoxGroup.
-   * @default 'M'
+   * The initial selected keys in the collection (uncontrolled).
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  defaultSelectedKeys?: Selection,
   /**
    * The axis the SelectBox elements should align with.
    * @default 'vertical'
@@ -98,41 +91,15 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
-  size?: 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
   isDisabled?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
 }
 
-const convertValueToSelection = (value: SelectBoxValueType | undefined, selectionMode: 'single' | 'multiple'): Selection => {
-  if (value === undefined) {
-    return selectionMode === 'multiple' ? new Set() : new Set();
-  }
-  
-  if (Array.isArray(value)) {
-    return new Set(value);
-  }
-  
-  return selectionMode === 'multiple' ? new Set([value]) : new Set([value]);
-};
 
-const convertSelectionToValue = (selection: Selection, selectionMode: 'single' | 'multiple'): SelectBoxValueType => {
-  if (selection === 'all') {
-    return selectionMode === 'multiple' ? [] : '';
-  }
-  
-  const keys = Array.from(selection).map(key => String(key));
-  
-  if (selectionMode === 'multiple') {
-    return keys;
-  }
-  
-  return keys[0] || '';
-};
 
 export const SelectBoxContext = createContext<SelectBoxContextValue>({
-  size: 'M',
   orientation: 'vertical'
 });
 
@@ -148,9 +115,6 @@ const gridStyles = style({
       spacious: 24
     }
   },
-  '&[role="grid"]': {
-    display: 'grid'
-  }
 }, getAllowedOverrides());
 
 const containerStyles = style({
@@ -166,54 +130,15 @@ const errorMessageStyles = style({
 
 interface FormIntegrationProps {
   name?: string,
-  value: SelectBoxValueType,
+  selectedKeys: Selection,
+  selectionMode: 'single' | 'multiple',
   isRequired?: boolean,
   isInvalid?: boolean
 }
-
-function FormIntegration({name, value, isRequired, isInvalid}: FormIntegrationProps) {
-  if (!name) {
-    return null;
-  }
-
-  if (Array.isArray(value)) {
-    return (
-      <>
-        {value.map((val, index) => (
-          <input
-            key={index}
-            type="hidden"
-            name={name}
-            value={val}
-            required={isRequired && index === 0}
-            aria-invalid={isInvalid} />
-        ))}
-        {value.length === 0 && isRequired && (
-          <input
-            type="hidden"
-            name={name}
-            value=""
-            required
-            aria-invalid={isInvalid} />
-        )}
-      </>
-    );
-  }
-
-  return (
-    <input
-      type="hidden"
-      name={name}
-      value={value || ''}
-      required={isRequired}
-      aria-invalid={isInvalid} />
-  );
-}
-
 /**
  * SelectBox groups allow users to select one or more options from a list.
  * All possible options are exposed up front for users to compare.
- * Built with GridList for automatic grid-based keyboard navigation.
+ * Built with ListBox for automatic grid-based keyboard navigation.
  */
 export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
@@ -223,9 +148,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     contextualHelp,
     children,
     onSelectionChange,
-    defaultValue,
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys,
     selectionMode = 'single',
-    size = 'M',
     orientation = 'vertical',
     numColumns = 2,
     gutterWidth = 'default',
@@ -242,13 +167,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   const errorId = useId();
 
   const [selectedKeys, setSelectedKeys] = useControlledState(
-    props.value !== undefined ? convertValueToSelection(props.value, selectionMode) : undefined,
-    convertValueToSelection(defaultValue, selectionMode),
-    (selection) => {
-      const value = convertSelectionToValue(selection, selectionMode);
-
-      onSelectionChange(value);
-    }
+    controlledSelectedKeys,
+    defaultSelectedKeys || new Set(),
+    onSelectionChange
   );
 
 
@@ -264,7 +185,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   }, [isRequired, selectedKeys]);
 
   const hasValidationErrors = isInvalid || validationErrors.length > 0;
-
   const childrenArray = React.Children.toArray(children).filter((x) => x);
   
   const disabledKeys = useMemo(() => {
@@ -299,7 +219,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     () => {
       const contextValue = {
         allowMultiSelect: selectionMode === 'multiple',
-        size,
         orientation,
         isDisabled,
         selectedKeys,
@@ -307,11 +226,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       };
       return contextValue;
     },
-    [selectionMode, size, orientation, isDisabled, selectedKeys, setSelectedKeys]
+    [selectionMode, orientation, isDisabled, selectedKeys, setSelectedKeys]
   );
 
-  const currentValue = convertSelectionToValue(selectedKeys, selectionMode);
-
   return (
     <div
       className={containerStyles(null, props.styles)}
@@ -320,7 +237,8 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       
       <FormIntegration
         name={name}
-        value={currentValue}
+        selectedKeys={selectedKeys}
+        selectionMode={selectionMode}
         isRequired={isRequired}
         isInvalid={hasValidationErrors} />
       
@@ -333,7 +251,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         </FieldLabel>
       )}
       
-      <GridList
+      <ListBox
         layout="grid"
         selectionMode={selectionMode}
         selectedKeys={selectedKeys}
@@ -375,7 +293,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
           const textValue = getTextValue(childElement);
           
           return (
-            <GridListItem key={childValue} id={childValue} textValue={textValue} className={style({outlineStyle: 'none'})}>
+            <ListBoxItem key={childValue} id={childValue} textValue={textValue} className={style({outlineStyle: 'none'})}>
               {(renderProps) => (
                 <SelectBoxContext.Provider value={selectBoxContextValue}>
                   <SelectBoxRenderPropsContext.Provider 
@@ -388,10 +306,10 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
                   </SelectBoxRenderPropsContext.Provider>
                 </SelectBoxContext.Provider>
               )}
-            </GridListItem>
+            </ListBoxItem>
           );
         })}
-      </GridList>
+      </ListBox>
       
       {hasValidationErrors && errorMessage && (
         <Text
@@ -404,3 +322,45 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     </div>
   );
 });
+
+function FormIntegration({name, selectedKeys, selectionMode, isRequired, isInvalid}: FormIntegrationProps) {
+  if (!name) {
+    return null;
+  }
+
+  // Convert Selection to array of strings for form submission
+  const values = selectedKeys === 'all' ? [] : Array.from(selectedKeys).map(String);
+
+  if (selectionMode === 'multiple') {
+    return (
+      <>
+        {values.map((val, index) => (
+          <input
+            key={index}
+            type="hidden"
+            name={name}
+            value={val}
+            required={isRequired && index === 0}
+            aria-invalid={isInvalid} />
+        ))}
+        {values.length === 0 && isRequired && (
+          <input
+            type="hidden"
+            name={name}
+            value=""
+            required
+            aria-invalid={isInvalid} />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <input
+      type="hidden"
+      name={name}
+      value={values[0] || ''}
+      required={isRequired}
+      aria-invalid={isInvalid} />
+  );
+}
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index af6603067ec..9721ddcd327 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -24,6 +24,7 @@ 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';
+import type {Selection} from 'react-aria-components';
 
 const StarIcon = createIcon(StarSVG);
 const StarFilledIcon = createIcon(StarFilledSVG);
@@ -40,10 +41,6 @@ const meta: Meta<typeof SelectBoxGroup> = {
       control: 'select',
       options: ['single', 'multiple']
     },
-    size: {
-      control: 'select',
-      options: ['S', 'M', 'L', 'XL']
-    },
     orientation: {
       control: 'select',
       options: ['vertical', 'horizontal']
@@ -58,7 +55,6 @@ const meta: Meta<typeof SelectBoxGroup> = {
   },
   args: {
     selectionMode: 'single',
-    size: 'M',
     orientation: 'vertical',
     numColumns: 2,
     gutterWidth: 'default',
@@ -105,134 +101,67 @@ export const MultipleSelection: Story = {
   args: {
     selectionMode: 'multiple',
     label: 'Select your preferred services',
-    defaultValue: ['aws', 'gcp'],
-    necessityIndicator: 'icon'
+    defaultSelectedKeys: new Set(['aws', 'gcp']),
+    necessityIndicator: 'icon',
+    numColumns: 3,
+    gutterWidth: 'default'
   },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-      <SelectBox value="aws">
-        <Server slot="icon" />
-        <Text slot="text">Amazon Web Services</Text>
-      </SelectBox>
-      <SelectBox value="azure">
-        <AlertNotice slot="icon" />
-        <Text slot="text">Microsoft Azure</Text>
-      </SelectBox>
-      <SelectBox value="gcp">
-        <Paperairplane slot="icon" />
-        <Text slot="text">Google Cloud Platform</Text>
-      </SelectBox>
-      <SelectBox value="oracle">
-        <Server slot="icon" />
-        <Text slot="text">Oracle Cloud</Text>
-      </SelectBox>
-    </SelectBoxGroup>
-  )
-};
-
-// Grid Navigation Testing
-export const GridNavigation: Story = {
-  args: {
-    label: 'Test Grid Navigation',
-    numColumns: 3
-  },
-  render: (args) => (
-    <div style={{maxWidth: 600}}>
+    <div style={{maxWidth: 800}}>
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-        Focus any item (best done by clicking to the side of the group and hitting the tab key) and using arrow keys to navigate:
+        Focus any item and use arrow keys for grid navigation:
       </p>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="1">
-          <Text slot="text">Item 1</Text>
+        <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="2">
-          <Text slot="text">Item 2</Text>
+        <SelectBox value="oracle">
+          <Server slot="icon" />
+          <Text slot="text">Oracle Cloud</Text>
+          <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
-        <SelectBox value="3">
-          <Text slot="text">Item 3</Text>
+        <SelectBox value="ibm">
+          <Server slot="icon" />
+          <Text slot="text">IBM Cloud</Text>
+          <Text slot="description">Hybrid cloud solutions</Text>
         </SelectBox>
-        <SelectBox value="4">
-          <Text slot="text">Item 4</Text>
+        <SelectBox value="alibaba">
+          <Paperairplane slot="icon" />
+          <Text slot="text">Alibaba Cloud</Text>
+          <Text slot="description">Asia-focused services</Text>
         </SelectBox>
-        <SelectBox value="5">
-          <Text slot="text">Item 5</Text>
+        <SelectBox value="digitalocean">
+          <Server slot="icon" />
+          <Text slot="text">DigitalOcean</Text>
+          <Text slot="description">Developer-friendly platform</Text>
         </SelectBox>
-        <SelectBox value="6">
-          <Text slot="text">Item 6</Text>
+        <SelectBox value="linode">
+          <AlertNotice slot="icon" />
+          <Text slot="text">Linode</Text>
+          <Text slot="description">Simple cloud computing</Text>
+        </SelectBox>
+        <SelectBox value="vultr">
+          <Paperairplane slot="icon" />
+          <Text slot="text">Vultr</Text>
+          <Text slot="description">High performance cloud</Text>
         </SelectBox>
       </SelectBoxGroup>
     </div>
   )
 };
 
-export const FormValidation: Story = {
-  args: {
-    label: 'Required Selection',
-    isRequired: true,
-    errorMessage: 'Please select at least one option',
-    isInvalid: true
-  },
-  render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-      <SelectBox value="option1">
-        <Text slot="text">Option 1</Text>
-      </SelectBox>
-      <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
-      </SelectBox>
-    </SelectBoxGroup>
-  )
-};
-
-// Size Variations
-export const SizeVariations: Story = {
-  render: () => (
-    <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
-      {(['S', 'M', 'L', 'XL'] as const).map((size) => (
-        <SelectBoxGroup
-          key={size}
-          size={size}
-          label={`Size ${size}`}
-          onSelectionChange={action(`onSelectionChange-${size}`)}>
-          <SelectBox value="option1">
-            <Server slot="icon" />
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <AlertNotice slot="icon" />
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      ))}
-    </div>
-  )
-};
-
-// Horizontal Orientation
-export const HorizontalOrientation: Story = {
-  args: {
-    orientation: 'horizontal',
-    label: 'Favorite cities',
-    numColumns: 1
-  },
-  render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-      <SelectBox value="paris">
-        <Text slot="text">Paris</Text>
-        <Text slot="description">France</Text>
-      </SelectBox>
-      <SelectBox value="rome">
-        <Text slot="text">Rome</Text>
-        <Text slot="description">Italy</Text>
-      </SelectBox>
-      <SelectBox value="tokyo">
-        <Text slot="text">Tokyo</Text>
-        <Text slot="description">Japan</Text>
-      </SelectBox>
-    </SelectBoxGroup>
-  )
-};
-
 // Disabled States
 export const DisabledGroup: Story = {
   args: {
@@ -254,116 +183,131 @@ export const DisabledGroup: Story = {
   )
 };
 
-export const IndividualDisabled: Story = {
-  args: {
-    label: 'Some items disabled',
-    defaultValue: 'option2'
-  },
-  render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-      <SelectBox value="option1" isDisabled>
-        <Text slot="text">Option 1 (Disabled)</Text>
-      </SelectBox>
-      <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
-      </SelectBox>
-      <SelectBox value="option3" isDisabled>
-        <Text slot="text">Option 3 (Disabled)</Text>
-      </SelectBox>
-      <SelectBox value="option4">
-        <Text slot="text">Option 4</Text>
-      </SelectBox>
-    </SelectBoxGroup>
-  )
-};
-
-function ControlledStory() {
-  const [value, setValue] = useState('option2');
+function InteractiveExamplesStory() {
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['enabled1', 'starred2']));
 
   return (
-    <div>
-      <p>Current value: {value}</p>
+    <div style={{maxWidth: 800}}>
+      <h3 style={{marginBottom: 16, fontSize: 16}}>Interactive Features Combined</h3>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        Current selection: {selectedKeys === 'all' ? 'All' : Array.from(selectedKeys).join(', ') || 'None'}
+      </p>
+      
       <SelectBoxGroup
-        label="Controlled SelectBoxGroup"
-        value={value}
-        onSelectionChange={(val) => setValue(val as string)}>
-        <SelectBox value="option1">
-          <Text slot="text">Option 1</Text>
+        label="Combined Interactive Features"
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        numColumns={4}
+        gutterWidth="default"
+        onSelectionChange={(selection) => {
+          setSelectedKeys(selection);
+          action('onSelectionChange')(selection);
+        }}>
+        
+        {/* Enabled items with dynamic icons */}
+        <SelectBox value="enabled1">
+          {selectedKeys !== 'all' && selectedKeys.has('enabled1') ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <StarIcon slot="icon" />
+          )}
+          <Text slot="text">Enabled Item 1</Text>
+          <Text slot="description">Status updates</Text>
+        </SelectBox>
+        
+        <SelectBox value="enabled2">
+          {selectedKeys !== 'all' && selectedKeys.has('enabled2') ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <StarIcon slot="icon" />
+          )}
+          <Text slot="text">Enabled Item 2</Text>
+          <Text slot="description">Click to toggle</Text>
         </SelectBox>
-        <SelectBox value="option2">
-          <Text slot="text">Option 2</Text>
+        
+        {/* Disabled item */}
+        <SelectBox value="disabled1" isDisabled>
+          <AlertNotice slot="icon" />
+          <Text slot="text">Disabled Item</Text>
+          <Text slot="description">Cannot select</Text>
         </SelectBox>
-        <SelectBox value="option3">
-          <Text slot="text">Option 3</Text>
+        
+        <SelectBox value="starred1">
+          {selectedKeys !== 'all' && selectedKeys.has('starred1') ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <StarIcon slot="icon" />
+          )}
+          <Text slot="text">Starred Item 1</Text>
+          <Text slot="description">Click to star</Text>
         </SelectBox>
-      </SelectBoxGroup>
-      <button
-        onClick={() => setValue('option1')}
-        style={{marginTop: 16, marginRight: 8}}>
-        Set to Option 1
-      </button>
-      <button onClick={() => setValue('option3')}>Set to Option 3</button>
-    </div>
-  );
-}
-
-export const Controlled: Story = {
-  render: () => <ControlledStory />
-};
-
-function DynamicIconsStory() {
-  const [selectedValues, setSelectedValues] = useState<Set<string>>(
-    new Set()
-  );
-
-  return (
-    <SelectBoxGroup
-      label="Rate these items"
-      selectionMode="multiple"
-      onSelectionChange={(val) => {
-        const values = Array.isArray(val) ? val : [val];
-        setSelectedValues(new Set(values));
-        action('onSelectionChange')(val);
-      }}>
-      {['item1', 'item2', 'item3', 'item4'].map((value) => (
-        <SelectBox key={value} value={value}>
-          {selectedValues.has(value) ? (
+        
+        <SelectBox value="starred2">
+          {selectedKeys !== 'all' && selectedKeys.has('starred2') ? (
             <StarFilledIcon slot="icon" />
           ) : (
             <StarIcon slot="icon" />
           )}
-          <Text slot="text">Item {value.slice(-1)}</Text>
+          <Text slot="text">Starred Item 2</Text>
+          <Text slot="description">Click to star</Text>
         </SelectBox>
-      ))}
-    </SelectBoxGroup>
+        
+        {/* Another disabled item */}
+        <SelectBox value="disabled2" isDisabled>
+          <Server slot="icon" />
+          <Text slot="text">Disabled Service</Text>
+          <Text slot="description">Cannot select</Text>
+        </SelectBox>
+        
+        <SelectBox value="dynamic1">
+          {selectedKeys !== 'all' && selectedKeys.has('dynamic1') ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <Paperairplane slot="icon" />
+          )}
+          <Text slot="text">Dynamic Icon</Text>
+          <Text slot="description">Click to activate</Text>
+        </SelectBox>
+        
+        <SelectBox value="controllable">
+          {selectedKeys !== 'all' && selectedKeys.has('controllable') ? (
+            <StarFilledIcon slot="icon" />
+          ) : (
+            <StarIcon slot="icon" />
+          )}
+          <Text slot="text">Controllable</Text>
+          <Text slot="description">External control available</Text>
+        </SelectBox>
+        
+      </SelectBoxGroup>
+      
+      <div style={{marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+        <Button 
+          onPress={() => setSelectedKeys(new Set(['starred1', 'starred2', 'dynamic1']))}
+          variant="secondary">
+          Select Favorites
+        </Button>
+        <Button 
+          onPress={() => setSelectedKeys(new Set())}
+          variant="secondary">
+          Clear All
+        </Button>
+        <Button 
+          onPress={() => setSelectedKeys(new Set(['enabled1', 'enabled2', 'controllable']))}
+          variant="secondary">
+          Select Enabled Only
+        </Button>
+      </div>
+    </div>
   );
 }
 
-export const DynamicIcons: Story = {
-  render: () => <DynamicIconsStory />
-};
-
-export const MultipleColumns: Story = {
-  args: {
-    label: 'Choose options',
-    numColumns: 4,
-    gutterWidth: 'spacious'
-  },
-  render: (args) => (
-    <div style={{maxWidth: 800}}>
-      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-        {Array.from({length: 8}, (_, i) => (
-          <SelectBox key={i} value={`option${i + 1}`}>
-            <Text slot="text">Option {i + 1}</Text>
-          </SelectBox>
-        ))}
-      </SelectBoxGroup>
-    </div>
-  )
+export const InteractiveExamples: Story = {
+  render: () => <InteractiveExamplesStory />
 };
 
-function FormSubmissionExample() {
-  const [selectedValues, setSelectedValues] = useState<string[]>(['newsletter']);
+function FormAndLayoutStory() {
+  const [selectedPreferences, setSelectedPreferences] = useState<Selection>(new Set(['newsletter', 'security']));
   const [submittedData, setSubmittedData] = useState<string[] | null>(null);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -375,41 +319,308 @@ function FormSubmissionExample() {
   };
 
   return (
-    <div style={{maxWidth: 400}}>
+    <div style={{maxWidth: 1000}}>
+      <h3 style={{marginBottom: 16, fontSize: 16}}>Form Integration with Multiple Columns</h3>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        8-item grid with form integration demonstrating both layout and submission capabilities.
+      </p>
+      
       <form onSubmit={handleSubmit}>
         <SelectBoxGroup
           selectionMode="multiple"
-          value={selectedValues}
-          onSelectionChange={(val) => setSelectedValues(val as string[])}
+          selectedKeys={selectedPreferences}
+          onSelectionChange={(selection) => {
+            setSelectedPreferences(selection);
+            action('onSelectionChange')(selection);
+          }}
           name="preferences"
-          label="Email Preferences"
-          isRequired>
+          label="Communication Preferences (Required)"
+          isRequired
+          numColumns={4}
+          gutterWidth="spacious">
+          
           <SelectBox value="newsletter">
+            <AlertNotice slot="icon" />
             <Text slot="text">Newsletter</Text>
+            <Text slot="description">Weekly updates and news</Text>
           </SelectBox>
+          
           <SelectBox value="marketing">
-            <Text slot="text">Marketing Updates</Text>
+            <Paperairplane slot="icon" />
+            <Text slot="text">Marketing</Text>
+            <Text slot="description">Product promotions</Text>
           </SelectBox>
+          
           <SelectBox value="product">
+            <Server slot="icon" />
             <Text slot="text">Product News</Text>
+            <Text slot="description">Feature announcements</Text>
           </SelectBox>
+          
           <SelectBox value="security">
+            <AlertNotice slot="icon" />
             <Text slot="text">Security Alerts</Text>
+            <Text slot="description">Important updates</Text>
           </SelectBox>
+          
+          <SelectBox value="events">
+            <Paperairplane slot="icon" />
+            <Text slot="text">Events</Text>
+            <Text slot="description">Webinars & conferences</Text>
+          </SelectBox>
+          
+          <SelectBox value="surveys">
+            <Server slot="icon" />
+            <Text slot="text">Surveys</Text>
+            <Text slot="description">Help us improve</Text>
+          </SelectBox>
+          
+          <SelectBox value="community">
+            <AlertNotice slot="icon" />
+            <Text slot="text">Community</Text>
+            <Text slot="description">Forum notifications</Text>
+          </SelectBox>
+          
+          <SelectBox value="support">
+            <Server slot="icon" />
+            <Text slot="text">Support</Text>
+            <Text slot="description">Help & assistance</Text>
+          </SelectBox>
+          
         </SelectBoxGroup>
         
-        <Button type="submit" variant="accent" >
-          Save Preferences
-        </Button>
+        <div style={{marginTop: 24, display: 'flex', gap: 12, alignItems: 'center'}}>
+          <Button type="submit" variant="accent">
+            Save Preferences
+          </Button>
+          <Button 
+            type="button"
+            onPress={() => setSelectedPreferences(new Set(['newsletter', 'security']))}
+            variant="secondary">
+            Reset to Default
+          </Button>
+          <span style={{fontSize: 14, color: '#666'}}>
+            Selected: {selectedPreferences === 'all' ? 'All' : selectedPreferences.size} item{(selectedPreferences === 'all' || selectedPreferences.size !== 1) ? 's' : ''}
+          </span>
+        </div>
       </form>
       
       {submittedData && (
-        <Text>Submitted: {submittedData.join(', ')}</Text>
+        <div style={{marginTop: 20, padding: 16, backgroundColor: '#f0f8ff', borderRadius: 8, border: '1px solid #b3d9ff'}}>
+          <div><strong>Form Submitted Successfully!</strong></div>
+          <div style={{marginTop: 8}}>
+            Preferences: {submittedData.length > 0 ? submittedData.join(', ') : 'None selected'}
+          </div>
+          <div style={{marginTop: 4, fontSize: 12, color: '#666'}}>
+            Form data would be sent to server with name "preferences"
+          </div>
+        </div>
       )}
     </div>
   );
 }
 
-export const FormSubmission: Story = {
-  render: () => <FormSubmissionExample />
+export const FormAndLayout: Story = {
+  render: () => <FormAndLayoutStory />
+};
+
+export const AllSlotCombinations: Story = {
+  render: () => (
+    <div style={{maxWidth: 1200, padding: 20}}>
+      <h2 style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>All Slot Combinations</h2>
+      
+      {/* Vertical Orientation */}
+      <div style={{marginBottom: 40}}>
+        <h3 style={{marginBottom: 16, fontSize: 16}}>Vertical Orientation</h3>
+        <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
+          
+          {/* Text Only */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="text-only">
+                <Text slot="text">Simple Text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Icon + Text */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="icon-text">
+                <Server slot="icon" />
+                <Text slot="text">With Icon</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Text + Description */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="text-desc">
+                <Text slot="text">Main Text</Text>
+                <Text slot="description">Additional description</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Icon + Text + Description */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="all-vertical">
+                <AlertNotice slot="icon" />
+                <Text slot="text">Full Vertical</Text>
+                <Text slot="description">Complete description</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Horizontal Orientation */}
+      <div>
+        <h3 style={{marginBottom: 16, fontSize: 16}}>Horizontal Orientation</h3>
+        <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
+          
+          {/* Text Only */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only (Optimized)</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-text-only">
+                <Text slot="text">Simple Horizontal Text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Icon + Text */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-icon-text">
+                <Paperairplane slot="icon" />
+                <Text slot="text">Horizontal with Icon</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Text + Description */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-text-desc">
+                <Text slot="text">Main Horizontal Text</Text>
+                <Text slot="description">Horizontal description text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Icon + Text + Description */}
+          <div>
+            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-all">
+                <Server slot="icon" />
+                <Text slot="text">Complete Horizontal</Text>
+                <Text slot="description">Full horizontal layout with all elements</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Comparison Grid */}
+      <div style={{marginTop: 40}}>
+        <h3 style={{marginBottom: 16, fontSize: 16}}>Side-by-Side Comparison</h3>
+        <SelectBoxGroup 
+          label="Mixed Layout Examples"
+          numColumns={4}
+          gutterWidth="spacious"
+          onSelectionChange={action('onSelectionChange')}>
+          
+          {/* Vertical examples */}
+          <SelectBox value="v1">
+            <Text slot="text">V: Text Only</Text>
+          </SelectBox>
+          
+          <SelectBox value="v2">
+            <StarIcon slot="icon" />
+            <Text slot="text">V: Icon + Text</Text>
+          </SelectBox>
+          
+          <SelectBox value="v3">
+            <Text slot="text">V: Text + Desc</Text>
+            <Text slot="description">Vertical description</Text>
+          </SelectBox>
+          
+          <SelectBox value="v4">
+            <AlertNotice slot="icon" />
+            <Text slot="text">V: All Elements</Text>
+            <Text slot="description">Complete vertical</Text>
+          </SelectBox>
+          
+        </SelectBoxGroup>
+
+        <div style={{marginTop: 20}}>
+          <SelectBoxGroup 
+            orientation="horizontal"
+            numColumns={2}
+            gutterWidth="spacious"
+            onSelectionChange={action('onSelectionChange')}>
+            
+            {/* Horizontal examples */}
+            <SelectBox value="h1">
+              <Text slot="text">H: Text Only</Text>
+            </SelectBox>
+            
+            <SelectBox value="h2">
+              <StarFilledIcon slot="icon" />
+              <Text slot="text">H: Icon + Text</Text>
+            </SelectBox>
+            
+            <SelectBox value="h3">
+              <Text slot="text">H: Text + Description</Text>
+              <Text slot="description">Horizontal description</Text>
+            </SelectBox>
+            
+            <SelectBox value="h4">
+              <Paperairplane slot="icon" />
+              <Text slot="text">H: All Elements</Text>
+              <Text slot="description">Complete horizontal layout</Text>
+            </SelectBox>
+            
+          </SelectBoxGroup>
+        </div>
+      </div>
+
+    </div>
+  )
 };

From a77932972bc5e4d00487f09aeba0057c8b4eab8f Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 28 Jul 2025 04:32:49 -0700
Subject: [PATCH 14/24] added additional props and removed s2 checkbox

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 113 +++++--
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  33 +-
 packages/@react-spectrum/s2/src/index.ts      |   2 +-
 .../s2/stories/SelectBoxGroup.stories.tsx     | 241 +++++++++++--
 .../s2/test/SelectBoxGroup.test.tsx           | 317 ++++++++++++------
 5 files changed, 524 insertions(+), 182 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index ddb2f77520a..2a35deefeb2 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -9,7 +9,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox} from './Checkbox';
+import Checkmark from '../ui-icons/Checkmark';
+import {box, iconStyles} from './Checkbox';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
@@ -31,7 +32,22 @@ export interface SelectBoxProps extends StyleProps {
   /**
    * Whether the SelectBox is disabled.
    */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  /**
+   * Whether to show the selection checkbox.
+   * @default false
+   */
+  isCheckboxDisabled?: boolean,
+  /**
+   * Whether to show the label/text content.
+   * @default false
+   */
+  isLabelDisabled?: boolean,
+  /**
+   * Whether to show the illustration/icon.
+   * @default false
+   */
+  isIllustrationDisabled?: boolean
 }
 
 export const SelectBoxSpectrumContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLDivElement>>>(null);
@@ -222,7 +238,15 @@ const SelectBoxRenderPropsContext = createContext<{
  */
 export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxSpectrumContext);
-  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;
+  let {
+    children, 
+    value, 
+    isDisabled: individualDisabled = false, 
+    isCheckboxDisabled = false,
+    isLabelDisabled = false,
+    isIllustrationDisabled = false,
+    UNSAFE_style
+  } = props;
   let divRef = useRef<HTMLDivElement | null>(null);
   let domRef = useFocusableRef(ref, divRef);
   
@@ -230,15 +254,20 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
   let {
     orientation = 'vertical',
     selectedKeys,
-    isDisabled: groupDisabled = false
+    isDisabled: groupDisabled = false,
+    isCheckboxDisabled: groupIsCheckboxDisabled = false,
+    isLabelDisabled: groupIsLabelDisabled = false,
+    isIllustrationDisabled: groupIsIllustrationDisabled = false
   } = contextValue;
 
   let renderProps = useContext(SelectBoxRenderPropsContext);
 
   const size = 'M'; //Only medium size is supported
   const isDisabled = individualDisabled || groupDisabled;
+  const finalShowCheckbox = !isCheckboxDisabled;
+  const finalShowLabel = !isLabelDisabled;
+  const finalShowIllustration = !isIllustrationDisabled;
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
-  const showCheckbox = isSelected || (!isDisabled && renderProps.isHovered);
   
   const childrenArray = React.Children.toArray(children);
   const iconSlot = childrenArray.find((child: any) => child?.props?.slot === 'icon');
@@ -264,36 +293,52 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       }, props.styles)}
       style={UNSAFE_style}>
       
-      {showCheckbox && (
+      {finalShowCheckbox && (isSelected || (!isDisabled && renderProps.isHovered)) && (
         <div 
           className={style({
             position: 'absolute',
             top: 16,
             left: 16
-          })}>
-          <Checkbox 
-            isSelected={isSelected}
-            isDisabled={isDisabled}
-            isReadOnly
-            excludeFromTabOrder
-            aria-label={isSelected ? 'Selected' : 'Select'} />
+          })}
+          aria-hidden="true">
+          <div
+            className={box({
+              isSelected: isSelected || false,
+              isDisabled,
+              isIndeterminate: false,
+              isHovered: false,
+              isFocused: false,
+              isFocusVisible: false,
+              isPressed: false,
+              isReadOnly: false,
+              isRequired: false,
+              isInvalid: false,
+              size: 'M',
+              isEmphasized: false
+            })}>
+            {isSelected && (
+              <Checkmark 
+                size="S" 
+                className={iconStyles} />
+            )}
+          </div>
         </div>
       )}
       
       {orientation === 'horizontal' ? (
         // Horizontal layout with all combinations
         <>
-          {hasIcon && (
+          {hasIcon && finalShowIllustration && (
             <div className={iconContainer({size, orientation, isDisabled})}>
               {iconSlot}
             </div>
           )}
           
-          {hasIcon || hasDescription ? (
+          {(hasIcon && finalShowIllustration) || hasDescription ? (
             // Standard horizontal layout with icon and/or description
             <div className={contentContainer({size, orientation}, props.styles)}>
               <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-                {textSlot}
+                {finalShowLabel && textSlot}
                 
                 {hasDescription && (
                   <div className={descriptionText({size, orientation, isDisabled})}>
@@ -303,33 +348,37 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
               </div>
             </div>
           ) : (
-            // Text-only horizontal layout (optimized)
-            <div className={style({
-              display: 'flex',
-              alignItems: 'center', 
-              justifyContent: 'center',
-              flexGrow: 1,
-              textAlign: 'center',
-              paddingInline: 'edge-to-text'
-            })}>
-              <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-                {textSlot}
+            // Text-only horizontal layout
+            finalShowLabel && (
+              <div className={style({
+                display: 'flex',
+                alignItems: 'center', 
+                justifyContent: 'center',
+                flexGrow: 1,
+                textAlign: 'center',
+                paddingInline: 'edge-to-text'
+              })}>
+                <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+                  {textSlot}
+                </div>
               </div>
-            </div>
+            )
           )}
         </>
       ) : (
         // Vertical layout with icon and/or description
         <>
-          {hasIcon && (
+          {hasIcon && finalShowIllustration && (
             <div className={iconContainer({size, orientation, isDisabled})}>
               {iconSlot}
             </div>
           )}
           
-          <div className={textContainer({size, orientation, isDisabled})}>
-            {textSlot}
-          </div>
+          {finalShowLabel && (
+            <div className={textContainer({size, orientation, isDisabled})}>
+              {textSlot}
+            </div>
+          )}
           
           {hasDescription && (
             <div className={style({
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index c62be8f63ec..3a5c8cdca40 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -71,6 +71,18 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * Whether the SelectBoxGroup is disabled.
    */
   isDisabled?: boolean,
+  /**
+   * Whether to disable the selection checkbox for all SelectBoxes.
+   */
+  isCheckboxDisabled?: boolean,
+  /**
+   * Whether to disable the label/text content for all SelectBoxes.
+   */
+  isLabelDisabled?: boolean,
+  /**
+   * Whether to disable the illustration/icon for all SelectBoxes.
+   */
+  isIllustrationDisabled?: boolean,
   /**
    * The name of the form field.
    */
@@ -93,16 +105,14 @@ interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   orientation?: Orientation,
   isDisabled?: boolean,
+  isCheckboxDisabled?: boolean,
+  isLabelDisabled?: boolean,
+  isIllustrationDisabled?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
 }
 
-
-
-export const SelectBoxContext = createContext<SelectBoxContextValue>({
-  orientation: 'vertical'
-});
-
+export const SelectBoxContext = createContext<SelectBoxContextValue>({ orientation: 'vertical' });
 export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const gridStyles = style({
@@ -156,6 +166,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     gutterWidth = 'default',
     isRequired = false,
     isDisabled = false,
+    isCheckboxDisabled = false,
+    isLabelDisabled = false,
+    isIllustrationDisabled = false,
     name,
     errorMessage,
     isInvalid = false,
@@ -221,12 +234,15 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         allowMultiSelect: selectionMode === 'multiple',
         orientation,
         isDisabled,
+        isCheckboxDisabled,
+        isLabelDisabled,
+        isIllustrationDisabled,
         selectedKeys,
         onSelectionChange: setSelectedKeys
       };
       return contextValue;
     },
-    [selectionMode, orientation, isDisabled, selectedKeys, setSelectedKeys]
+    [selectionMode, orientation, isDisabled, isCheckboxDisabled, isLabelDisabled, isIllustrationDisabled, selectedKeys, setSelectedKeys]
   );
 
   return (
@@ -293,7 +309,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
           const textValue = getTextValue(childElement);
           
           return (
-            <ListBoxItem key={childValue} id={childValue} textValue={textValue} className={style({outlineStyle: 'none'})}>
+            <ListBoxItem key={childValue} id={childValue} textValue={textValue} aria-label={textValue} className={style({outlineStyle: 'none'})}>
               {(renderProps) => (
                 <SelectBoxContext.Provider value={selectBoxContextValue}>
                   <SelectBoxRenderPropsContext.Provider 
@@ -328,7 +344,6 @@ function FormIntegration({name, selectedKeys, selectionMode, isRequired, isInval
     return null;
   }
 
-  // Convert Selection to array of strings for form submission
   const values = selectedKeys === 'all' ? [] : Array.from(selectedKeys).map(String);
 
   if (selectionMode === 'multiple') {
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index efa16c2fe0a..8efded57cf0 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -151,7 +151,7 @@ export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
 export type {SelectBoxProps} from './SelectBox';
-export type {SelectBoxGroupProps, SelectBoxValueType} from './SelectBoxGroup';
+export type {SelectBoxGroupProps} from './SelectBoxGroup';
 export type {SliderProps} from './Slider';
 export type {RangeCalendarProps} from './RangeCalendar';
 export type {RangeSliderProps} from './RangeSlider';
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 9721ddcd327..9b02df81d0a 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -17,7 +17,7 @@
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
-import {Button, createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
+import {Button, createIcon, Heading, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
 import React, {useState} from 'react';
@@ -102,6 +102,7 @@ export const MultipleSelection: Story = {
     selectionMode: 'multiple',
     label: 'Select your preferred services',
     defaultSelectedKeys: new Set(['aws', 'gcp']),
+
     necessityIndicator: 'icon',
     numColumns: 3,
     gutterWidth: 'default'
@@ -111,25 +112,25 @@ export const MultipleSelection: Story = {
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
         Focus any item and use arrow keys for grid navigation:
       </p>
-      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="aws">
-          <Server slot="icon" />
-          <Text slot="text">Amazon Web Services</Text>
+    <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>
+      </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>
+      </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>
+      </SelectBox>
+      <SelectBox value="oracle">
+        <Server slot="icon" />
+        <Text slot="text">Oracle Cloud</Text>
           <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
         <SelectBox value="ibm">
@@ -188,7 +189,7 @@ function InteractiveExamplesStory() {
 
   return (
     <div style={{maxWidth: 800}}>
-      <h3 style={{marginBottom: 16, fontSize: 16}}>Interactive Features Combined</h3>
+      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Interactive Features Combined</Heading>
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
         Current selection: {selectedKeys === 'all' ? 'All' : Array.from(selectedKeys).join(', ') || 'None'}
       </p>
@@ -277,7 +278,7 @@ function InteractiveExamplesStory() {
           )}
           <Text slot="text">Controllable</Text>
           <Text slot="description">External control available</Text>
-        </SelectBox>
+          </SelectBox>
         
       </SelectBoxGroup>
       
@@ -320,7 +321,7 @@ function FormAndLayoutStory() {
 
   return (
     <div style={{maxWidth: 1000}}>
-      <h3 style={{marginBottom: 16, fontSize: 16}}>Form Integration with Multiple Columns</h3>
+      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Form Integration with Multiple Columns</Heading>
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
         8-item grid with form integration demonstrating both layout and submission capabilities.
       </p>
@@ -391,8 +392,8 @@ function FormAndLayoutStory() {
         
         <div style={{marginTop: 24, display: 'flex', gap: 12, alignItems: 'center'}}>
           <Button type="submit" variant="accent">
-            Save Preferences
-          </Button>
+          Save Preferences
+        </Button>
           <Button 
             type="button"
             onPress={() => setSelectedPreferences(new Set(['newsletter', 'security']))}
@@ -424,19 +425,191 @@ export const FormAndLayout: Story = {
   render: () => <FormAndLayoutStory />
 };
 
+export const VisibilityControls: Story = {
+  render: () => (
+    <div style={{maxWidth: 1200, padding: 20}}>
+      <Heading level={2} UNSAFE_style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>Visibility Controls</Heading>
+      
+      {/* Group-level controls */}
+      <div style={{marginBottom: 40}}>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Group-level Visibility Controls</Heading>
+        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
+          
+          <div>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Checkboxes (isCheckboxDisabled=true)</Heading>
+            <SelectBoxGroup 
+              label="No Checkboxes"
+              selectionMode="multiple"
+              isCheckboxDisabled={true}
+              numColumns={3}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="item1">
+                <Server slot="icon" />
+                <Text slot="text">Item 1</Text>
+                <Text slot="description">No checkbox shown</Text>
+              </SelectBox>
+              <SelectBox value="item2">
+                <AlertNotice slot="icon" />
+                <Text slot="text">Item 2</Text>
+                <Text slot="description">No checkbox shown</Text>
+              </SelectBox>
+              <SelectBox value="item3">
+                <Paperairplane slot="icon" />
+                <Text slot="text">Item 3</Text>
+                <Text slot="description">No checkbox shown</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          <div>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Labels (isLabelDisabled=true)</Heading>
+            <SelectBoxGroup 
+              label="Icons Only"
+              isLabelDisabled={true}
+              numColumns={3}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="item1">
+                <Server slot="icon" />
+                <Text slot="text">Hidden Text 1</Text>
+                <Text slot="description">Hidden description</Text>
+              </SelectBox>
+              <SelectBox value="item2">
+                <AlertNotice slot="icon" />
+                <Text slot="text">Hidden Text 2</Text>
+                <Text slot="description">Hidden description</Text>
+              </SelectBox>
+              <SelectBox value="item3">
+                <Paperairplane slot="icon" />
+                <Text slot="text">Hidden Text 3</Text>
+                <Text slot="description">Hidden description</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          <div>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Illustrations (isIllustrationDisabled=true)</Heading>
+            <SelectBoxGroup 
+              label="Text Only"
+              isIllustrationDisabled={true}
+              numColumns={3}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="item1">
+                <Server slot="icon" />
+                <Text slot="text">Text Only 1</Text>
+                <Text slot="description">No icon shown</Text>
+              </SelectBox>
+              <SelectBox value="item2">
+                <AlertNotice slot="icon" />
+                <Text slot="text">Text Only 2</Text>
+                <Text slot="description">No icon shown</Text>
+              </SelectBox>
+              <SelectBox value="item3">
+                <Paperairplane slot="icon" />
+                <Text slot="text">Text Only 3</Text>
+                <Text slot="description">No icon shown</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Individual overrides */}
+      <div style={{marginBottom: 40}}>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Individual Overrides</Heading>
+        <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+          Group has all elements disabled, but individual items can override to enable specific elements
+        </p>
+        <SelectBoxGroup 
+          label="Group Disabled, Individual Overrides"
+          isCheckboxDisabled={true}
+          isLabelDisabled={true}
+          isIllustrationDisabled={true}
+          numColumns={4}
+          onSelectionChange={action('onSelectionChange')}>
+          
+          <SelectBox value="override1" isCheckboxDisabled={false} isLabelDisabled={false} isIllustrationDisabled={false}>
+            <Server slot="icon" />
+            <Text slot="text">All Visible</Text>
+            <Text slot="description">Individual override</Text>
+          </SelectBox>
+          
+          <SelectBox value="override2" isLabelDisabled={false}>
+            <AlertNotice slot="icon" />
+            <Text slot="text">Label Only</Text>
+            <Text slot="description">Text override</Text>
+          </SelectBox>
+          
+          <SelectBox value="override3" isIllustrationDisabled={false}>
+            <Paperairplane slot="icon" />
+            <Text slot="text">Icon Only</Text>
+            <Text slot="description">Icon override</Text>
+          </SelectBox>
+          
+          <SelectBox value="override4" isCheckboxDisabled={false}>
+            <Server slot="icon" />
+            <Text slot="text">Checkbox Only</Text>
+            <Text slot="description">Checkbox override</Text>
+          </SelectBox>
+          
+        </SelectBoxGroup>
+      </div>
+
+      {/* Combined example */}
+      <div>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Mixed Visibility</Heading>
+        <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+          Demonstrating different combinations of visibility settings
+        </p>
+        <SelectBoxGroup 
+          label="Mixed Visibility Examples"
+          selectionMode="multiple"
+          numColumns={4}
+          onSelectionChange={action('onSelectionChange')}>
+          
+          <SelectBox value="normal">
+            <Server slot="icon" />
+            <Text slot="text">Normal</Text>
+            <Text slot="description">All elements</Text>
+          </SelectBox>
+          
+          <SelectBox value="no-checkbox" isCheckboxDisabled={true}>
+            <AlertNotice slot="icon" />
+            <Text slot="text">No Checkbox</Text>
+            <Text slot="description">Hidden checkbox</Text>
+          </SelectBox>
+          
+          <SelectBox value="no-icon" isIllustrationDisabled={true}>
+            <Paperairplane slot="icon" />
+            <Text slot="text">No Icon</Text>
+            <Text slot="description">Hidden icon</Text>
+          </SelectBox>
+          
+          <SelectBox value="no-text" isLabelDisabled={true}>
+            <Server slot="icon" />
+            <Text slot="text">No Text</Text>
+            <Text slot="description">Hidden text</Text>
+          </SelectBox>
+          
+        </SelectBoxGroup>
+      </div>
+    </div>
+  )
+};
+
 export const AllSlotCombinations: Story = {
   render: () => (
     <div style={{maxWidth: 1200, padding: 20}}>
-      <h2 style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>All Slot Combinations</h2>
+      <Heading level={2} UNSAFE_style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>All Slot Combinations</Heading>
       
       {/* Vertical Orientation */}
       <div style={{marginBottom: 40}}>
-        <h3 style={{marginBottom: 16, fontSize: 16}}>Vertical Orientation</h3>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Vertical Orientation</Heading>
         <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
           
           {/* Text Only */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only</Heading>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
@@ -449,7 +622,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Icon + Text */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</Heading>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
@@ -463,7 +636,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Text + Description */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</Heading>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
@@ -477,7 +650,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Icon + Text + Description */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</Heading>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
@@ -495,12 +668,12 @@ export const AllSlotCombinations: Story = {
 
       {/* Horizontal Orientation */}
       <div>
-        <h3 style={{marginBottom: 16, fontSize: 16}}>Horizontal Orientation</h3>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Horizontal Orientation</Heading>
         <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
           
           {/* Text Only */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only (Optimized)</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only (Optimized)</Heading>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
@@ -513,7 +686,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Icon + Text */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</Heading>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
@@ -527,7 +700,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Text + Description */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</Heading>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
@@ -541,7 +714,7 @@ export const AllSlotCombinations: Story = {
 
           {/* Icon + Text + Description */}
           <div>
-            <h4 style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</h4>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</Heading>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
@@ -559,7 +732,7 @@ export const AllSlotCombinations: Story = {
 
       {/* Comparison Grid */}
       <div style={{marginTop: 40}}>
-        <h3 style={{marginBottom: 16, fontSize: 16}}>Side-by-Side Comparison</h3>
+        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Side-by-Side Comparison</Heading>
         <SelectBoxGroup 
           label="Mixed Layout Examples"
           numColumns={4}
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 305c6b80d0e..b770e729dc9 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -2,14 +2,15 @@ import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal'
 import {Button, SelectBox, SelectBoxGroup, Text} from '../src';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import {Selection} from '@react-types/shared';
 
 function SingleSelectBox() {
-  const [value, setValue] = React.useState('');
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
   return (
     <SelectBoxGroup
       selectionMode="single"
-      onSelectionChange={(val) => setValue(val as string)}
-      value={value}
+      onSelectionChange={setSelectedKeys}
+      selectedKeys={selectedKeys}
       label="Single select test">
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
@@ -25,12 +26,12 @@ function SingleSelectBox() {
 }
 
 function MultiSelectBox() {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
   return (
     <SelectBoxGroup
       selectionMode="multiple"
-      onSelectionChange={(val) => setValue(val as string[])}
-      value={value}
+      onSelectionChange={setSelectedKeys}
+      selectedKeys={selectedKeys}
       label="Multi select test">
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
@@ -50,7 +51,7 @@ function DisabledSelectBox() {
     <SelectBoxGroup
       selectionMode="single"
       onSelectionChange={() => {}}
-      value=""
+      selectedKeys={new Set()}
       isDisabled
       label="Disabled select test">
       <SelectBox value="option1">
@@ -65,24 +66,24 @@ function DisabledSelectBox() {
 
 describe('SelectBoxGroup', () => {
   describe('Basic functionality', () => {
-    it('renders as a grid with rows', () => {
+    it('renders as a listbox with options', () => {
       render(<SingleSelectBox />);
-      expect(screen.getByRole('grid', {name: 'Single select test'})).toBeInTheDocument();
-      expect(screen.getAllByRole('row')).toHaveLength(3);
+      expect(screen.getByRole('listbox', {name: 'Single select test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(3);
       expect(screen.getByText('Option 1')).toBeInTheDocument();
     });
 
     it('renders multiple selection mode', () => {
       render(<MultiSelectBox />);
-      expect(screen.getByRole('grid', {name: 'Multi select test'})).toBeInTheDocument();
-      expect(screen.getAllByRole('row')).toHaveLength(3);
+      expect(screen.getByRole('listbox', {name: 'Multi select test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).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'))!;
+      const options = screen.getAllByRole('option');
+      const option1 = options.find(option => option.textContent?.includes('Option 1'))!;
       
       await userEvent.click(option1);
       expect(option1).toHaveAttribute('aria-selected', 'true');
@@ -90,9 +91,9 @@ describe('SelectBoxGroup', () => {
 
     it('handles multiple selection', async () => {
       render(<MultiSelectBox />);
-      const rows = screen.getAllByRole('row');
-      const option1 = rows.find(row => row.textContent?.includes('Option 1'))!;
-      const option2 = rows.find(row => row.textContent?.includes('Option 2'))!;
+      const options = screen.getAllByRole('option');
+      const option1 = options.find(option => option.textContent?.includes('Option 1'))!;
+      const option2 = options.find(option => option.textContent?.includes('Option 2'))!;
       
       await userEvent.click(option1);
       await userEvent.click(option2);
@@ -103,11 +104,11 @@ describe('SelectBoxGroup', () => {
 
     it('handles disabled state', () => {
       render(<DisabledSelectBox />);
-      const grid = screen.getByRole('grid');
-      expect(grid).toBeInTheDocument();
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toBeInTheDocument();
       
-      const rows = screen.getAllByRole('row');
-      expect(rows.length).toBeGreaterThan(0);
+      const options = screen.getAllByRole('option');
+      expect(options.length).toBeGreaterThan(0);
     });
   });
 
@@ -117,7 +118,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="option1" 
+          selectedKeys={new Set(['option1'])}
           label="Checkbox test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -128,12 +129,12 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const selectedRow = screen.getByRole('row', {name: 'Option 1'});
+      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
       expect(selectedRow).toHaveAttribute('aria-selected', 'true');
       
-      const checkbox = selectedRow.querySelector('input[type="checkbox"]');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toBeChecked();
+      // Look for visual checkbox indicator (the UI checkbox div)
+      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).toBeInTheDocument();
     });
 
     it('shows checkbox on hover for non-disabled items', async () => {
@@ -141,7 +142,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="Hover test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -149,12 +150,13 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const row = screen.getByRole('row', {name: 'Option 1'});
+      const row = screen.getByRole('option', {name: 'Option 1'});
       
       await userEvent.hover(row);
       await waitFor(() => {
-        const checkbox = row.querySelector('input[type="checkbox"]');
-        expect(checkbox).toBeInTheDocument();
+        // Check for visual checkbox indicator on hover
+        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+        expect(checkboxDiv).toBeInTheDocument();
       });
     });
 
@@ -163,7 +165,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="Disabled hover test">
           <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
@@ -171,13 +173,14 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const row = screen.getByRole('row', {name: 'Option 1'});
+      const row = screen.getByRole('option', {name: 'Option 1'});
       
       await userEvent.hover(row);
       
       await waitFor(() => {
-        const checkbox = row.querySelector('input[type="checkbox"]');
-        expect(checkbox).not.toBeInTheDocument();
+        // Should not show checkbox for disabled items
+        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+        expect(checkboxDiv).not.toBeInTheDocument();
       }, {timeout: 1000});
     });
 
@@ -186,7 +189,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          defaultValue="option1"
+          defaultSelectedKeys={new Set(['option1'])}
           label="Disabled selected test">
           <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
@@ -194,11 +197,10 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const row = screen.getByRole('row', {name: 'Option 1'});
+      const row = screen.getByRole('option', {name: 'Option 1'});
       
-      const checkbox = row.querySelector('input[type="checkbox"]');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toBeChecked();
+      const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).toBeInTheDocument();
     });
   });
 
@@ -208,15 +210,14 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
-          size="L" 
+          selectedKeys={new Set()}
           label="Size test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('grid', {name: 'Size test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox', {name: 'Size test'})).toBeInTheDocument();
     });
 
     it('supports horizontal orientation', () => {
@@ -224,7 +225,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           orientation="horizontal" 
           label="Orientation test">
           <SelectBox value="option1">
@@ -232,7 +233,7 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('grid', {name: 'Orientation test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox', {name: 'Orientation test'})).toBeInTheDocument();
     });
 
     it('supports required state', () => {
@@ -240,7 +241,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           isRequired 
           label="Required test">
           <SelectBox value="option1">
@@ -248,8 +249,8 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      const grid = screen.getByRole('grid', {name: 'Required test'});
-      expect(grid).toBeInTheDocument();
+      const listbox = screen.getByRole('listbox', {name: 'Required test'});
+      expect(listbox).toBeInTheDocument();
       expect(screen.getByText('Required test')).toBeInTheDocument();
     });
 
@@ -258,7 +259,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           isInvalid 
           errorMessage="Please select an option"
           label="Validation test">
@@ -267,13 +268,13 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      const grid = screen.getByRole('grid', {name: 'Validation test'});
-      expect(grid).toBeInTheDocument();
+      const listbox = screen.getByRole('listbox', {name: 'Validation test'});
+      expect(listbox).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);
+      expect(listbox.getAttribute('aria-describedby')).toBe(errorMessage.id);
     });
   });
 
@@ -283,7 +284,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="option1" 
+          selectedKeys={new Set(['option1'])}
           label="Initial value test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -294,8 +295,8 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('row', {name: 'Option 1'});
-      const option2 = screen.getByRole('row', {name: 'Option 2'});
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
       
       expect(option1).toHaveAttribute('aria-selected', 'true');
       expect(option2).toHaveAttribute('aria-selected', 'false');
@@ -306,7 +307,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="multiple" 
           onSelectionChange={() => {}}
-          value={['option1', 'option2']}
+          selectedKeys={new Set(['option1', 'option2'])}
           label="Multiple initial test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -320,9 +321,9 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('row', {name: 'Option 1'});
-      const option2 = screen.getByRole('row', {name: 'Option 2'});
-      const option3 = screen.getByRole('row', {name: 'Option 3'});
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      const option3 = screen.getByRole('option', {name: 'Option 3'});
       
       expect(option1).toHaveAttribute('aria-selected', 'true');
       expect(option2).toHaveAttribute('aria-selected', 'true');
@@ -335,7 +336,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={onSelectionChange}
-          value=""
+          selectedKeys={new Set()}
           label="Callback test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -346,19 +347,21 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
       await userEvent.click(option1);
       
-      expect(onSelectionChange).toHaveBeenCalledWith('option1');
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
     });
 
-    it('calls onSelectionChange with array for multiple selection', async () => {
+    it('calls onSelectionChange with Set for multiple selection', async () => {
       const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
           selectionMode="multiple"
           onSelectionChange={onSelectionChange}
-          value={[]}
+          selectedKeys={new Set()}
           label="Multiple callback test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -369,10 +372,12 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
       await userEvent.click(option1);
       
-      expect(onSelectionChange).toHaveBeenCalledWith(['option1']);
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
     });
   });
 
@@ -382,7 +387,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="multiple"
           onSelectionChange={() => {}}
-          value={['option1', 'option2']}
+          selectedKeys={new Set(['option1', 'option2'])}
           name="test-field"
           label="Form test">
           <SelectBox value="option1">
@@ -405,7 +410,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={() => {}}
-          value="option1"
+          selectedKeys={new Set(['option1'])}
           name="test-field"
           label="Single form test">
           <SelectBox value="option1">
@@ -432,7 +437,7 @@ describe('SelectBoxGroup', () => {
           <SelectBoxGroup
             selectionMode="multiple"
             onSelectionChange={() => {}}
-            value={['option1', 'option3']}
+            selectedKeys={new Set(['option1', 'option3'])}
             name="preferences"
             label="User Preferences">
             <SelectBox value="option1">
@@ -466,7 +471,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={() => {}}
-          value=""
+          selectedKeys={new Set()}
           label="Individual disabled test">
           <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
@@ -477,7 +482,7 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const rows = screen.getAllByRole('row');
+      const rows = screen.getAllByRole('option');
       expect(rows.length).toBe(2);
     });
 
@@ -487,7 +492,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={onSelectionChange}
-          value=""
+          selectedKeys={new Set()}
           label="Disabled interaction test">
           <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
@@ -495,7 +500,7 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('row', {name: 'Option 1'});
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
       await userEvent.click(option1);
       
       expect(onSelectionChange).not.toHaveBeenCalled();
@@ -508,7 +513,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={() => {}}
-          value=""
+          selectedKeys={new Set()}
           numColumns={2}
           label="Navigation test">
           <SelectBox value="option1">
@@ -526,18 +531,18 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const grid = screen.getByRole('grid');
-      const rows = screen.getAllByRole('row');
+      const listbox = screen.getByRole('listbox');
+      const options = screen.getAllByRole('option');
       
-      expect(grid).toBeInTheDocument();
-      expect(rows).toHaveLength(4);
+      expect(listbox).toBeInTheDocument();
+      expect(options).toHaveLength(4);
       
-      expect(grid).toHaveStyle('grid-template-columns: repeat(2, 1fr)');
+      expect(listbox).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();
+      expect(screen.getByRole('option', {name: 'Option 1'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 2'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 3'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 4'})).toBeInTheDocument();
     });
 
     it('supports space key selection', async () => {
@@ -546,7 +551,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup
           selectionMode="single"
           onSelectionChange={onSelectionChange}
-          value=""
+          selectedKeys={new Set()}
           label="Space key test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -554,15 +559,59 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      const grid = screen.getByRole('grid');
+      const listbox = screen.getByRole('listbox');
       await act(async () => {
-        grid.focus();
+        listbox.focus();
       });
       
       await act(async () => {
         await userEvent.keyboard(' ');
       });
-      expect(onSelectionChange).toHaveBeenCalledWith('option1');
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
+  });
+
+  describe('Visibility controls', () => {
+    it('supports checkbox visibility controls', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1'])}
+          isCheckboxDisabled={true}
+          label="Checkbox disabled test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
+      // Should not show checkbox when isCheckboxDisabled is true
+      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).not.toBeInTheDocument();
+    });
+
+    it('supports individual visibility overrides', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1'])}
+          isCheckboxDisabled={true}
+          label="Individual override test">
+          <SelectBox value="option1" isCheckboxDisabled={false}>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
+      // Should show checkbox when individual override is false and item is selected
+      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).toBeInTheDocument();
     });
   });
 
@@ -577,7 +626,7 @@ describe('SelectBoxGroup', () => {
 
     it('validates minimum children', () => {
       render(
-        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Min children test">
+        <SelectBoxGroup onSelectionChange={() => {}} selectedKeys={new Set()} label="Min children test">
           {[]}
         </SelectBoxGroup>
       );
@@ -595,7 +644,7 @@ describe('SelectBoxGroup', () => {
       ));
       
       render(
-        <SelectBoxGroup onSelectionChange={() => {}} value="" label="Max children test">
+        <SelectBoxGroup onSelectionChange={() => {}} selectedKeys={new Set()} label="Max children test">
           {manyChildren}
         </SelectBoxGroup>
       );
@@ -607,12 +656,12 @@ describe('SelectBoxGroup', () => {
   });
 
   describe('Accessibility', () => {
-    it('has proper grid structure', () => {
+    it('has proper listbox structure', () => {
       render(
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="ARIA test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -623,9 +672,8 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      expect(screen.getByRole('grid', {name: 'ARIA test'})).toBeInTheDocument();
-      expect(screen.getAllByRole('row')).toHaveLength(2);
-      expect(screen.getAllByRole('gridcell')).toHaveLength(2);
+      expect(screen.getByRole('listbox', {name: 'ARIA test'})).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(2);
     });
 
     it('associates labels correctly', () => {
@@ -633,7 +681,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="Choose option">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -641,8 +689,8 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      const grid = screen.getByRole('grid', {name: 'Choose option'});
-      expect(grid).toBeInTheDocument();
+      const listbox = screen.getByRole('listbox', {name: 'Choose option'});
+      expect(listbox).toBeInTheDocument();
     });
 
     it('supports aria-describedby for error messages', () => {
@@ -650,7 +698,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           isInvalid
           errorMessage="Error occurred"
           label="Error test">
@@ -660,10 +708,10 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      const grid = screen.getByRole('grid');
+      const listbox = screen.getByRole('listbox');
       const errorMessage = screen.getByText('Error occurred');
       
-      expect(grid).toHaveAttribute('aria-describedby');
+      expect(listbox).toHaveAttribute('aria-describedby');
       expect(errorMessage).toBeInTheDocument();
     });
   });
@@ -674,7 +722,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           orientation="horizontal"
           label="Complex children test">
           <SelectBox value="option1">
@@ -694,7 +742,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="Empty value test">
           <SelectBox value="">
             <Text slot="text">Empty Value</Text>
@@ -702,7 +750,7 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      const row = screen.getByRole('row', {name: 'Empty Value'});
+      const row = screen.getByRole('option', {name: 'Empty Value'});
       expect(row).toBeInTheDocument();
     });
 
@@ -711,7 +759,7 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           gutterWidth="compact" 
           label="Gutter test">
           <SelectBox value="option1">
@@ -719,7 +767,7 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('grid', {name: 'Gutter test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox', {name: 'Gutter test'})).toBeInTheDocument();
     });
 
     it('handles emphasized style', () => {
@@ -727,14 +775,71 @@ describe('SelectBoxGroup', () => {
         <SelectBoxGroup 
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          value="" 
+          selectedKeys={new Set()}
           label="Emphasized test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('grid', {name: 'Emphasized test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox', {name: 'Emphasized test'})).toBeInTheDocument();
+    });
+
+    it('handles "all" selection', () => {
+      render(
+        <SelectBoxGroup 
+          selectionMode="multiple" 
+          onSelectionChange={() => {}} 
+          selectedKeys="all"
+          label="All selected 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('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('handles controlled component updates', async () => {
+      function ControlledTest() {
+        const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+        
+        return (
+          <div>
+            <button onClick={() => setSelectedKeys(new Set(['option2']))}>
+              Select Option 2
+            </button>
+            <SelectBoxGroup 
+              selectionMode="single" 
+              onSelectionChange={setSelectedKeys} 
+              selectedKeys={selectedKeys}
+              label="Controlled test">
+              <SelectBox value="option1">
+                <Text slot="text">Option 1</Text>
+              </SelectBox>
+              <SelectBox value="option2">
+                <Text slot="text">Option 2</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+        );
+      }
+
+      render(<ControlledTest />);
+      
+      const button = screen.getByRole('button', {name: 'Select Option 2'});
+      await userEvent.click(button);
+      
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option2).toHaveAttribute('aria-selected', 'true');
     });
   });
 });

From eb96cbaa23e00c100e3bacb824358dc7be1ac46b Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Mon, 28 Jul 2025 15:31:49 -0700
Subject: [PATCH 15/24] revised tests, added additional props, swapped to UI
 checkmark to avoid accessibility issues

---
 packages/@react-spectrum/s2/src/SelectBox.tsx |  81 ++--
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  36 +-
 .../s2/stories/SelectBoxGroup.stories.tsx     |  84 ++--
 .../s2/test/SelectBoxGroup.test.tsx           | 379 +++++++++++++++++-
 4 files changed, 465 insertions(+), 115 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 2a35deefeb2..6355827e934 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -9,13 +9,13 @@
  * governing permissions and limitations under the License.
  */
 
-import Checkmark from '../ui-icons/Checkmark';
 import {box, iconStyles} from './Checkbox';
+import Checkmark from '../ui-icons/Checkmark';
+import {ContextValue} from 'react-aria-components';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {ContextValue} from 'react-aria-components';
-import {SelectBoxContext, SelectBoxGroupContext} from './SelectBoxGroup';
+import {SelectBoxContext} from './SelectBoxGroup';
 import {style} from '../style' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -34,20 +34,20 @@ export interface SelectBoxProps extends StyleProps {
    */
   isDisabled?: boolean,
   /**
-   * Whether to show the selection checkbox.
+   * Whether to hide the selection checkbox.
    * @default false
    */
-  isCheckboxDisabled?: boolean,
+  isCheckboxHidden?: boolean,
   /**
-   * Whether to show the label/text content.
+   * Whether to hide the label/text content.
    * @default false
    */
-  isLabelDisabled?: boolean,
+  isLabelHidden?: boolean,
   /**
-   * Whether to show the illustration/icon.
+   * Whether to hide the illustration/icon.
    * @default false
    */
-  isIllustrationDisabled?: boolean
+  isIllustrationHidden?: boolean
 }
 
 export const SelectBoxSpectrumContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLDivElement>>>(null);
@@ -242,9 +242,9 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     children, 
     value, 
     isDisabled: individualDisabled = false, 
-    isCheckboxDisabled = false,
-    isLabelDisabled = false,
-    isIllustrationDisabled = false,
+    isCheckboxHidden = false,
+    isLabelHidden = false,
+    isIllustrationHidden = false,
     UNSAFE_style
   } = props;
   let divRef = useRef<HTMLDivElement | null>(null);
@@ -255,18 +255,15 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     orientation = 'vertical',
     selectedKeys,
     isDisabled: groupDisabled = false,
-    isCheckboxDisabled: groupIsCheckboxDisabled = false,
-    isLabelDisabled: groupIsLabelDisabled = false,
-    isIllustrationDisabled: groupIsIllustrationDisabled = false
+    isCheckboxHidden: groupIsCheckboxHidden = false,
+    isLabelHidden: groupIsLabelHidden = false,
+    isIllustrationHidden: groupIsIllustrationHidden = false
   } = contextValue;
 
   let renderProps = useContext(SelectBoxRenderPropsContext);
 
-  const size = 'M'; //Only medium size is supported
+  const size = 'M'; // Only medium size is supported
   const isDisabled = individualDisabled || groupDisabled;
-  const finalShowCheckbox = !isCheckboxDisabled;
-  const finalShowLabel = !isLabelDisabled;
-  const finalShowIllustration = !isIllustrationDisabled;
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
   
   const childrenArray = React.Children.toArray(children);
@@ -293,7 +290,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       }, props.styles)}
       style={UNSAFE_style}>
       
-      {finalShowCheckbox && (isSelected || (!isDisabled && renderProps.isHovered)) && (
+      {!(isCheckboxHidden || groupIsCheckboxHidden) && (isSelected || (!isDisabled && renderProps.isHovered)) && (
         <div 
           className={style({
             position: 'absolute',
@@ -328,17 +325,17 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       {orientation === 'horizontal' ? (
         // Horizontal layout with all combinations
         <>
-          {hasIcon && finalShowIllustration && (
+          {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
             <div className={iconContainer({size, orientation, isDisabled})}>
               {iconSlot}
             </div>
           )}
           
-          {(hasIcon && finalShowIllustration) || hasDescription ? (
+          {(hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden)) || hasDescription ? (
             // Standard horizontal layout with icon and/or description
             <div className={contentContainer({size, orientation}, props.styles)}>
               <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-                {finalShowLabel && textSlot}
+                {!(isLabelHidden || groupIsLabelHidden) && textSlot}
                 
                 {hasDescription && (
                   <div className={descriptionText({size, orientation, isDisabled})}>
@@ -349,15 +346,16 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
             </div>
           ) : (
             // Text-only horizontal layout
-            finalShowLabel && (
-              <div className={style({
-                display: 'flex',
-                alignItems: 'center', 
-                justifyContent: 'center',
-                flexGrow: 1,
-                textAlign: 'center',
-                paddingInline: 'edge-to-text'
-              })}>
+            !(isLabelHidden || groupIsLabelHidden) && (
+              <div 
+                className={style({
+                  display: 'flex',
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  flexGrow: 1,
+                  textAlign: 'center',
+                  paddingInline: 'edge-to-text'
+                })}>
                 <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
                   {textSlot}
                 </div>
@@ -368,26 +366,27 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       ) : (
         // Vertical layout with icon and/or description
         <>
-          {hasIcon && finalShowIllustration && (
+          {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
             <div className={iconContainer({size, orientation, isDisabled})}>
               {iconSlot}
             </div>
           )}
           
-          {finalShowLabel && (
+          {!(isLabelHidden || groupIsLabelHidden) && (
             <div className={textContainer({size, orientation, isDisabled})}>
               {textSlot}
             </div>
           )}
           
           {hasDescription && (
-            <div className={style({
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              textAlign: 'center',
-              marginTop: 'text-to-visual'
-            })}>
+            <div 
+              className={style({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                marginTop: 'text-to-visual'
+              })}>
               <div className={descriptionText({size, orientation, isDisabled})}>
                 {descriptionSlot}
               </div>
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 3a5c8cdca40..b0a14949878 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -72,17 +72,17 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    */
   isDisabled?: boolean,
   /**
-   * Whether to disable the selection checkbox for all SelectBoxes.
+   * Whether to hide the selection checkbox for all SelectBoxes.
    */
-  isCheckboxDisabled?: boolean,
+  isCheckboxHidden?: boolean,
   /**
-   * Whether to disable the label/text content for all SelectBoxes.
+   * Whether to hide the label/text content for all SelectBoxes.
    */
-  isLabelDisabled?: boolean,
+  isLabelHidden?: boolean,
   /**
-   * Whether to disable the illustration/icon for all SelectBoxes.
+   * Whether to hide the illustration/icon for all SelectBoxes.
    */
-  isIllustrationDisabled?: boolean,
+  isIllustrationHidden?: boolean,
   /**
    * The name of the form field.
    */
@@ -105,14 +105,14 @@ interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   orientation?: Orientation,
   isDisabled?: boolean,
-  isCheckboxDisabled?: boolean,
-  isLabelDisabled?: boolean,
-  isIllustrationDisabled?: boolean,
+  isCheckboxHidden?: boolean,
+  isLabelHidden?: boolean,
+  isIllustrationHidden?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
 }
 
-export const SelectBoxContext = createContext<SelectBoxContextValue>({ orientation: 'vertical' });
+export const SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});
 export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const gridStyles = style({
@@ -124,7 +124,7 @@ const gridStyles = style({
       compact: 8,
       spacious: 24
     }
-  },
+  }
 }, getAllowedOverrides());
 
 const containerStyles = style({
@@ -166,9 +166,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     gutterWidth = 'default',
     isRequired = false,
     isDisabled = false,
-    isCheckboxDisabled = false,
-    isLabelDisabled = false,
-    isIllustrationDisabled = false,
+    isCheckboxHidden = false,
+    isLabelHidden = false,
+    isIllustrationHidden = false,
     name,
     errorMessage,
     isInvalid = false,
@@ -234,15 +234,15 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         allowMultiSelect: selectionMode === 'multiple',
         orientation,
         isDisabled,
-        isCheckboxDisabled,
-        isLabelDisabled,
-        isIllustrationDisabled,
+        isCheckboxHidden,
+        isLabelHidden,
+        isIllustrationHidden,
         selectedKeys,
         onSelectionChange: setSelectedKeys
       };
       return contextValue;
     },
-    [selectionMode, orientation, isDisabled, isCheckboxDisabled, isLabelDisabled, isIllustrationDisabled, selectedKeys, setSelectedKeys]
+    [selectionMode, orientation, isDisabled, isCheckboxHidden, isLabelHidden, isIllustrationHidden, selectedKeys, setSelectedKeys]
   );
 
   return (
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 9b02df81d0a..002368a843d 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -21,10 +21,10 @@ import {Button, createIcon, Heading, SelectBox, SelectBoxGroup, Text} from '../s
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
 import React, {useState} from 'react';
+import type {Selection} from 'react-aria-components';
 import Server from '../spectrum-illustrations/linear/Server';
 import StarFilledSVG from '../s2wf-icons/S2_Icon_StarFilled_20_N.svg';
 import StarSVG from '../s2wf-icons/S2_Icon_Star_20_N.svg';
-import type {Selection} from 'react-aria-components';
 
 const StarIcon = createIcon(StarSVG);
 const StarFilledIcon = createIcon(StarFilledSVG);
@@ -112,25 +112,25 @@ export const MultipleSelection: Story = {
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
         Focus any item and use arrow keys for grid navigation:
       </p>
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-      <SelectBox value="aws">
-        <Server slot="icon" />
-        <Text slot="text">Amazon Web Services</Text>
+      <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>
+        </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>
+        </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>
+        </SelectBox>
+        <SelectBox value="oracle">
+          <Server slot="icon" />
+          <Text slot="text">Oracle Cloud</Text>
           <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
         <SelectBox value="ibm">
@@ -168,7 +168,7 @@ export const DisabledGroup: Story = {
   args: {
     label: 'Disabled Group',
     isDisabled: true,
-    defaultValue: 'option1'
+    defaultSelectedKeys: new Set(['option1'])
   },
   render: (args) => (
     <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
@@ -204,7 +204,6 @@ function InteractiveExamplesStory() {
           setSelectedKeys(selection);
           action('onSelectionChange')(selection);
         }}>
-        
         {/* Enabled items with dynamic icons */}
         <SelectBox value="enabled1">
           {selectedKeys !== 'all' && selectedKeys.has('enabled1') ? (
@@ -215,7 +214,6 @@ function InteractiveExamplesStory() {
           <Text slot="text">Enabled Item 1</Text>
           <Text slot="description">Status updates</Text>
         </SelectBox>
-        
         <SelectBox value="enabled2">
           {selectedKeys !== 'all' && selectedKeys.has('enabled2') ? (
             <StarFilledIcon slot="icon" />
@@ -225,14 +223,12 @@ function InteractiveExamplesStory() {
           <Text slot="text">Enabled Item 2</Text>
           <Text slot="description">Click to toggle</Text>
         </SelectBox>
-        
         {/* Disabled item */}
         <SelectBox value="disabled1" isDisabled>
           <AlertNotice slot="icon" />
           <Text slot="text">Disabled Item</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
-        
         <SelectBox value="starred1">
           {selectedKeys !== 'all' && selectedKeys.has('starred1') ? (
             <StarFilledIcon slot="icon" />
@@ -242,7 +238,6 @@ function InteractiveExamplesStory() {
           <Text slot="text">Starred Item 1</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
-        
         <SelectBox value="starred2">
           {selectedKeys !== 'all' && selectedKeys.has('starred2') ? (
             <StarFilledIcon slot="icon" />
@@ -252,14 +247,11 @@ function InteractiveExamplesStory() {
           <Text slot="text">Starred Item 2</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
-        
-        {/* Another disabled item */}
         <SelectBox value="disabled2" isDisabled>
           <Server slot="icon" />
           <Text slot="text">Disabled Service</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
-        
         <SelectBox value="dynamic1">
           {selectedKeys !== 'all' && selectedKeys.has('dynamic1') ? (
             <StarFilledIcon slot="icon" />
@@ -269,7 +261,6 @@ function InteractiveExamplesStory() {
           <Text slot="text">Dynamic Icon</Text>
           <Text slot="description">Click to activate</Text>
         </SelectBox>
-        
         <SelectBox value="controllable">
           {selectedKeys !== 'all' && selectedKeys.has('controllable') ? (
             <StarFilledIcon slot="icon" />
@@ -278,8 +269,7 @@ function InteractiveExamplesStory() {
           )}
           <Text slot="text">Controllable</Text>
           <Text slot="description">External control available</Text>
-          </SelectBox>
-        
+        </SelectBox>
       </SelectBoxGroup>
       
       <div style={{marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
@@ -392,8 +382,8 @@ function FormAndLayoutStory() {
         
         <div style={{marginTop: 24, display: 'flex', gap: 12, alignItems: 'center'}}>
           <Button type="submit" variant="accent">
-          Save Preferences
-        </Button>
+            Save Preferences
+          </Button>
           <Button 
             type="button"
             onPress={() => setSelectedPreferences(new Set(['newsletter', 'security']))}
@@ -436,11 +426,11 @@ export const VisibilityControls: Story = {
         <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
           
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Checkboxes (isCheckboxDisabled=true)</Heading>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Checkboxes (isCheckboxHidden=true)</Heading>
             <SelectBoxGroup 
               label="No Checkboxes"
               selectionMode="multiple"
-              isCheckboxDisabled={true}
+              isCheckboxHidden
               numColumns={3}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="item1">
@@ -462,10 +452,10 @@ export const VisibilityControls: Story = {
           </div>
 
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Labels (isLabelDisabled=true)</Heading>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Labels (isLabelHidden=true)</Heading>
             <SelectBoxGroup 
               label="Icons Only"
-              isLabelDisabled={true}
+              isLabelHidden
               numColumns={3}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="item1">
@@ -487,10 +477,10 @@ export const VisibilityControls: Story = {
           </div>
 
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Illustrations (isIllustrationDisabled=true)</Heading>
+            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Illustrations (isIllustrationHidden=true)</Heading>
             <SelectBoxGroup 
               label="Text Only"
-              isIllustrationDisabled={true}
+              isIllustrationHidden
               numColumns={3}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="item1">
@@ -522,31 +512,31 @@ export const VisibilityControls: Story = {
         </p>
         <SelectBoxGroup 
           label="Group Disabled, Individual Overrides"
-          isCheckboxDisabled={true}
-          isLabelDisabled={true}
-          isIllustrationDisabled={true}
+          isCheckboxHidden
+          isLabelHidden
+          isIllustrationHidden
           numColumns={4}
           onSelectionChange={action('onSelectionChange')}>
           
-          <SelectBox value="override1" isCheckboxDisabled={false} isLabelDisabled={false} isIllustrationDisabled={false}>
+          <SelectBox value="override1">
             <Server slot="icon" />
             <Text slot="text">All Visible</Text>
             <Text slot="description">Individual override</Text>
           </SelectBox>
           
-          <SelectBox value="override2" isLabelDisabled={false}>
+          <SelectBox value="override2">
             <AlertNotice slot="icon" />
             <Text slot="text">Label Only</Text>
             <Text slot="description">Text override</Text>
           </SelectBox>
           
-          <SelectBox value="override3" isIllustrationDisabled={false}>
+          <SelectBox value="override3">
             <Paperairplane slot="icon" />
             <Text slot="text">Icon Only</Text>
             <Text slot="description">Icon override</Text>
           </SelectBox>
           
-          <SelectBox value="override4" isCheckboxDisabled={false}>
+          <SelectBox value="override4">
             <Server slot="icon" />
             <Text slot="text">Checkbox Only</Text>
             <Text slot="description">Checkbox override</Text>
@@ -573,19 +563,19 @@ export const VisibilityControls: Story = {
             <Text slot="description">All elements</Text>
           </SelectBox>
           
-          <SelectBox value="no-checkbox" isCheckboxDisabled={true}>
+          <SelectBox value="no-checkbox" isCheckboxHidden>
             <AlertNotice slot="icon" />
             <Text slot="text">No Checkbox</Text>
             <Text slot="description">Hidden checkbox</Text>
           </SelectBox>
           
-          <SelectBox value="no-icon" isIllustrationDisabled={true}>
+          <SelectBox value="no-icon" isIllustrationHidden>
             <Paperairplane slot="icon" />
             <Text slot="text">No Icon</Text>
             <Text slot="description">Hidden icon</Text>
           </SelectBox>
           
-          <SelectBox value="no-text" isLabelDisabled={true}>
+          <SelectBox value="no-text" isLabelHidden>
             <Server slot="icon" />
             <Text slot="text">No Text</Text>
             <Text slot="description">Hidden text</Text>
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index b770e729dc9..18ecd042511 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,8 +1,9 @@
 import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal';
 import {Button, SelectBox, SelectBoxGroup, Text} from '../src';
+import Calendar from '../spectrum-illustrations/linear/Calendar';
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import {Selection} from '@react-types/shared';
+import userEvent from '@testing-library/user-event';
 
 function SingleSelectBox() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
@@ -580,7 +581,7 @@ describe('SelectBoxGroup', () => {
           selectionMode="multiple"
           onSelectionChange={() => {}}
           selectedKeys={new Set(['option1'])}
-          isCheckboxDisabled={true}
+          isCheckboxHidden
           label="Checkbox disabled test">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
@@ -589,30 +590,205 @@ describe('SelectBoxGroup', () => {
       );
 
       const selectedRow = screen.getByRole('option', {name: 'Option 1'});
-      // Should not show checkbox when isCheckboxDisabled is true
+      // Should not show checkbox when isCheckboxHidden is true at group level
       const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
       expect(checkboxDiv).not.toBeInTheDocument();
     });
 
-    it('supports individual visibility overrides', () => {
+    it('supports individual visibility controls', () => {
       render(
         <SelectBoxGroup
           selectionMode="multiple"
           onSelectionChange={() => {}}
           selectedKeys={new Set(['option1'])}
-          isCheckboxDisabled={true}
-          label="Individual override test">
-          <SelectBox value="option1" isCheckboxDisabled={false}>
+          label="Individual disabled test">
+          <SelectBox value="option1" isCheckboxHidden>
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
       const selectedRow = screen.getByRole('option', {name: 'Option 1'});
-      // Should show checkbox when individual override is false and item is selected
+      // Should not show checkbox when individual isCheckboxHidden is true
+      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).not.toBeInTheDocument();
+    });
+
+    it('shows elements when both group and individual are false', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1'])}
+          isCheckboxHidden={false}
+          label="Both enabled test">
+          <SelectBox value="option1" isCheckboxHidden={false}>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
+      // Should show checkbox when both group and individual are false
       const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
       expect(checkboxDiv).toBeInTheDocument();
     });
+
+    it('hides elements when either group or individual is true', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1', 'option2'])}
+          isCheckboxHidden
+          label="OR logic test">
+          <SelectBox value="option1" isCheckboxHidden={false}>
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      // Both should be hidden due to OR logic
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      const checkbox1 = option1.querySelector('[aria-hidden="true"]');
+      const checkbox2 = option2.querySelector('[aria-hidden="true"]');
+      
+      expect(checkbox1).not.toBeInTheDocument();
+      expect(checkbox2).not.toBeInTheDocument();
+    });
+
+    it('tests all visibility control combinations for labels and illustrations', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1', 'option2', 'option3', 'option4'])}
+          label="All combinations test">
+          <SelectBox value="option1">
+            <Calendar slot="icon" />
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2" isLabelHidden>
+            <Calendar slot="icon" />
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3" isIllustrationHidden>
+            <Calendar slot="icon" />
+            <Text slot="text">Option 3</Text>
+          </SelectBox>
+          <SelectBox value="option4" isLabelHidden isIllustrationHidden>
+            <Calendar slot="icon" />
+            <Text slot="text">Option 4</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      // Option 1: both enabled (false || false = false, so show)
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      expect(option1.textContent).toContain('Option 1');
+
+      // Option 2: label disabled (true || false = true, so hide label)
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option2).toBeInTheDocument();
+
+      // Option 3: icon disabled (false || true = true, so hide icon)
+      const option3 = screen.getByRole('option', {name: 'Option 3'});
+      expect(option3.textContent).toContain('Option 3');
+
+      // Option 4: both disabled
+      const option4 = screen.getByRole('option', {name: 'Option 4'});
+      expect(option4).toBeInTheDocument();
+    });
+
+    it('respects visibility controls during hover interactions', async () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set()}
+          isCheckboxHidden
+          label="Hover with visibility test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2" isCheckboxHidden={false}>
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+
+      // Hover option1 - should not show checkbox due to group disabled
+      await userEvent.hover(option1);
+      await waitFor(() => {
+        const checkbox1 = option1.querySelector('[aria-hidden="true"]');
+        expect(checkbox1).not.toBeInTheDocument();
+      });
+
+      // Hover option2 - should not show checkbox due to OR logic
+      await userEvent.hover(option2);
+      await waitFor(() => {
+        const checkbox2 = option2.querySelector('[aria-hidden="true"]');
+        expect(checkbox2).not.toBeInTheDocument();
+      });
+    });
+
+    it('handles form integration with visibility controls', () => {
+      const {container} = render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1', 'option2'])}
+          name="test-visibility"
+          isCheckboxHidden
+          label="Form with visibility test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2" isCheckboxHidden={false}>
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      // Form integration should work regardless of visibility controls
+      const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="test-visibility"]');
+      expect(hiddenInputs).toHaveLength(2);
+      expect(hiddenInputs[0]).toHaveValue('option1');
+      expect(hiddenInputs[1]).toHaveValue('option2');
+    });
+
+    it('handles selection state changes with visibility controls', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}
+          isCheckboxHidden
+          label="Selection with visibility test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      
+      // Should still be able to select even with checkbox hidden
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
   });
 
   describe('Children validation', () => {
@@ -726,7 +902,7 @@ describe('SelectBoxGroup', () => {
           orientation="horizontal"
           label="Complex children test">
           <SelectBox value="option1">
-            <div>Icon</div>
+            <Calendar slot="icon" />
             <Text slot="text">Complex Option</Text>
             <Text slot="description">With description</Text>
           </SelectBox>
@@ -841,6 +1017,191 @@ describe('SelectBoxGroup', () => {
       const option2 = screen.getByRole('option', {name: 'Option 2'});
       expect(option2).toHaveAttribute('aria-selected', 'true');
     });
+
+    it('handles keyboard navigation with visibility controls', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}
+          isCheckboxHidden
+          label="Keyboard with visibility test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      await act(async () => {
+        listbox.focus();
+      });
+      
+      // Navigate with arrow keys
+      await act(async () => {
+        await userEvent.keyboard('{ArrowDown}');
+      });
+      
+      // Select with space - the first option should be focused/selected by default
+      await act(async () => {
+        await userEvent.keyboard(' ');
+      });
+      
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option1']);
+    });
+
+    it('maintains proper ARIA attributes with visibility controls', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="multiple"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1'])}
+          isCheckboxHidden
+          isRequired
+          isInvalid
+          errorMessage="Test error"
+          label="ARIA with visibility test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+      
+      const options = screen.getAllByRole('option');
+      expect(options[0]).toHaveAttribute('aria-selected', 'true');
+      expect(options[1]).toHaveAttribute('aria-selected', 'false');
+      
+      const errorMessage = screen.getByText('Test error');
+      expect(listbox).toHaveAttribute('aria-describedby', errorMessage.id);
+    });
+
+    it('handles horizontal orientation with visibility controls', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['option1'])}
+          orientation="horizontal"
+          isCheckboxHidden
+          label="Horizontal visibility test">
+          <SelectBox value="option1">
+            <Calendar slot="icon" />
+            <Text slot="text">Option 1</Text>
+            <Text slot="description">Description</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option = screen.getByRole('option', {name: 'Option 1'});
+      expect(option).toBeInTheDocument();
+      
+      // Checkbox should be hidden due to group setting
+      const checkbox = option.querySelector('[aria-hidden="true"]');
+      expect(checkbox).not.toBeInTheDocument();
+      
+      expect(option.textContent).toContain('Option 1');
+      expect(option.textContent).toContain('Description');
+    });
+
+    it('validates children count with visibility controls', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      
+      render(
+        <SelectBoxGroup 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()} 
+          isCheckboxHidden
+          label="Too many children test">
+          {Array.from({length: 12}, (_, i) => (
+            <SelectBox key={i} value={`option${i}`}>
+              <Text slot="text">Option {i}</Text>
+            </SelectBox>
+          ))}
+        </SelectBoxGroup>
+      );
+      
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Invalid content. SelectBox cannot have more than 9 children.'
+      );
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('handles complex slot combinations with visibility controls', () => {
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set(['complex'])}
+          label="Complex slots test">
+          <SelectBox value="complex">
+            
+            <Text slot="text">Complex Item</Text>
+            <Text slot="description">With multiple slots</Text>
+            <div>Additional content</div>
+            <span>More content</span>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option = screen.getByRole('option', {name: 'Complex Item'});
+      expect(option).toBeInTheDocument();
+      
+      // Should show checkbox since item is selected and not disabled
+      const checkbox = option.querySelector('[aria-hidden="true"]');
+      expect(checkbox).toBeInTheDocument();
+      
+      expect(option.textContent).toContain('Complex Item');
+      expect(option.textContent).toContain('With multiple slots');
+      expect(option.textContent).toContain('Additional content');
+      expect(option.textContent).toContain('More content');
+    });
+
+    it('handles rapid selection changes with visibility controls', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}
+          isCheckboxHidden
+          label="Rapid selection test">
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="text">Option 3</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const options = screen.getAllByRole('option');
+      
+      // Rapidly click multiple options - in single mode, only last selection matters
+      await userEvent.click(options[0]);
+      await userEvent.click(options[1]);
+      await userEvent.click(options[2]);
+      
+      expect(onSelectionChange).toHaveBeenCalledTimes(3);
+      
+      const finalSelection = onSelectionChange.mock.calls[2][0];
+      expect(Array.from(finalSelection)).toEqual(['option3']);
+    });
   });
 });
 

From 7ca782082626f19de298f39edbe422fffa5ef2d1 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Wed, 30 Jul 2025 12:50:12 -0700
Subject: [PATCH 16/24] adjusted illustration size

---
 packages/@react-spectrum/s2/src/SelectBox.tsx |  30 +-
 .../s2/stories/SelectBoxGroup.stories.tsx     | 285 +++---------------
 2 files changed, 73 insertions(+), 242 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 6355827e934..5bd438a5efe 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -19,6 +19,7 @@ import {SelectBoxContext} from './SelectBoxGroup';
 import {style} from '../style' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
+import { IllustrationContext } from './Icon';
 
 export interface SelectBoxProps extends StyleProps {
   /**
@@ -186,6 +187,19 @@ const iconContainer = style({
   color: {
     isDisabled: 'disabled'
   },
+
+  marginBottom: {
+    default: 8,
+    orientation: {
+      horizontal: 0
+    }
+  },
+  marginEnd: {
+    default: 0,
+    orientation: {
+      horizontal: 8
+    }
+  },
   opacity: {
     isDisabled: 0.4
   }
@@ -267,14 +281,14 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
   
   const childrenArray = React.Children.toArray(children);
-  const iconSlot = childrenArray.find((child: any) => child?.props?.slot === 'icon');
+  const illustrationSlot = childrenArray.find((child: any) => child?.props?.slot === 'illustration');
   const textSlot = childrenArray.find((child: any) => child?.props?.slot === 'text');
   const descriptionSlot = childrenArray.find((child: any) => child?.props?.slot === 'description');
   const otherChildren = childrenArray.filter((child: any) => 
-    !['icon', 'text', 'description'].includes(child?.props?.slot)
+    !['illustration', 'text', 'description'].includes(child?.props?.slot)
   );
 
-  const hasIcon = !!iconSlot;
+  const hasIcon = !!illustrationSlot;
   const hasDescription = !!descriptionSlot;
   
   return (
@@ -290,7 +304,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       }, props.styles)}
       style={UNSAFE_style}>
       
-      {!(isCheckboxHidden || groupIsCheckboxHidden) && (isSelected || (!isDisabled && renderProps.isHovered)) && (
+      {!(isCheckboxHidden || groupIsCheckboxHidden) && (isSelected || (!isDisabled && renderProps.isHovered)) && orientation === 'vertical' && (
         <div 
           className={style({
             position: 'absolute',
@@ -327,7 +341,9 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
         <>
           {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
             <div className={iconContainer({size, orientation, isDisabled})}>
-              {iconSlot}
+              <IllustrationContext.Provider value={{size: 'S'}}>
+                {illustrationSlot}
+              </IllustrationContext.Provider>
             </div>
           )}
           
@@ -368,7 +384,9 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
         <>
           {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
             <div className={iconContainer({size, orientation, isDisabled})}>
-              {iconSlot}
+              <IllustrationContext.Provider value={{size: 'S'}}>
+                {illustrationSlot}
+              </IllustrationContext.Provider>
             </div>
           )}
           
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 002368a843d..204cfe60293 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -17,17 +17,14 @@
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
-import {Button, createIcon, Heading, SelectBox, SelectBoxGroup, Text} from '../src';
+import {Button, Heading, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
+import StarFilled1 from '../spectrum-illustrations/gradient/generic1/Star';
+import StarFilled2 from '../spectrum-illustrations/gradient/generic2/Star';
 import React, {useState} from 'react';
 import type {Selection} from 'react-aria-components';
 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',
@@ -58,7 +55,6 @@ const meta: Meta<typeof SelectBoxGroup> = {
     orientation: 'vertical',
     numColumns: 2,
     gutterWidth: 'default',
-    isRequired: false,
     isDisabled: false
   }
 };
@@ -68,28 +64,25 @@ type Story = StoryObj<typeof meta>;
 
 // Basic Stories
 export const Default: Story = {
-  args: {
-    label: 'Choose your cloud service'
-  },
   render: (args) => (
-    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+    <SelectBoxGroup onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="aws">
-        <Server slot="icon" />
+        <Server slot="illustration" />
         <Text slot="text">Amazon Web Services</Text>
         <Text slot="description">Reliable cloud infrastructure</Text>
       </SelectBox>
       <SelectBox value="azure">
-        <AlertNotice slot="icon" />
+        <AlertNotice slot="illustration" />
         <Text slot="text">Microsoft Azure</Text>
         <Text slot="description">Enterprise cloud solutions</Text>
       </SelectBox>
       <SelectBox value="gcp">
-        <Paperairplane slot="icon" />
+        <Paperairplane slot="illustration" />
         <Text slot="text">Google Cloud Platform</Text>
         <Text slot="description">Modern cloud services</Text>
       </SelectBox>
       <SelectBox value="oracle">
-        <Server slot="icon" />
+        <Server slot="illustration" />
         <Text slot="text">Oracle Cloud</Text>
         <Text slot="description">Database-focused cloud</Text>
       </SelectBox>
@@ -100,9 +93,7 @@ export const Default: Story = {
 export const MultipleSelection: Story = {
   args: {
     selectionMode: 'multiple',
-    label: 'Select your preferred services',
     defaultSelectedKeys: new Set(['aws', 'gcp']),
-
     necessityIndicator: 'icon',
     numColumns: 3,
     gutterWidth: 'default'
@@ -114,47 +105,47 @@ export const MultipleSelection: Story = {
       </p>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
-          <Server slot="icon" />
+          <Server slot="illustration" />
           <Text slot="text">Amazon Web Services</Text>
           <Text slot="description">Reliable cloud infrastructure</Text>
         </SelectBox>
         <SelectBox value="azure">
-          <AlertNotice slot="icon" />
+          <AlertNotice slot="illustration" />
           <Text slot="text">Microsoft Azure</Text>
           <Text slot="description">Enterprise cloud solutions</Text>
         </SelectBox>
         <SelectBox value="gcp">
-          <Paperairplane slot="icon" />
+          <Paperairplane slot="illustration" />
           <Text slot="text">Google Cloud Platform</Text>
           <Text slot="description">Modern cloud services</Text>
         </SelectBox>
         <SelectBox value="oracle">
-          <Server slot="icon" />
+          <Server slot="illustration" />
           <Text slot="text">Oracle Cloud</Text>
           <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
         <SelectBox value="ibm">
-          <Server slot="icon" />
+          <Server slot="illustration" />
           <Text slot="text">IBM Cloud</Text>
           <Text slot="description">Hybrid cloud solutions</Text>
         </SelectBox>
         <SelectBox value="alibaba">
-          <Paperairplane slot="icon" />
+          <Paperairplane slot="illustration" />
           <Text slot="text">Alibaba Cloud</Text>
           <Text slot="description">Asia-focused services</Text>
         </SelectBox>
         <SelectBox value="digitalocean">
-          <Server slot="icon" />
+          <Server slot="illustration" />
           <Text slot="text">DigitalOcean</Text>
           <Text slot="description">Developer-friendly platform</Text>
         </SelectBox>
         <SelectBox value="linode">
-          <AlertNotice slot="icon" />
+          <AlertNotice slot="illustration" />
           <Text slot="text">Linode</Text>
           <Text slot="description">Simple cloud computing</Text>
         </SelectBox>
         <SelectBox value="vultr">
-          <Paperairplane slot="icon" />
+          <Paperairplane slot="illustration" />
           <Text slot="text">Vultr</Text>
           <Text slot="description">High performance cloud</Text>
         </SelectBox>
@@ -166,18 +157,17 @@ export const MultipleSelection: Story = {
 // Disabled States
 export const DisabledGroup: Story = {
   args: {
-    label: 'Disabled Group',
     isDisabled: true,
     defaultSelectedKeys: new Set(['option1'])
   },
   render: (args) => (
     <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="option1">
-        <Server slot="icon" />
+        <Server slot="illustration" />
         <Text slot="text">Selected then Disabled</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <AlertNotice slot="icon" />
+        <AlertNotice slot="illustration" />
         <Text slot="text">Disabled</Text>
       </SelectBox>
     </SelectBoxGroup>
@@ -195,7 +185,6 @@ function InteractiveExamplesStory() {
       </p>
       
       <SelectBoxGroup
-        label="Combined Interactive Features"
         selectionMode="multiple"
         selectedKeys={selectedKeys}
         numColumns={4}
@@ -207,65 +196,65 @@ function InteractiveExamplesStory() {
         {/* Enabled items with dynamic icons */}
         <SelectBox value="enabled1">
           {selectedKeys !== 'all' && selectedKeys.has('enabled1') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <StarIcon slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Enabled Item 1</Text>
           <Text slot="description">Status updates</Text>
         </SelectBox>
         <SelectBox value="enabled2">
           {selectedKeys !== 'all' && selectedKeys.has('enabled2') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <StarIcon slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Enabled Item 2</Text>
           <Text slot="description">Click to toggle</Text>
         </SelectBox>
         {/* Disabled item */}
         <SelectBox value="disabled1" isDisabled>
-          <AlertNotice slot="icon" />
+          <AlertNotice slot="illustration" />
           <Text slot="text">Disabled Item</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
         <SelectBox value="starred1">
           {selectedKeys !== 'all' && selectedKeys.has('starred1') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <StarIcon slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Starred Item 1</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
         <SelectBox value="starred2">
           {selectedKeys !== 'all' && selectedKeys.has('starred2') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <StarIcon slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Starred Item 2</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
         <SelectBox value="disabled2" isDisabled>
-          <Server slot="icon" />
+          <Server slot="illustration" />
           <Text slot="text">Disabled Service</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
         <SelectBox value="dynamic1">
           {selectedKeys !== 'all' && selectedKeys.has('dynamic1') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <Paperairplane slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Dynamic Icon</Text>
           <Text slot="description">Click to activate</Text>
         </SelectBox>
         <SelectBox value="controllable">
           {selectedKeys !== 'all' && selectedKeys.has('controllable') ? (
-            <StarFilledIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
           ) : (
-            <StarIcon slot="icon" />
+            <StarFilled2 slot="illustration" />
           )}
           <Text slot="text">Controllable</Text>
           <Text slot="description">External control available</Text>
@@ -324,56 +313,53 @@ function FormAndLayoutStory() {
             setSelectedPreferences(selection);
             action('onSelectionChange')(selection);
           }}
-          name="preferences"
-          label="Communication Preferences (Required)"
-          isRequired
           numColumns={4}
           gutterWidth="spacious">
           
           <SelectBox value="newsletter">
-            <AlertNotice slot="icon" />
+            <AlertNotice slot="illustration" />
             <Text slot="text">Newsletter</Text>
             <Text slot="description">Weekly updates and news</Text>
           </SelectBox>
           
           <SelectBox value="marketing">
-            <Paperairplane slot="icon" />
+            <Paperairplane slot="illustration" />
             <Text slot="text">Marketing</Text>
             <Text slot="description">Product promotions</Text>
           </SelectBox>
           
           <SelectBox value="product">
-            <Server slot="icon" />
+            <Server slot="illustration" />
             <Text slot="text">Product News</Text>
             <Text slot="description">Feature announcements</Text>
           </SelectBox>
           
           <SelectBox value="security">
-            <AlertNotice slot="icon" />
+            <AlertNotice slot="illustration" />
             <Text slot="text">Security Alerts</Text>
             <Text slot="description">Important updates</Text>
           </SelectBox>
           
           <SelectBox value="events">
-            <Paperairplane slot="icon" />
+            <Paperairplane slot="illustration" />
             <Text slot="text">Events</Text>
             <Text slot="description">Webinars & conferences</Text>
           </SelectBox>
           
           <SelectBox value="surveys">
-            <Server slot="icon" />
+            <Server slot="illustration" />
             <Text slot="text">Surveys</Text>
             <Text slot="description">Help us improve</Text>
           </SelectBox>
           
           <SelectBox value="community">
-            <AlertNotice slot="icon" />
+            <AlertNotice slot="illustration" />
             <Text slot="text">Community</Text>
             <Text slot="description">Forum notifications</Text>
           </SelectBox>
           
           <SelectBox value="support">
-            <Server slot="icon" />
+            <Server slot="illustration" />
             <Text slot="text">Support</Text>
             <Text slot="description">Help & assistance</Text>
           </SelectBox>
@@ -415,178 +401,6 @@ export const FormAndLayout: Story = {
   render: () => <FormAndLayoutStory />
 };
 
-export const VisibilityControls: Story = {
-  render: () => (
-    <div style={{maxWidth: 1200, padding: 20}}>
-      <Heading level={2} UNSAFE_style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>Visibility Controls</Heading>
-      
-      {/* Group-level controls */}
-      <div style={{marginBottom: 40}}>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Group-level Visibility Controls</Heading>
-        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
-          
-          <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Checkboxes (isCheckboxHidden=true)</Heading>
-            <SelectBoxGroup 
-              label="No Checkboxes"
-              selectionMode="multiple"
-              isCheckboxHidden
-              numColumns={3}
-              onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="item1">
-                <Server slot="icon" />
-                <Text slot="text">Item 1</Text>
-                <Text slot="description">No checkbox shown</Text>
-              </SelectBox>
-              <SelectBox value="item2">
-                <AlertNotice slot="icon" />
-                <Text slot="text">Item 2</Text>
-                <Text slot="description">No checkbox shown</Text>
-              </SelectBox>
-              <SelectBox value="item3">
-                <Paperairplane slot="icon" />
-                <Text slot="text">Item 3</Text>
-                <Text slot="description">No checkbox shown</Text>
-              </SelectBox>
-            </SelectBoxGroup>
-          </div>
-
-          <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Labels (isLabelHidden=true)</Heading>
-            <SelectBoxGroup 
-              label="Icons Only"
-              isLabelHidden
-              numColumns={3}
-              onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="item1">
-                <Server slot="icon" />
-                <Text slot="text">Hidden Text 1</Text>
-                <Text slot="description">Hidden description</Text>
-              </SelectBox>
-              <SelectBox value="item2">
-                <AlertNotice slot="icon" />
-                <Text slot="text">Hidden Text 2</Text>
-                <Text slot="description">Hidden description</Text>
-              </SelectBox>
-              <SelectBox value="item3">
-                <Paperairplane slot="icon" />
-                <Text slot="text">Hidden Text 3</Text>
-                <Text slot="description">Hidden description</Text>
-              </SelectBox>
-            </SelectBoxGroup>
-          </div>
-
-          <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Hide Illustrations (isIllustrationHidden=true)</Heading>
-            <SelectBoxGroup 
-              label="Text Only"
-              isIllustrationHidden
-              numColumns={3}
-              onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="item1">
-                <Server slot="icon" />
-                <Text slot="text">Text Only 1</Text>
-                <Text slot="description">No icon shown</Text>
-              </SelectBox>
-              <SelectBox value="item2">
-                <AlertNotice slot="icon" />
-                <Text slot="text">Text Only 2</Text>
-                <Text slot="description">No icon shown</Text>
-              </SelectBox>
-              <SelectBox value="item3">
-                <Paperairplane slot="icon" />
-                <Text slot="text">Text Only 3</Text>
-                <Text slot="description">No icon shown</Text>
-              </SelectBox>
-            </SelectBoxGroup>
-          </div>
-
-        </div>
-      </div>
-
-      {/* Individual overrides */}
-      <div style={{marginBottom: 40}}>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Individual Overrides</Heading>
-        <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-          Group has all elements disabled, but individual items can override to enable specific elements
-        </p>
-        <SelectBoxGroup 
-          label="Group Disabled, Individual Overrides"
-          isCheckboxHidden
-          isLabelHidden
-          isIllustrationHidden
-          numColumns={4}
-          onSelectionChange={action('onSelectionChange')}>
-          
-          <SelectBox value="override1">
-            <Server slot="icon" />
-            <Text slot="text">All Visible</Text>
-            <Text slot="description">Individual override</Text>
-          </SelectBox>
-          
-          <SelectBox value="override2">
-            <AlertNotice slot="icon" />
-            <Text slot="text">Label Only</Text>
-            <Text slot="description">Text override</Text>
-          </SelectBox>
-          
-          <SelectBox value="override3">
-            <Paperairplane slot="icon" />
-            <Text slot="text">Icon Only</Text>
-            <Text slot="description">Icon override</Text>
-          </SelectBox>
-          
-          <SelectBox value="override4">
-            <Server slot="icon" />
-            <Text slot="text">Checkbox Only</Text>
-            <Text slot="description">Checkbox override</Text>
-          </SelectBox>
-          
-        </SelectBoxGroup>
-      </div>
-
-      {/* Combined example */}
-      <div>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Mixed Visibility</Heading>
-        <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-          Demonstrating different combinations of visibility settings
-        </p>
-        <SelectBoxGroup 
-          label="Mixed Visibility Examples"
-          selectionMode="multiple"
-          numColumns={4}
-          onSelectionChange={action('onSelectionChange')}>
-          
-          <SelectBox value="normal">
-            <Server slot="icon" />
-            <Text slot="text">Normal</Text>
-            <Text slot="description">All elements</Text>
-          </SelectBox>
-          
-          <SelectBox value="no-checkbox" isCheckboxHidden>
-            <AlertNotice slot="icon" />
-            <Text slot="text">No Checkbox</Text>
-            <Text slot="description">Hidden checkbox</Text>
-          </SelectBox>
-          
-          <SelectBox value="no-icon" isIllustrationHidden>
-            <Paperairplane slot="icon" />
-            <Text slot="text">No Icon</Text>
-            <Text slot="description">Hidden icon</Text>
-          </SelectBox>
-          
-          <SelectBox value="no-text" isLabelHidden>
-            <Server slot="icon" />
-            <Text slot="text">No Text</Text>
-            <Text slot="description">Hidden text</Text>
-          </SelectBox>
-          
-        </SelectBoxGroup>
-      </div>
-    </div>
-  )
-};
-
 export const AllSlotCombinations: Story = {
   render: () => (
     <div style={{maxWidth: 1200, padding: 20}}>
@@ -618,7 +432,7 @@ export const AllSlotCombinations: Story = {
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="icon-text">
-                <Server slot="icon" />
+                <Server slot="illustration" />
                 <Text slot="text">With Icon</Text>
               </SelectBox>
             </SelectBoxGroup>
@@ -646,7 +460,7 @@ export const AllSlotCombinations: Story = {
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="all-vertical">
-                <AlertNotice slot="icon" />
+                <AlertNotice slot="illustration" />
                 <Text slot="text">Full Vertical</Text>
                 <Text slot="description">Complete description</Text>
               </SelectBox>
@@ -682,7 +496,7 @@ export const AllSlotCombinations: Story = {
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="h-icon-text">
-                <Paperairplane slot="icon" />
+                <Paperairplane slot="illustration" />
                 <Text slot="text">Horizontal with Icon</Text>
               </SelectBox>
             </SelectBoxGroup>
@@ -710,7 +524,7 @@ export const AllSlotCombinations: Story = {
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="h-all">
-                <Server slot="icon" />
+                <Server slot="illustration" />
                 <Text slot="text">Complete Horizontal</Text>
                 <Text slot="description">Full horizontal layout with all elements</Text>
               </SelectBox>
@@ -724,7 +538,6 @@ export const AllSlotCombinations: Story = {
       <div style={{marginTop: 40}}>
         <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Side-by-Side Comparison</Heading>
         <SelectBoxGroup 
-          label="Mixed Layout Examples"
           numColumns={4}
           gutterWidth="spacious"
           onSelectionChange={action('onSelectionChange')}>
@@ -735,7 +548,7 @@ export const AllSlotCombinations: Story = {
           </SelectBox>
           
           <SelectBox value="v2">
-            <StarIcon slot="icon" />
+            <StarFilled1 slot="illustration" />
             <Text slot="text">V: Icon + Text</Text>
           </SelectBox>
           
@@ -745,7 +558,7 @@ export const AllSlotCombinations: Story = {
           </SelectBox>
           
           <SelectBox value="v4">
-            <AlertNotice slot="icon" />
+            <AlertNotice slot="illustration" />
             <Text slot="text">V: All Elements</Text>
             <Text slot="description">Complete vertical</Text>
           </SelectBox>
@@ -765,7 +578,7 @@ export const AllSlotCombinations: Story = {
             </SelectBox>
             
             <SelectBox value="h2">
-              <StarFilledIcon slot="icon" />
+              <StarFilled1 slot="illustration" />
               <Text slot="text">H: Icon + Text</Text>
             </SelectBox>
             
@@ -775,7 +588,7 @@ export const AllSlotCombinations: Story = {
             </SelectBox>
             
             <SelectBox value="h4">
-              <Paperairplane slot="icon" />
+              <Paperairplane slot="illustration" />
               <Text slot="text">H: All Elements</Text>
               <Text slot="description">Complete horizontal layout</Text>
             </SelectBox>

From 60d2d3b2e9dbf5f6a5d48baf812dd9aa37895bdf Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Fri, 1 Aug 2025 14:10:12 -0700
Subject: [PATCH 17/24] removed the sizing and fixed various alignment issues.
 replaced checkbox behavior

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 362 +++++----
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 143 +---
 .../s2/stories/SelectBoxGroup.stories.tsx     |  95 ++-
 .../s2/test/SelectBoxGroup.test.tsx           | 738 ++++--------------
 4 files changed, 466 insertions(+), 872 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 5bd438a5efe..70fc8b46468 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -14,12 +14,12 @@ import Checkmark from '../ui-icons/Checkmark';
 import {ContextValue} from 'react-aria-components';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {IllustrationContext} from '../src/Icon';
 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';
-import { IllustrationContext } from './Icon';
 
 export interface SelectBoxProps extends StyleProps {
   /**
@@ -33,22 +33,7 @@ export interface SelectBoxProps extends StyleProps {
   /**
    * Whether the SelectBox is disabled.
    */
-  isDisabled?: boolean,
-  /**
-   * Whether to hide the selection checkbox.
-   * @default false
-   */
-  isCheckboxHidden?: boolean,
-  /**
-   * Whether to hide the label/text content.
-   * @default false
-   */
-  isLabelHidden?: boolean,
-  /**
-   * Whether to hide the illustration/icon.
-   * @default false
-   */
-  isIllustrationHidden?: boolean
+  isDisabled?: boolean
 }
 
 export const SelectBoxSpectrumContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLDivElement>>>(null);
@@ -61,63 +46,85 @@ const selectBoxStyles = style({
       horizontal: 'row'
     }
   },
-  lineHeight: 'title',
-  justifyContent: 'center',
-  flexShrink: 0,
+  justifyContent: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
   alignItems: 'center',
   font: 'ui',
+  flexShrink: 0,
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  position: 'relative',
+  // Sizing
   width: {
-    default: {
-      size: {
-        S: 128,
-        M: 136,
-        L: 160,
-        XL: 192
-      }
-    },
+    default: 170,
     orientation: {
-      horizontal: 'auto'
+      horizontal: 368
     }
   },
   height: {
-    default: {
-      size: {
-        S: 128,
-        M: 136,
-        L: 160,
-        XL: 192
-      }
-    },
+    default: 170,
     orientation: {
-      horizontal: 'auto'
+      horizontal: '100%'
     }
   },
   minWidth: {
+    default: 144,
     orientation: {
-      horizontal: 160
+      horizontal: 188
     }
   },
   maxWidth: {
+    default: 170,
+    orientation: {
+      horizontal: 480
+    }
+  },
+  minHeight: {
+    default: 144,
     orientation: {
-      horizontal: 272
+      horizontal: 80
     }
   },
+  maxHeight: {
+    default: 170,
+    orientation: {
+      horizontal: 240
+    }
+  },
+  // Spacing
   padding: {
-    size: {
-      S: 16,
-      M: 20,
-      L: 24,
-      XL: 28
+    default: 24,
+    orientation: {
+      horizontal: 16
+    }
+  },
+  paddingStart: {
+    orientation: {
+      horizontal: 24
+    }
+  },
+  paddingEnd: {
+    orientation: {
+      horizontal: 32
     }
   },
+  gap: {
+    default: 12,
+    orientation: {
+      horizontal: 0
+    }
+  },
+  // Visual styling
   borderRadius: 'lg',
   backgroundColor: {
     default: 'layer-2',
-    isSelected: 'layer-2',
     isDisabled: 'layer-1'
   },
   color: {
-    isEmphasized: 'gray-900',
     isDisabled: 'disabled'
   },
   boxShadow: {
@@ -127,8 +134,6 @@ const selectBoxStyles = style({
     forcedColors: 'none',
     isDisabled: 'emphasized'
   },
-  outlineStyle: 'none',
-  position: 'relative',
   borderWidth: 2,
   borderStyle: 'solid',
   borderColor: {
@@ -138,68 +143,63 @@ const selectBoxStyles = style({
     isDisabled: 'transparent'
   },
   transition: 'default',
-  gap: {
-    orientation: {
-      horizontal: 'text-to-visual'
-    }
-  },
   cursor: {
     default: 'pointer',
     isDisabled: 'default'
-  }
+  },
+  outlineStyle: 'none'
 }, getAllowedOverrides());
 
 const contentContainer = style({
   display: 'flex',
-  flexDirection: 'column',
-  alignItems: {
-    default: 'center',
+  flexDirection: {
+    default: 'column',
     orientation: {
-      horizontal: 'start'
+      horizontal: 'row'
     }
   },
   justifyContent: 'center',
+  alignItems: 'center',
   textAlign: {
     default: 'center',
     orientation: {
       horizontal: 'start'
     }
   },
+  gap: {
+    default: 8,
+    orientation: {
+      horizontal: 12
+    }
+  },
   flex: {
     orientation: {
-      horizontal: 1
+      horizontal: '1 0 0'
     }
-  }
+  },
+  width: '100%',
+  minWidth: 0
 }, getAllowedOverrides());
 
-const iconContainer = style({
+const illustrationContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   size: {
-    XS: 16,
     S: 20,
     M: 24,
     L: 28,
     XL: 32
   },
   flexShrink: 0,
-  color: {
-    isDisabled: 'disabled'
-  },
-
-  marginBottom: {
-    default: 8,
-    orientation: {
-      horizontal: 0
-    }
-  },
   marginEnd: {
-    default: 0,
     orientation: {
-      horizontal: 8
+      horizontal: 12
     }
   },
+  color: {
+    isDisabled: 'disabled'
+  },
   opacity: {
     isDisabled: 0.4
   }
@@ -207,20 +207,39 @@ const iconContainer = style({
 
 const textContainer = style({
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: {
+    orientation: {
+      horizontal: 'column'
+    }
+  },
+  justifyContent: 'center',
   alignItems: {
     default: 'center',
     orientation: {
       horizontal: 'start'
     }
   },
-  gap: 'text-to-visual',
+  gap: {
+    default: 12,
+    orientation: {
+      horizontal: 2
+    }
+  },
+  flex: {
+    orientation: {
+      horizontal: '1 0 0'
+    }
+  },
+  width: '100%',
+  minWidth: 0,
+  overflow: {
+    orientation: {
+      horizontal: 'hidden'
+    }
+  },
   color: {
     default: 'neutral',
-    isDisabled: {
-      default: 'gray-600',
-      forcedColors: 'GrayText'
-    }
+    isDisabled: 'disabled'
   }
 }, getAllowedOverrides());
 
@@ -231,12 +250,65 @@ const descriptionText = style({
       horizontal: 'block'
     }
   },
-  font: 'ui-sm',
+  alignSelf: {
+    orientation: {
+      horizontal: 'stretch'
+    }
+  },
+  width: {
+    orientation: {
+      horizontal: '100%'
+    }
+  },
+  minWidth: {
+    orientation: {
+      horizontal: 0
+    }
+  },
+  overflow: {
+    orientation: {
+      horizontal: 'hidden'
+    }
+  },
+  wordWrap: {
+    orientation: {
+      horizontal: 'break-word'
+    }
+  },
+  font: 'ui',
   color: {
-    default: 'gray-600',
+    default: 'neutral',
     isDisabled: 'disabled'
+  }
+});
+
+const labelText = style({
+  display: 'block',
+  width: '100%',
+  overflow: 'hidden',
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  alignSelf: {
+    orientation: {
+      horizontal: 'stretch'
+    }
   },
-  lineHeight: 'body'
+  font: 'ui',
+  fontWeight: {
+    orientation: {
+      horizontal: 'bold'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  }
 });
 
 
@@ -248,7 +320,7 @@ const SelectBoxRenderPropsContext = createContext<{
 
 /**
  * SelectBox components allow users to select options from a list.
- * Works as content within a GridListItem for automatic grid navigation.
+ * Works as content within a ListBoxItem.
  */
 export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxSpectrumContext);
@@ -256,9 +328,6 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     children, 
     value, 
     isDisabled: individualDisabled = false, 
-    isCheckboxHidden = false,
-    isLabelHidden = false,
-    isIllustrationHidden = false,
     UNSAFE_style
   } = props;
   let divRef = useRef<HTMLDivElement | null>(null);
@@ -269,14 +338,12 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     orientation = 'vertical',
     selectedKeys,
     isDisabled: groupDisabled = false,
-    isCheckboxHidden: groupIsCheckboxHidden = false,
-    isLabelHidden: groupIsLabelHidden = false,
-    isIllustrationHidden: groupIsIllustrationHidden = false
+    isCheckboxSelection = false
   } = contextValue;
 
   let renderProps = useContext(SelectBoxRenderPropsContext);
 
-  const size = 'M'; // Only medium size is supported
+  const size = 'M';
   const isDisabled = individualDisabled || groupDisabled;
   const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
   
@@ -288,9 +355,6 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
     !['illustration', 'text', 'description'].includes(child?.props?.slot)
   );
 
-  const hasIcon = !!illustrationSlot;
-  const hasDescription = !!descriptionSlot;
-  
   return (
     <div
       ref={domRef}
@@ -303,8 +367,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
         isFocusVisible: renderProps.isFocusVisible || false
       }, props.styles)}
       style={UNSAFE_style}>
-      
-      {!(isCheckboxHidden || groupIsCheckboxHidden) && (isSelected || (!isDisabled && renderProps.isHovered)) && orientation === 'vertical' && (
+      {isCheckboxSelection && (isSelected || (!isDisabled && renderProps.isHovered)) && (
         <div 
           className={style({
             position: 'absolute',
@@ -314,19 +377,10 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
           aria-hidden="true">
           <div
             className={box({
-              isSelected: isSelected || false,
+              isSelected,
               isDisabled,
-              isIndeterminate: false,
-              isHovered: false,
-              isFocused: false,
-              isFocusVisible: false,
-              isPressed: false,
-              isReadOnly: false,
-              isRequired: false,
-              isInvalid: false,
-              size: 'M',
-              isEmphasized: false
-            })}>
+              size: 'M'
+            } as any)}>
             {isSelected && (
               <Checkmark 
                 size="S" 
@@ -335,84 +389,28 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
           </div>
         </div>
       )}
+      {!!illustrationSlot && (
+        <div className={illustrationContainer({size: 'S', orientation, isDisabled})}>
+          <IllustrationContext.Provider value={{size: 'S'}}>
+            {illustrationSlot}
+          </IllustrationContext.Provider>
+        </div>
+      )}
       
-      {orientation === 'horizontal' ? (
-        // Horizontal layout with all combinations
-        <>
-          {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
-            <div className={iconContainer({size, orientation, isDisabled})}>
-              <IllustrationContext.Provider value={{size: 'S'}}>
-                {illustrationSlot}
-              </IllustrationContext.Provider>
-            </div>
-          )}
-          
-          {(hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden)) || hasDescription ? (
-            // Standard horizontal layout with icon and/or description
-            <div className={contentContainer({size, orientation}, props.styles)}>
-              <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-                {!(isLabelHidden || groupIsLabelHidden) && textSlot}
-                
-                {hasDescription && (
-                  <div className={descriptionText({size, orientation, isDisabled})}>
-                    {descriptionSlot}
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : (
-            // Text-only horizontal layout
-            !(isLabelHidden || groupIsLabelHidden) && (
-              <div 
-                className={style({
-                  display: 'flex',
-                  alignItems: 'center', 
-                  justifyContent: 'center',
-                  flexGrow: 1,
-                  textAlign: 'center',
-                  paddingInline: 'edge-to-text'
-                })}>
-                <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
-                  {textSlot}
-                </div>
-              </div>
-            )
-          )}
-        </>
-      ) : (
-        // Vertical layout with icon and/or description
-        <>
-          {hasIcon && !(isIllustrationHidden || groupIsIllustrationHidden) && (
-            <div className={iconContainer({size, orientation, isDisabled})}>
-              <IllustrationContext.Provider value={{size: 'S'}}>
-                {illustrationSlot}
-              </IllustrationContext.Provider>
-            </div>
-          )}
-          
-          {!(isLabelHidden || groupIsLabelHidden) && (
-            <div className={textContainer({size, orientation, isDisabled})}>
-              {textSlot}
-            </div>
-          )}
+      <div className={contentContainer({size, orientation}, props.styles)}>
+        <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+          <div className={labelText({orientation, isDisabled})}>
+            {textSlot}
+          </div>
           
-          {hasDescription && (
+          {!!descriptionSlot && (
             <div 
-              className={style({
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                textAlign: 'center',
-                marginTop: 'text-to-visual'
-              })}>
-              <div className={descriptionText({size, orientation, isDisabled})}>
-                {descriptionSlot}
-              </div>
+              className={descriptionText({size, orientation, isDisabled})}>
+              {descriptionSlot}
             </div>
           )}
-        </>
-      )}
-      
+        </div>
+      </div>
       {otherChildren}
     </div>
   );
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index b0a14949878..e79140f98b0 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -12,21 +12,18 @@
 import {
   ContextValue,
   ListBox,
-  ListBoxItem,
-  Text
+  ListBoxItem
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, HelpTextProps, Orientation, Selection, SpectrumLabelableProps} from '@react-types/shared';
-import {FieldLabel} from './Field';
+import {DOMRef, DOMRefValue, Orientation, Selection} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, 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 {useId} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface SelectBoxGroupProps extends StyleProps {
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
@@ -63,51 +60,34 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * @default 'default'
    */
   gutterWidth?: 'default' | 'compact' | 'spacious',
-  /**
-   * Whether the SelectBoxGroup is required.
-   */
-  isRequired?: boolean,
   /**
    * Whether the SelectBoxGroup is disabled.
    */
   isDisabled?: boolean,
   /**
-   * Whether to hide the selection checkbox for all SelectBoxes.
-   */
-  isCheckboxHidden?: boolean,
-  /**
-   * Whether to hide the label/text content for all SelectBoxes.
-   */
-  isLabelHidden?: boolean,
-  /**
-   * Whether to hide the illustration/icon for all SelectBoxes.
+   * Whether to show selection checkboxes for all SelectBoxes.
+   * @default false
    */
-  isIllustrationHidden?: boolean,
+  isCheckboxSelection?: boolean,
   /**
-   * The name of the form field.
+   * The name of the form field for form submission.
    */
   name?: string,
   /**
-   * The error message to display when validation fails.
+   * Defines a string value that labels the SelectBoxGroup.
    */
-  errorMessage?: ReactNode,
+  'aria-label'?: string,
   /**
-   * Whether the SelectBoxGroup is in an invalid state.
+   * Identifies the element (or elements) that labels the SelectBoxGroup.
    */
-  isInvalid?: boolean,
-  /**
-   * Contextual help text for the SelectBoxGroup.
-   */
-  contextualHelp?: ReactNode
+  'aria-labelledby'?: string
 }
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   orientation?: Orientation,
   isDisabled?: boolean,
-  isCheckboxHidden?: boolean,
-  isLabelHidden?: boolean,
-  isIllustrationHidden?: boolean,
+  isCheckboxSelection?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
 }
@@ -133,18 +113,12 @@ const containerStyles = style({
   gap: 8
 }, getAllowedOverrides());
 
-const errorMessageStyles = style({
-  color: 'negative',
-  font: 'ui-sm'
-}, getAllowedOverrides());
-
 interface FormIntegrationProps {
   name?: string,
   selectedKeys: Selection,
-  selectionMode: 'single' | 'multiple',
-  isRequired?: boolean,
-  isInvalid?: boolean
+  selectionMode: 'single' | 'multiple'
 }
+
 /**
  * SelectBox groups allow users to select one or more options from a list.
  * All possible options are exposed up front for users to compare.
@@ -154,8 +128,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
   
   let {
-    label,
-    contextualHelp,
     children,
     onSelectionChange,
     selectedKeys: controlledSelectedKeys,
@@ -164,20 +136,15 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     orientation = 'vertical',
     numColumns = 2,
     gutterWidth = 'default',
-    isRequired = false,
     isDisabled = false,
-    isCheckboxHidden = false,
-    isLabelHidden = false,
-    isIllustrationHidden = false,
+    isCheckboxSelection = false,
     name,
-    errorMessage,
-    isInvalid = false,
-    UNSAFE_style
+    UNSAFE_style,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby
   } = props;
 
   const domRef = useDOMRef(ref);
-  const gridId = useId();
-  const errorId = useId();
 
   const [selectedKeys, setSelectedKeys] = useControlledState(
     controlledSelectedKeys,
@@ -185,19 +152,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     onSelectionChange
   );
 
-
-  const validationErrors = useMemo(() => {
-    const errors: string[] = [];
-    
-    const selectionSize = selectedKeys === 'all' ? 1 : selectedKeys.size;
-    if (isRequired && selectionSize === 0) {
-      errors.push('Selection is required');
-    }
-    
-    return errors;
-  }, [isRequired, selectedKeys]);
-
-  const hasValidationErrors = isInvalid || validationErrors.length > 0;
   const childrenArray = React.Children.toArray(children).filter((x) => x);
   
   const disabledKeys = useMemo(() => {
@@ -220,11 +174,8 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   }, [isDisabled, childrenArray]);
   
   useEffect(() => {
-    if (childrenArray.length <= 0) {
-      console.error('Invalid content. SelectBox must have at least one item.');
-    }
     if (childrenArray.length > 9) {
-      console.error('Invalid content. SelectBox cannot have more than 9 children.');
+      console.error('Invalid content. SelectBoxGroup cannot have more than 9 children.');
     }
   }, [childrenArray.length]);
 
@@ -234,15 +185,14 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         allowMultiSelect: selectionMode === 'multiple',
         orientation,
         isDisabled,
-        isCheckboxHidden,
-        isLabelHidden,
-        isIllustrationHidden,
+        isCheckboxSelection,
         selectedKeys,
         onSelectionChange: setSelectedKeys
       };
+      
       return contextValue;
     },
-    [selectionMode, orientation, isDisabled, isCheckboxHidden, isLabelHidden, isIllustrationHidden, selectedKeys, setSelectedKeys]
+    [selectionMode, orientation, isDisabled, isCheckboxSelection, selectedKeys, setSelectedKeys]
   );
 
   return (
@@ -254,29 +204,16 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
       <FormIntegration
         name={name}
         selectedKeys={selectedKeys}
-        selectionMode={selectionMode}
-        isRequired={isRequired}
-        isInvalid={hasValidationErrors} />
-      
-      {label && (
-        <FieldLabel
-          id={gridId}
-          isRequired={isRequired}
-          contextualHelp={contextualHelp}>
-          {label}
-        </FieldLabel>
-      )}
+        selectionMode={selectionMode} />
       
       <ListBox
         layout="grid"
         selectionMode={selectionMode}
         selectedKeys={selectedKeys}
-        onSelectionChange={isDisabled ? () => {} : setSelectedKeys}
+        onSelectionChange={setSelectedKeys}
         disabledKeys={disabledKeys}
-        aria-labelledby={label ? gridId : undefined}
-        aria-describedby={hasValidationErrors && errorMessage ? errorId : undefined}
-        aria-invalid={hasValidationErrors}
-        aria-required={isRequired}
+        aria-label={ariaLabel || 'Select options'}
+        aria-labelledby={ariaLabelledby}
         className={gridStyles({gutterWidth, orientation}, props.styles)}
         style={{
           gridTemplateColumns: `repeat(${numColumns}, 1fr)`
@@ -309,7 +246,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
           const textValue = getTextValue(childElement);
           
           return (
-            <ListBoxItem key={childValue} id={childValue} textValue={textValue} aria-label={textValue} className={style({outlineStyle: 'none'})}>
+            <ListBoxItem key={childValue} id={childValue} textValue={textValue} aria-label={textValue}>
               {(renderProps) => (
                 <SelectBoxContext.Provider value={selectBoxContextValue}>
                   <SelectBoxRenderPropsContext.Provider 
@@ -326,20 +263,11 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
           );
         })}
       </ListBox>
-      
-      {hasValidationErrors && errorMessage && (
-        <Text
-          slot="errorMessage"
-          id={errorId}
-          className={errorMessageStyles(null, props.styles)}>
-          {errorMessage}
-        </Text>
-      )}
     </div>
   );
 });
 
-function FormIntegration({name, selectedKeys, selectionMode, isRequired, isInvalid}: FormIntegrationProps) {
+function FormIntegration({name, selectedKeys, selectionMode}: FormIntegrationProps) {
   if (!name) {
     return null;
   }
@@ -354,28 +282,21 @@ function FormIntegration({name, selectedKeys, selectionMode, isRequired, isInval
             key={index}
             type="hidden"
             name={name}
-            value={val}
-            required={isRequired && index === 0}
-            aria-invalid={isInvalid} />
+            value={val} />
         ))}
-        {values.length === 0 && isRequired && (
+        {values.length === 0 && (
           <input
             type="hidden"
             name={name}
-            value=""
-            required
-            aria-invalid={isInvalid} />
+            value="" />
         )}
       </>
     );
   }
-
   return (
     <input
       type="hidden"
       name={name}
-      value={values[0] || ''}
-      required={isRequired}
-      aria-invalid={isInvalid} />
+      value={values[0] || ''} />
   );
 }
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 204cfe60293..6998dbdcea1 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -20,11 +20,11 @@ import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
 import {Button, Heading, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
-import StarFilled1 from '../spectrum-illustrations/gradient/generic1/Star';
-import StarFilled2 from '../spectrum-illustrations/gradient/generic2/Star';
 import React, {useState} from 'react';
 import type {Selection} from 'react-aria-components';
 import Server from '../spectrum-illustrations/linear/Server';
+import StarFilled1 from '../spectrum-illustrations/gradient/generic1/Star';
+import StarFilled2 from '../spectrum-illustrations/gradient/generic2/Star';
 
 const meta: Meta<typeof SelectBoxGroup> = {
   title: 'SelectBoxGroup',
@@ -48,6 +48,9 @@ const meta: Meta<typeof SelectBoxGroup> = {
     gutterWidth: {
       control: 'select',
       options: ['compact', 'default', 'spacious']
+    },
+    isCheckboxSelection: {
+      control: 'boolean'
     }
   },
   args: {
@@ -55,36 +58,32 @@ const meta: Meta<typeof SelectBoxGroup> = {
     orientation: 'vertical',
     numColumns: 2,
     gutterWidth: 'default',
-    isDisabled: false
+    isDisabled: false,
+    isCheckboxSelection: false
   }
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Basic Stories
 export const Default: Story = {
   render: (args) => (
-    <SelectBoxGroup onSelectionChange={action('onSelectionChange')}>
+    <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="aws">
         <Server slot="illustration" />
         <Text slot="text">Amazon Web Services</Text>
-        <Text slot="description">Reliable cloud infrastructure</Text>
       </SelectBox>
       <SelectBox value="azure">
         <AlertNotice slot="illustration" />
         <Text slot="text">Microsoft Azure</Text>
-        <Text slot="description">Enterprise cloud solutions</Text>
       </SelectBox>
       <SelectBox value="gcp">
         <Paperairplane slot="illustration" />
         <Text slot="text">Google Cloud Platform</Text>
-        <Text slot="description">Modern cloud services</Text>
       </SelectBox>
-      <SelectBox value="oracle">
-        <Server slot="illustration" />
-        <Text slot="text">Oracle Cloud</Text>
-        <Text slot="description">Database-focused cloud</Text>
+      <SelectBox value="ibm">
+        <StarFilled1 slot="illustration" />
+        <Text slot="text">IBM Cloud</Text>
       </SelectBox>
     </SelectBoxGroup>
   )
@@ -154,7 +153,6 @@ export const MultipleSelection: Story = {
   )
 };
 
-// Disabled States
 export const DisabledGroup: Story = {
   args: {
     isDisabled: true,
@@ -314,7 +312,8 @@ function FormAndLayoutStory() {
             action('onSelectionChange')(selection);
           }}
           numColumns={4}
-          gutterWidth="spacious">
+          gutterWidth="spacious"
+          name="preferences">
           
           <SelectBox value="newsletter">
             <AlertNotice slot="illustration" />
@@ -600,3 +599,71 @@ export const AllSlotCombinations: Story = {
     </div>
   )
 };
+
+export const WithCheckboxes: Story = {
+  args: {
+    defaultSelectedKeys: new Set(['aws', 'gcp'])
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Checkboxes Enabled</Heading>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        When isCheckboxSelection is true, checkboxes appear on hover and when selected:
+      </p>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server slot="illustration" />
+          <Text slot="text">Amazon Web Services</Text>
+          <Text slot="description">Reliable cloud infrastructure</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice slot="illustration" />
+          <Text slot="text">Microsoft Azure</Text>
+          <Text slot="description">Enterprise cloud solutions</Text>
+        </SelectBox>
+        <SelectBox value="gcp">
+          <Paperairplane slot="illustration" />
+          <Text slot="text">Google Cloud Platform</Text>
+          <Text slot="description">Modern cloud services</Text>
+        </SelectBox>
+        <SelectBox value="oracle">
+          <Server slot="illustration" />
+          <Text slot="text">Oracle Cloud</Text>
+          <Text slot="description">Database-focused cloud</Text>
+        </SelectBox>
+        <SelectBox value="longtext">
+          <StarFilled1 slot="illustration" />
+          <Text slot="text">This is an extremely long service name that should definitely overflow and show ellipsis behavior</Text>
+          <Text slot="description">This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
+        </SelectBox>
+        <SelectBox value="anotherlongone">
+          <StarFilled2 slot="illustration" />
+          <Text slot="text">Another very long cloud service provider name that will test ellipsis</Text>
+          <Text slot="description">Another extremely long description text that will help us verify how the SelectBox handles text overflow in different scenarios and orientations, ensuring that the text behavior is consistent and user-friendly across all use cases.</Text>
+        </SelectBox>
+        <SelectBox value="shortname">
+          <Paperairplane slot="illustration" />
+          <Text slot="text">Short</Text>
+          <Text slot="description">This description is intentionally very long to create a mixed layout where some boxes have short labels but long descriptions, which will help test how the grid layout handles boxes of different content lengths and whether they maintain consistent heights as expected.</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+      
+      <Heading level={3} UNSAFE_style={{marginTop: 32, marginBottom: 16, fontSize: 16}}>Checkboxes Disabled (Default)</Heading>
+      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+        By default, isCheckboxSelection is false and no checkboxes appear:
+      </p>
+      <SelectBoxGroup defaultSelectedKeys={new Set(['aws'])} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server slot="illustration" />
+          <Text slot="text">Amazon Web Services</Text>
+          <Text slot="description">No checkbox visible</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice slot="illustration" />
+          <Text slot="text">Microsoft Azure</Text>
+          <Text slot="description">No checkbox on hover</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 18ecd042511..81f14bf1c06 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -9,10 +9,10 @@ function SingleSelectBox() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
   return (
     <SelectBoxGroup
+      aria-label="Single selection test"
       selectionMode="single"
       onSelectionChange={setSelectedKeys}
-      selectedKeys={selectedKeys}
-      label="Single select test">
+      selectedKeys={selectedKeys}>
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
       </SelectBox>
@@ -30,10 +30,10 @@ function MultiSelectBox() {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
   return (
     <SelectBoxGroup
+      aria-label="Multi selection test"
       selectionMode="multiple"
       onSelectionChange={setSelectedKeys}
-      selectedKeys={selectedKeys}
-      label="Multi select test">
+      selectedKeys={selectedKeys}>
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
       </SelectBox>
@@ -50,11 +50,11 @@ function MultiSelectBox() {
 function DisabledSelectBox() {
   return (
     <SelectBoxGroup
+      aria-label="Disabled test"
       selectionMode="single"
       onSelectionChange={() => {}}
       selectedKeys={new Set()}
-      isDisabled
-      label="Disabled select test">
+      isDisabled>
       <SelectBox value="option1">
         <Text slot="text">Option 1</Text>
       </SelectBox>
@@ -69,14 +69,14 @@ describe('SelectBoxGroup', () => {
   describe('Basic functionality', () => {
     it('renders as a listbox with options', () => {
       render(<SingleSelectBox />);
-      expect(screen.getByRole('listbox', {name: 'Single select test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
       expect(screen.getAllByRole('option')).toHaveLength(3);
       expect(screen.getByText('Option 1')).toBeInTheDocument();
     });
 
     it('renders multiple selection mode', () => {
       render(<MultiSelectBox />);
-      expect(screen.getByRole('listbox', {name: 'Multi select test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
       expect(screen.getAllByRole('option')).toHaveLength(3);
       expect(screen.getByText('Option 1')).toBeInTheDocument();
     });
@@ -113,14 +113,15 @@ describe('SelectBoxGroup', () => {
     });
   });
 
-  describe('Visual checkbox indicators', () => {
-    it('shows checkbox when item is selected', async () => {
+  describe('Checkbox functionality', () => {
+    it('shows checkbox when showCheckbox=true and item is selected', async () => {
       render(
         <SelectBoxGroup 
+          aria-label="Checkbox test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set(['option1'])}
-          label="Checkbox test">
+          isCheckboxSelection>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -133,18 +134,18 @@ describe('SelectBoxGroup', () => {
       const selectedRow = screen.getByRole('option', {name: 'Option 1'});
       expect(selectedRow).toHaveAttribute('aria-selected', 'true');
       
-      // Look for visual checkbox indicator (the UI checkbox div)
       const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
       expect(checkboxDiv).toBeInTheDocument();
     });
 
-    it('shows checkbox on hover for non-disabled items', async () => {
+    it('shows checkbox on hover when showCheckbox=true for non-disabled items', async () => {
       render(
         <SelectBoxGroup 
+          aria-label="Hover checkbox test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          label="Hover test">
+          isCheckboxSelection>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -155,20 +156,19 @@ describe('SelectBoxGroup', () => {
       
       await userEvent.hover(row);
       await waitFor(() => {
-        // Check for visual checkbox indicator on hover
         const checkboxDiv = row.querySelector('[aria-hidden="true"]');
         expect(checkboxDiv).toBeInTheDocument();
       });
     });
 
-    it('does not show checkbox on hover for disabled items', async () => {
+    it('does not show checkbox when showCheckbox=false', async () => {
       render(
         <SelectBoxGroup 
+          aria-label="No checkbox test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          label="Disabled hover test">
-          <SelectBox value="option1" isDisabled>
+          selectedKeys={new Set(['option1'])}>
+          <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
@@ -176,22 +176,18 @@ describe('SelectBoxGroup', () => {
 
       const row = screen.getByRole('option', {name: 'Option 1'});
       
-      await userEvent.hover(row);
-      
-      await waitFor(() => {
-        // Should not show checkbox for disabled items
-        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
-        expect(checkboxDiv).not.toBeInTheDocument();
-      }, {timeout: 1000});
+      const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+      expect(checkboxDiv).not.toBeInTheDocument();
     });
 
-    it('shows checkbox for disabled but selected items', () => {
+    it('shows checkbox for disabled but selected items when showCheckbox=true', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Disabled selected checkbox test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           defaultSelectedKeys={new Set(['option1'])}
-          label="Disabled selected test">
+          isCheckboxSelection>
           <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -203,79 +199,62 @@ describe('SelectBoxGroup', () => {
       const checkboxDiv = row.querySelector('[aria-hidden="true"]');
       expect(checkboxDiv).toBeInTheDocument();
     });
-  });
 
-  describe('Props and configuration', () => {
-    it('supports different sizes', () => {
+    it('does not show checkbox on hover for disabled items', async () => {
       render(
         <SelectBoxGroup 
+          aria-label="Disabled hover test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          label="Size test">
-          <SelectBox value="option1">
+          isCheckboxSelection>
+          <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('listbox', {name: 'Size test'})).toBeInTheDocument();
-    });
 
-    it('supports horizontal orientation', () => {
-      render(
-        <SelectBoxGroup 
-          selectionMode="single" 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          orientation="horizontal" 
-          label="Orientation test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-      expect(screen.getByRole('listbox', {name: 'Orientation test'})).toBeInTheDocument();
+      const row = screen.getByRole('option', {name: 'Option 1'});
+      
+      await userEvent.hover(row);
+      
+      await waitFor(() => {
+        const checkboxDiv = row.querySelector('[aria-hidden="true"]');
+        expect(checkboxDiv).not.toBeInTheDocument();
+      }, {timeout: 1000});
     });
+  });
 
-    it('supports required state', () => {
+  describe('Props and configuration', () => {
+    it('supports different sizes', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Size test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          isRequired 
-          label="Required test">
+          selectedKeys={new Set()}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      const listbox = screen.getByRole('listbox', {name: 'Required test'});
-      expect(listbox).toBeInTheDocument();
-      expect(screen.getByText('Required test')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('supports error message and validation', () => {
+    it('supports horizontal orientation', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Horizontal test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          isInvalid 
-          errorMessage="Please select an option"
-          label="Validation test">
+          orientation="horizontal">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      const listbox = screen.getByRole('listbox', {name: 'Validation test'});
-      expect(listbox).toBeInTheDocument();
-      
-      expect(screen.getByText('Please select an option')).toBeInTheDocument();
-      
-      const errorMessage = screen.getByText('Please select an option');
-      expect(listbox.getAttribute('aria-describedby')).toBe(errorMessage.id);
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
   });
 
@@ -283,10 +262,10 @@ describe('SelectBoxGroup', () => {
     it('handles initial value selection', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Initial selection test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set(['option1'])}
-          label="Initial value test">
+          selectedKeys={new Set(['option1'])}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -306,10 +285,10 @@ describe('SelectBoxGroup', () => {
     it('handles multiple selection with initial values', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Multiple initial selection test"
           selectionMode="multiple" 
           onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1', 'option2'])}
-          label="Multiple initial test">
+          selectedKeys={new Set(['option1', 'option2'])}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -335,10 +314,10 @@ describe('SelectBoxGroup', () => {
       const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
+          aria-label="Selection change test"
           selectionMode="single"
           onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          label="Callback test">
+          selectedKeys={new Set()}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -360,10 +339,10 @@ describe('SelectBoxGroup', () => {
       const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
+          aria-label="Multiple selection change test"
           selectionMode="multiple"
           onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          label="Multiple callback test">
+          selectedKeys={new Set()}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -386,11 +365,11 @@ describe('SelectBoxGroup', () => {
     it('creates hidden inputs for form submission', () => {
       const {container} = render(
         <SelectBoxGroup
+          aria-label="Form integration test"
           selectionMode="multiple"
           onSelectionChange={() => {}}
           selectedKeys={new Set(['option1', 'option2'])}
-          name="test-field"
-          label="Form test">
+          name="test-field">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -409,11 +388,11 @@ describe('SelectBoxGroup', () => {
     it('creates single hidden input for single selection', () => {
       const {container} = render(
         <SelectBoxGroup
+          aria-label="Single form test"
           selectionMode="single"
           onSelectionChange={() => {}}
           selectedKeys={new Set(['option1'])}
-          name="test-field"
-          label="Single form test">
+          name="test-field">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -436,11 +415,11 @@ describe('SelectBoxGroup', () => {
             onSubmit(values);
           }}>
           <SelectBoxGroup
+            aria-label="Form submission test"
             selectionMode="multiple"
             onSelectionChange={() => {}}
             selectedKeys={new Set(['option1', 'option3'])}
-            name="preferences"
-            label="User Preferences">
+            name="preferences">
             <SelectBox value="option1">
               <Text slot="text">Newsletter</Text>
             </SelectBox>
@@ -464,59 +443,39 @@ describe('SelectBoxGroup', () => {
       
       expect(onSubmit).toHaveBeenCalledWith(['option1', 'option3']);
     });
-  });
 
-  describe('Individual SelectBox behavior', () => {
-    it('handles disabled individual items', () => {
+    it('creates hidden inputs for form submission in single mode', () => {
       render(
         <SelectBoxGroup
+          aria-label="Single form submission test"
           selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set()}
-          label="Individual disabled test">
-          <SelectBox value="option1" isDisabled>
+          selectedKeys={new Set(['option2'])}
+          name="test-field">
+          <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
             <Text slot="text">Option 2</Text>
           </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const rows = screen.getAllByRole('option');
-      expect(rows.length).toBe(2);
-    });
-
-    it('prevents interaction with disabled items', async () => {
-      const onSelectionChange = jest.fn();
-      render(
-        <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          label="Disabled interaction test">
-          <SelectBox value="option1" isDisabled>
-            <Text slot="text">Option 1</Text>
+          <SelectBox value="option3">
+            <Text slot="text">Option 3</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('option', {name: 'Option 1'});
-      await userEvent.click(option1);
-      
-      expect(onSelectionChange).not.toHaveBeenCalled();
+      const hiddenInput = screen.getByDisplayValue('option2');
+      expect(hiddenInput).toBeInTheDocument();
+      expect(hiddenInput).toHaveAttribute('type', 'hidden');
+      expect(hiddenInput).toHaveAttribute('name', 'test-field');
     });
-  });
 
-  describe('Grid navigation', () => {
-    it('supports keyboard navigation', async () => {
+    it('creates multiple hidden inputs for form submission in multiple mode', () => {
       render(
         <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set()}
-          numColumns={2}
-          label="Navigation test">
+          aria-label="Multiple form submission test"
+          selectionMode="multiple"
+          selectedKeys={new Set(['option1', 'option3'])}
+          name="test-field">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -526,123 +485,68 @@ describe('SelectBoxGroup', () => {
           <SelectBox value="option3">
             <Text slot="text">Option 3</Text>
           </SelectBox>
-          <SelectBox value="option4">
-            <Text slot="text">Option 4</Text>
-          </SelectBox>
         </SelectBoxGroup>
       );
 
-      const listbox = screen.getByRole('listbox');
-      const options = screen.getAllByRole('option');
-      
-      expect(listbox).toBeInTheDocument();
-      expect(options).toHaveLength(4);
-      
-      expect(listbox).toHaveStyle('grid-template-columns: repeat(2, 1fr)');
-      
-      expect(screen.getByRole('option', {name: 'Option 1'})).toBeInTheDocument();
-      expect(screen.getByRole('option', {name: 'Option 2'})).toBeInTheDocument();
-      expect(screen.getByRole('option', {name: 'Option 3'})).toBeInTheDocument();
-      expect(screen.getByRole('option', {name: 'Option 4'})).toBeInTheDocument();
+      const hiddenInputs = screen.getAllByDisplayValue(/option[13]/);
+      expect(hiddenInputs).toHaveLength(2);
+      expect(hiddenInputs[0]).toHaveAttribute('type', 'hidden');
+      expect(hiddenInputs[0]).toHaveAttribute('name', 'test-field');
+      expect(hiddenInputs[1]).toHaveAttribute('type', 'hidden');
+      expect(hiddenInputs[1]).toHaveAttribute('name', 'test-field');
     });
 
-    it('supports space key selection', async () => {
-      const onSelectionChange = jest.fn();
+    it('creates empty hidden input when no options selected in multiple mode', () => {
       render(
         <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
+          aria-label="Empty selection test"
+          selectionMode="multiple"
           selectedKeys={new Set()}
-          label="Space key test">
+          name="test-field">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const listbox = screen.getByRole('listbox');
-      await act(async () => {
-        listbox.focus();
-      });
-      
-      await act(async () => {
-        await userEvent.keyboard(' ');
-      });
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      const receivedSelection = onSelectionChange.mock.calls[0][0];
-      expect(Array.from(receivedSelection)).toEqual(['option1']);
-    });
-  });
-
-  describe('Visibility controls', () => {
-    it('supports checkbox visibility controls', () => {
-      render(
-        <SelectBoxGroup
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          isCheckboxHidden
-          label="Checkbox disabled test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
-      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
-      // Should not show checkbox when isCheckboxHidden is true at group level
-      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
-      expect(checkboxDiv).not.toBeInTheDocument();
+      const hiddenInput = screen.getByDisplayValue('');
+      expect(hiddenInput).toBeInTheDocument();
+      expect(hiddenInput).toHaveAttribute('type', 'hidden');
+      expect(hiddenInput).toHaveAttribute('name', 'test-field');
     });
 
-    it('supports individual visibility controls', () => {
+    it('does not create hidden inputs when name prop is not provided', () => {
       render(
         <SelectBoxGroup
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          label="Individual disabled test">
-          <SelectBox value="option1" isCheckboxHidden>
+          aria-label="No name prop test"
+          selectionMode="single"
+          selectedKeys={new Set(['option1'])}>
+          <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
-      // Should not show checkbox when individual isCheckboxHidden is true
-      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
-      expect(checkboxDiv).not.toBeInTheDocument();
-    });
-
-    it('shows elements when both group and individual are false', () => {
-      render(
-        <SelectBoxGroup
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          isCheckboxHidden={false}
-          label="Both enabled test">
-          <SelectBox value="option1" isCheckboxHidden={false}>
-            <Text slot="text">Option 1</Text>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
-      const selectedRow = screen.getByRole('option', {name: 'Option 1'});
-      // Should show checkbox when both group and individual are false
-      const checkboxDiv = selectedRow.querySelector('[aria-hidden="true"]');
-      expect(checkboxDiv).toBeInTheDocument();
+      const hiddenInputs = document.querySelectorAll('input[type="hidden"]');
+      expect(hiddenInputs).toHaveLength(0);
     });
+  });
 
-    it('hides elements when either group or individual is true', () => {
+  describe('Individual SelectBox behavior', () => {
+    it('handles disabled individual items', () => {
       render(
         <SelectBoxGroup
-          selectionMode="multiple"
+          aria-label="Individual disabled test"
+          selectionMode="single"
           onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1', 'option2'])}
-          isCheckboxHidden
-          label="OR logic test">
-          <SelectBox value="option1" isCheckboxHidden={false}>
+          selectedKeys={new Set()}>
+          <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
@@ -651,140 +555,91 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
 
-      // Both should be hidden due to OR logic
-      const option1 = screen.getByRole('option', {name: 'Option 1'});
-      const option2 = screen.getByRole('option', {name: 'Option 2'});
-      
-      const checkbox1 = option1.querySelector('[aria-hidden="true"]');
-      const checkbox2 = option2.querySelector('[aria-hidden="true"]');
-      
-      expect(checkbox1).not.toBeInTheDocument();
-      expect(checkbox2).not.toBeInTheDocument();
+      const rows = screen.getAllByRole('option');
+      expect(rows.length).toBe(2);
     });
 
-    it('tests all visibility control combinations for labels and illustrations', () => {
+    it('prevents interaction with disabled items', async () => {
+      const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
+          aria-label="Disabled interaction test"
           selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1', 'option2', 'option3', 'option4'])}
-          label="All combinations test">
-          <SelectBox value="option1">
-            <Calendar slot="icon" />
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1" isDisabled>
             <Text slot="text">Option 1</Text>
           </SelectBox>
-          <SelectBox value="option2" isLabelHidden>
-            <Calendar slot="icon" />
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-          <SelectBox value="option3" isIllustrationHidden>
-            <Calendar slot="icon" />
-            <Text slot="text">Option 3</Text>
-          </SelectBox>
-          <SelectBox value="option4" isLabelHidden isIllustrationHidden>
-            <Calendar slot="icon" />
-            <Text slot="text">Option 4</Text>
-          </SelectBox>
         </SelectBoxGroup>
       );
 
-      // Option 1: both enabled (false || false = false, so show)
       const option1 = screen.getByRole('option', {name: 'Option 1'});
-      expect(option1.textContent).toContain('Option 1');
-
-      // Option 2: label disabled (true || false = true, so hide label)
-      const option2 = screen.getByRole('option', {name: 'Option 2'});
-      expect(option2).toBeInTheDocument();
-
-      // Option 3: icon disabled (false || true = true, so hide icon)
-      const option3 = screen.getByRole('option', {name: 'Option 3'});
-      expect(option3.textContent).toContain('Option 3');
-
-      // Option 4: both disabled
-      const option4 = screen.getByRole('option', {name: 'Option 4'});
-      expect(option4).toBeInTheDocument();
+      await userEvent.click(option1);
+      
+      expect(onSelectionChange).not.toHaveBeenCalled();
     });
+  });
 
-    it('respects visibility controls during hover interactions', async () => {
+  describe('Grid navigation', () => {
+    it('supports keyboard navigation', async () => {
       render(
         <SelectBoxGroup
+          aria-label="Grid navigation test"
           selectionMode="single"
           onSelectionChange={() => {}}
           selectedKeys={new Set()}
-          isCheckboxHidden
-          label="Hover with visibility test">
+          numColumns={2}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
-          <SelectBox value="option2" isCheckboxHidden={false}>
+          <SelectBox value="option2">
             <Text slot="text">Option 2</Text>
           </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const option1 = screen.getByRole('option', {name: 'Option 1'});
-      const option2 = screen.getByRole('option', {name: 'Option 2'});
-
-      // Hover option1 - should not show checkbox due to group disabled
-      await userEvent.hover(option1);
-      await waitFor(() => {
-        const checkbox1 = option1.querySelector('[aria-hidden="true"]');
-        expect(checkbox1).not.toBeInTheDocument();
-      });
-
-      // Hover option2 - should not show checkbox due to OR logic
-      await userEvent.hover(option2);
-      await waitFor(() => {
-        const checkbox2 = option2.querySelector('[aria-hidden="true"]');
-        expect(checkbox2).not.toBeInTheDocument();
-      });
-    });
-
-    it('handles form integration with visibility controls', () => {
-      const {container} = render(
-        <SelectBoxGroup
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1', 'option2'])}
-          name="test-visibility"
-          isCheckboxHidden
-          label="Form with visibility test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+          <SelectBox value="option3">
+            <Text slot="text">Option 3</Text>
           </SelectBox>
-          <SelectBox value="option2" isCheckboxHidden={false}>
-            <Text slot="text">Option 2</Text>
+          <SelectBox value="option4">
+            <Text slot="text">Option 4</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
-      // Form integration should work regardless of visibility controls
-      const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="test-visibility"]');
-      expect(hiddenInputs).toHaveLength(2);
-      expect(hiddenInputs[0]).toHaveValue('option1');
-      expect(hiddenInputs[1]).toHaveValue('option2');
+      const listbox = screen.getByRole('listbox');
+      const options = screen.getAllByRole('option');
+      
+      expect(listbox).toBeInTheDocument();
+      expect(options).toHaveLength(4);
+      
+      expect(listbox).toHaveStyle('grid-template-columns: repeat(2, 1fr)');
+      
+      expect(screen.getByRole('option', {name: 'Option 1'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 2'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 3'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option 4'})).toBeInTheDocument();
     });
 
-    it('handles selection state changes with visibility controls', async () => {
+    it('supports space key selection', async () => {
       const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup
-          selectionMode="multiple"
+          aria-label="Space key test"
+          selectionMode="single"
           onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          isCheckboxHidden
-          label="Selection with visibility test">
+          selectedKeys={new Set()}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
-      const option1 = screen.getByRole('option', {name: 'Option 1'});
-      
-      // Should still be able to select even with checkbox hidden
-      await userEvent.click(option1);
+      const listbox = screen.getByRole('listbox');
+      await act(async () => {
+        listbox.focus();
+      });
       
+      await act(async () => {
+        await userEvent.keyboard(' ');
+      });
       expect(onSelectionChange).toHaveBeenCalledTimes(1);
       const receivedSelection = onSelectionChange.mock.calls[0][0];
       expect(Array.from(receivedSelection)).toEqual(['option1']);
@@ -800,18 +655,6 @@ describe('SelectBoxGroup', () => {
       (console.error as jest.Mock).mockRestore();
     });
 
-    it('validates minimum children', () => {
-      render(
-        <SelectBoxGroup onSelectionChange={() => {}} selectedKeys={new Set()} label="Min children test">
-          {[]}
-        </SelectBoxGroup>
-      );
-      
-      expect(console.error).toHaveBeenCalledWith(
-        'Invalid content. SelectBox must have at least one item.'
-      );
-    });
-
     it('validates maximum children', () => {
       const manyChildren = Array.from({length: 10}, (_, i) => (
         <SelectBox key={i} value={`option${i}`}>
@@ -820,13 +663,17 @@ describe('SelectBoxGroup', () => {
       ));
       
       render(
-        <SelectBoxGroup onSelectionChange={() => {}} selectedKeys={new Set()} label="Max children test">
+        <SelectBoxGroup 
+          aria-label="Max children test" 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
           {manyChildren}
         </SelectBoxGroup>
       );
       
       expect(console.error).toHaveBeenCalledWith(
-        'Invalid content. SelectBox cannot have more than 9 children.'
+        'Invalid content. SelectBoxGroup cannot have more than 9 children.'
       );
     });
   });
@@ -835,10 +682,10 @@ describe('SelectBoxGroup', () => {
     it('has proper listbox structure', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Accessibility test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          label="ARIA test">
+          selectedKeys={new Set()}>
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -848,61 +695,22 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      expect(screen.getByRole('listbox', {name: 'ARIA test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
       expect(screen.getAllByRole('option')).toHaveLength(2);
     });
-
-    it('associates labels correctly', () => {
-      render(
-        <SelectBoxGroup 
-          selectionMode="single" 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          label="Choose option">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-      
-      const listbox = screen.getByRole('listbox', {name: 'Choose option'});
-      expect(listbox).toBeInTheDocument();
-    });
-
-    it('supports aria-describedby for error messages', () => {
-      render(
-        <SelectBoxGroup 
-          selectionMode="single" 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          isInvalid
-          errorMessage="Error occurred"
-          label="Error test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-      
-      const listbox = screen.getByRole('listbox');
-      const errorMessage = screen.getByText('Error occurred');
-      
-      expect(listbox).toHaveAttribute('aria-describedby');
-      expect(errorMessage).toBeInTheDocument();
-    });
   });
 
   describe('Edge cases', () => {
     it('handles complex children with slots', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Complex children test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          orientation="horizontal"
-          label="Complex children test">
+          orientation="horizontal">
           <SelectBox value="option1">
-            <Calendar slot="icon" />
+            <Calendar slot="illustration" />
             <Text slot="text">Complex Option</Text>
             <Text slot="description">With description</Text>
           </SelectBox>
@@ -916,10 +724,10 @@ describe('SelectBoxGroup', () => {
     it('handles empty string values', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Empty value test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          label="Empty value test">
+          selectedKeys={new Set()}>
           <SelectBox value="">
             <Text slot="text">Empty Value</Text>
           </SelectBox>
@@ -933,41 +741,26 @@ describe('SelectBoxGroup', () => {
     it('handles different gutter widths', () => {
       render(
         <SelectBoxGroup 
+          aria-label="Gutter width test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          gutterWidth="compact" 
-          label="Gutter test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-      expect(screen.getByRole('listbox', {name: 'Gutter test'})).toBeInTheDocument();
-    });
-
-    it('handles emphasized style', () => {
-      render(
-        <SelectBoxGroup 
-          selectionMode="single" 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          label="Emphasized test">
+          gutterWidth="compact">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-      expect(screen.getByRole('listbox', {name: 'Emphasized test'})).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
     it('handles "all" selection', () => {
       render(
         <SelectBoxGroup 
+          aria-label="All selection test"
           selectionMode="multiple" 
           onSelectionChange={() => {}} 
-          selectedKeys="all"
-          label="All selected test">
+          selectedKeys="all">
           <SelectBox value="option1">
             <Text slot="text">Option 1</Text>
           </SelectBox>
@@ -994,10 +787,10 @@ describe('SelectBoxGroup', () => {
               Select Option 2
             </button>
             <SelectBoxGroup 
+              aria-label="Controlled test"
               selectionMode="single" 
               onSelectionChange={setSelectedKeys} 
-              selectedKeys={selectedKeys}
-              label="Controlled test">
+              selectedKeys={selectedKeys}>
               <SelectBox value="option1">
                 <Text slot="text">Option 1</Text>
               </SelectBox>
@@ -1017,191 +810,6 @@ describe('SelectBoxGroup', () => {
       const option2 = screen.getByRole('option', {name: 'Option 2'});
       expect(option2).toHaveAttribute('aria-selected', 'true');
     });
-
-    it('handles keyboard navigation with visibility controls', async () => {
-      const onSelectionChange = jest.fn();
-      render(
-        <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          isCheckboxHidden
-          label="Keyboard with visibility test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const listbox = screen.getByRole('listbox');
-      await act(async () => {
-        listbox.focus();
-      });
-      
-      // Navigate with arrow keys
-      await act(async () => {
-        await userEvent.keyboard('{ArrowDown}');
-      });
-      
-      // Select with space - the first option should be focused/selected by default
-      await act(async () => {
-        await userEvent.keyboard(' ');
-      });
-      
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      const receivedSelection = onSelectionChange.mock.calls[0][0];
-      expect(Array.from(receivedSelection)).toEqual(['option1']);
-    });
-
-    it('maintains proper ARIA attributes with visibility controls', () => {
-      render(
-        <SelectBoxGroup
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          isCheckboxHidden
-          isRequired
-          isInvalid
-          errorMessage="Test error"
-          label="ARIA with visibility test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const listbox = screen.getByRole('listbox');
-      expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
-      
-      const options = screen.getAllByRole('option');
-      expect(options[0]).toHaveAttribute('aria-selected', 'true');
-      expect(options[1]).toHaveAttribute('aria-selected', 'false');
-      
-      const errorMessage = screen.getByText('Test error');
-      expect(listbox).toHaveAttribute('aria-describedby', errorMessage.id);
-    });
-
-    it('handles horizontal orientation with visibility controls', () => {
-      render(
-        <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          orientation="horizontal"
-          isCheckboxHidden
-          label="Horizontal visibility test">
-          <SelectBox value="option1">
-            <Calendar slot="icon" />
-            <Text slot="text">Option 1</Text>
-            <Text slot="description">Description</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const option = screen.getByRole('option', {name: 'Option 1'});
-      expect(option).toBeInTheDocument();
-      
-      // Checkbox should be hidden due to group setting
-      const checkbox = option.querySelector('[aria-hidden="true"]');
-      expect(checkbox).not.toBeInTheDocument();
-      
-      expect(option.textContent).toContain('Option 1');
-      expect(option.textContent).toContain('Description');
-    });
-
-    it('validates children count with visibility controls', () => {
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-      
-      render(
-        <SelectBoxGroup 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()} 
-          isCheckboxHidden
-          label="Too many children test">
-          {Array.from({length: 12}, (_, i) => (
-            <SelectBox key={i} value={`option${i}`}>
-              <Text slot="text">Option {i}</Text>
-            </SelectBox>
-          ))}
-        </SelectBoxGroup>
-      );
-      
-      expect(consoleSpy).toHaveBeenCalledWith(
-        'Invalid content. SelectBox cannot have more than 9 children.'
-      );
-      
-      consoleSpy.mockRestore();
-    });
-
-    it('handles complex slot combinations with visibility controls', () => {
-      render(
-        <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['complex'])}
-          label="Complex slots test">
-          <SelectBox value="complex">
-            
-            <Text slot="text">Complex Item</Text>
-            <Text slot="description">With multiple slots</Text>
-            <div>Additional content</div>
-            <span>More content</span>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const option = screen.getByRole('option', {name: 'Complex Item'});
-      expect(option).toBeInTheDocument();
-      
-      // Should show checkbox since item is selected and not disabled
-      const checkbox = option.querySelector('[aria-hidden="true"]');
-      expect(checkbox).toBeInTheDocument();
-      
-      expect(option.textContent).toContain('Complex Item');
-      expect(option.textContent).toContain('With multiple slots');
-      expect(option.textContent).toContain('Additional content');
-      expect(option.textContent).toContain('More content');
-    });
-
-    it('handles rapid selection changes with visibility controls', async () => {
-      const onSelectionChange = jest.fn();
-      render(
-        <SelectBoxGroup
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
-          selectedKeys={new Set()}
-          isCheckboxHidden
-          label="Rapid selection test">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-          <SelectBox value="option3">
-            <Text slot="text">Option 3</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const options = screen.getAllByRole('option');
-      
-      // Rapidly click multiple options - in single mode, only last selection matters
-      await userEvent.click(options[0]);
-      await userEvent.click(options[1]);
-      await userEvent.click(options[2]);
-      
-      expect(onSelectionChange).toHaveBeenCalledTimes(3);
-      
-      const finalSelection = onSelectionChange.mock.calls[2][0];
-      expect(Array.from(finalSelection)).toEqual(['option3']);
-    });
   });
 });
 

From bd3d6b735b9bd6ecc48ca7b4d1f25c7e721051ad Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Fri, 1 Aug 2025 15:44:56 -0700
Subject: [PATCH 18/24] fixed group disabled checkbox issue

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 28 ++++-------------
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx |  8 ++---
 .../s2/stories/SelectBoxGroup.stories.tsx     |  3 +-
 .../s2/test/SelectBoxGroup.test.tsx           | 31 +++++++++++++++++++
 4 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 70fc8b46468..358539ff644 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -113,9 +113,9 @@ const selectBoxStyles = style({
     }
   },
   gap: {
-    default: 12,
+    default: 8,
     orientation: {
-      horizontal: 0
+      horizontal: 8
     }
   },
   // Visual styling
@@ -185,18 +185,8 @@ const illustrationContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  size: {
-    S: 20,
-    M: 24,
-    L: 28,
-    XL: 32
-  },
+  minSize: 48,
   flexShrink: 0,
-  marginEnd: {
-    orientation: {
-      horizontal: 12
-    }
-  },
   color: {
     isDisabled: 'disabled'
   },
@@ -232,11 +222,6 @@ const textContainer = style({
   },
   width: '100%',
   minWidth: 0,
-  overflow: {
-    orientation: {
-      horizontal: 'hidden'
-    }
-  },
   color: {
     default: 'neutral',
     isDisabled: 'disabled'
@@ -270,12 +255,12 @@ const descriptionText = style({
       horizontal: 'hidden'
     }
   },
-  wordWrap: {
+  textOverflow: 'ellipsis',
+  whiteSpace: {
     orientation: {
-      horizontal: 'break-word'
+      horizontal: 'nowrap'
     }
   },
-  font: 'ui',
   color: {
     default: 'neutral',
     isDisabled: 'disabled'
@@ -299,7 +284,6 @@ const labelText = style({
       horizontal: 'stretch'
     }
   },
-  font: 'ui',
   fontWeight: {
     orientation: {
       horizontal: 'bold'
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index e79140f98b0..92ed7aebb87 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -155,16 +155,14 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   const childrenArray = React.Children.toArray(children).filter((x) => x);
   
   const disabledKeys = useMemo(() => {
-    if (isDisabled) {
-      return 'all';
-    }
-    
     const disabled = new Set<string>();
+    
     childrenArray.forEach((child, index) => {
       if (React.isValidElement(child)) {
         const childElement = child as ReactElement<{value?: string, isDisabled?: boolean}>;
         const childValue = childElement.props?.value || String(index);
-        if (childElement.props?.isDisabled) {
+        
+        if (isDisabled || childElement.props?.isDisabled) {
           disabled.add(childValue);
         }
       }
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 6998dbdcea1..c15de1d1370 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -156,7 +156,8 @@ export const MultipleSelection: Story = {
 export const DisabledGroup: Story = {
   args: {
     isDisabled: true,
-    defaultSelectedKeys: new Set(['option1'])
+    defaultSelectedKeys: new Set(['option1']),
+    isCheckboxSelection: true
   },
   render: (args) => (
     <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 81f14bf1c06..8bfb7a0d6fc 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -111,6 +111,37 @@ describe('SelectBoxGroup', () => {
       const options = screen.getAllByRole('option');
       expect(options.length).toBeGreaterThan(0);
     });
+
+    it('prevents interaction when group is disabled', async () => {
+      const onSelectionChange = jest.fn();
+      render(
+        <SelectBoxGroup
+          aria-label="Group disabled test"
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+          selectedKeys={new Set()}
+          isDisabled>
+          <SelectBox value="option1">
+            <Text slot="text">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="text">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      await userEvent.click(option1);
+      await userEvent.click(option2);
+      
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      
+      // Items should have disabled attributes
+      expect(option1).toHaveAttribute('aria-disabled', 'true');
+      expect(option2).toHaveAttribute('aria-disabled', 'true');
+    });
   });
 
   describe('Checkbox functionality', () => {

From 85f7e21efd5a850011d8b65adec693a513757370 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Fri, 1 Aug 2025 16:28:49 -0700
Subject: [PATCH 19/24] pruned styles

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 43 ++++---------------
 .../s2/stories/SelectBoxGroup.stories.tsx     |  8 +---
 2 files changed, 9 insertions(+), 42 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 358539ff644..82258af866c 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -177,8 +177,7 @@ const contentContainer = style({
       horizontal: '1 0 0'
     }
   },
-  width: '100%',
-  minWidth: 0
+  width: '100%'
 }, getAllowedOverrides());
 
 const illustrationContainer = style({
@@ -229,38 +228,11 @@ const textContainer = style({
 }, getAllowedOverrides());
 
 const descriptionText = style({
-  display: {
-    default: 'none',
-    orientation: {
-      horizontal: 'block'
-    }
-  },
-  alignSelf: {
-    orientation: {
-      horizontal: 'stretch'
-    }
-  },
-  width: {
-    orientation: {
-      horizontal: '100%'
-    }
-  },
-  minWidth: {
-    orientation: {
-      horizontal: 0
-    }
-  },
-  overflow: {
-    orientation: {
-      horizontal: 'hidden'
-    }
-  },
-  textOverflow: 'ellipsis',
-  whiteSpace: {
-    orientation: {
-      horizontal: 'nowrap'
-    }
-  },
+  display: 'block',
+  alignSelf: 'stretch',
+  width: '100%',
+  minWidth: 0,
+  whiteSpace: 'normal',
   color: {
     default: 'neutral',
     isDisabled: 'disabled'
@@ -271,6 +243,7 @@ const labelText = style({
   display: 'block',
   width: '100%',
   overflow: 'hidden',
+  minWidth: 0,
   textAlign: {
     default: 'center',
     orientation: {
@@ -387,7 +360,7 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
             {textSlot}
           </div>
           
-          {!!descriptionSlot && (
+          {!!descriptionSlot && orientation === 'horizontal' && (
             <div 
               className={descriptionText({size, orientation, isDisabled})}>
               {descriptionSlot}
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index c15de1d1370..577982e916b 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -608,9 +608,6 @@ export const WithCheckboxes: Story = {
   render: (args) => (
     <div style={{maxWidth: 600}}>
       <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Checkboxes Enabled</Heading>
-      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-        When isCheckboxSelection is true, checkboxes appear on hover and when selected:
-      </p>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
           <Server slot="illustration" />
@@ -639,7 +636,7 @@ export const WithCheckboxes: Story = {
         </SelectBox>
         <SelectBox value="anotherlongone">
           <StarFilled2 slot="illustration" />
-          <Text slot="text">Another very long cloud service provider name that will test ellipsis</Text>
+          <Text slot="text">Another extremely long text. This is a very long text that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
           <Text slot="description">Another extremely long description text that will help us verify how the SelectBox handles text overflow in different scenarios and orientations, ensuring that the text behavior is consistent and user-friendly across all use cases.</Text>
         </SelectBox>
         <SelectBox value="shortname">
@@ -650,9 +647,6 @@ export const WithCheckboxes: Story = {
       </SelectBoxGroup>
       
       <Heading level={3} UNSAFE_style={{marginTop: 32, marginBottom: 16, fontSize: 16}}>Checkboxes Disabled (Default)</Heading>
-      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-        By default, isCheckboxSelection is false and no checkboxes appear:
-      </p>
       <SelectBoxGroup defaultSelectedKeys={new Set(['aws'])} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
           <Server slot="illustration" />

From bdee23ab0cd6deb304b96eedf4526b098ad457d2 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Sun, 3 Aug 2025 22:58:01 -0700
Subject: [PATCH 20/24] fixed label overflow, description still remaining

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 21 +++++++++++--------
 .../s2/stories/SelectBoxGroup.stories.tsx     |  5 +----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
index 82258af866c..eee17474890 100644
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBox.tsx
@@ -177,7 +177,8 @@ const contentContainer = style({
       horizontal: '1 0 0'
     }
   },
-  width: '100%'
+  width: '100%',
+  overflow: 'hidden'
 }, getAllowedOverrides());
 
 const illustrationContainer = style({
@@ -224,15 +225,19 @@ const textContainer = style({
   color: {
     default: 'neutral',
     isDisabled: 'disabled'
-  }
+  },
 }, getAllowedOverrides());
 
 const descriptionText = style({
-  display: 'block',
-  alignSelf: 'stretch',
+  alignSelf: 'stretch', 
   width: '100%',
   minWidth: 0,
-  whiteSpace: 'normal',
+  overflow: 'hidden',
+  maxHeight: {
+    orientation: {
+      horizontal: 120,
+    }
+  },
   color: {
     default: 'neutral',
     isDisabled: 'disabled'
@@ -353,13 +358,11 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
           </IllustrationContext.Provider>
         </div>
       )}
-      
-      <div className={contentContainer({size, orientation}, props.styles)}>
-        <div className={textContainer({size, orientation, isDisabled}, props.styles)}>
+      <div className={contentContainer({size, orientation})}>
+        <div className={textContainer({size, orientation, isDisabled})}>
           <div className={labelText({orientation, isDisabled})}>
             {textSlot}
           </div>
-          
           {!!descriptionSlot && orientation === 'horizontal' && (
             <div 
               className={descriptionText({size, orientation, isDisabled})}>
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 577982e916b..4ecb0bd97ba 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -388,9 +388,6 @@ function FormAndLayoutStory() {
           <div style={{marginTop: 8}}>
             Preferences: {submittedData.length > 0 ? submittedData.join(', ') : 'None selected'}
           </div>
-          <div style={{marginTop: 4, fontSize: 12, color: '#666'}}>
-            Form data would be sent to server with name "preferences"
-          </div>
         </div>
       )}
     </div>
@@ -642,7 +639,7 @@ export const WithCheckboxes: Story = {
         <SelectBox value="shortname">
           <Paperairplane slot="illustration" />
           <Text slot="text">Short</Text>
-          <Text slot="description">This description is intentionally very long to create a mixed layout where some boxes have short labels but long descriptions, which will help test how the grid layout handles boxes of different content lengths and whether they maintain consistent heights as expected.</Text>
+          <Text slot="description">This description is intentionally very long to create a mixed layout where some boxes have short labels but long descriptions, which will help test how the grid layout handles boxes of different content lengths and whether they maintain consistent heights as expected. This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
         </SelectBox>
       </SelectBoxGroup>
       

From 9ad81e627e96c3eeb4ce7e17fff60c6277744d30 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Wed, 6 Aug 2025 19:48:00 -0700
Subject: [PATCH 21/24] moved selectbox into same file, reworked grid,
 addressed various gh comments

---
 packages/@react-spectrum/s2/src/SelectBox.tsx | 379 -------------
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 489 +++++++++++------
 packages/@react-spectrum/s2/src/index.ts      |   6 +-
 .../s2/stories/SelectBoxGroup.stories.tsx     | 486 ++++++++---------
 .../s2/test/SelectBoxGroup.test.tsx           | 502 ++++++++----------
 5 files changed, 802 insertions(+), 1060 deletions(-)
 delete mode 100644 packages/@react-spectrum/s2/src/SelectBox.tsx

diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx
deleted file mode 100644
index eee17474890..00000000000
--- a/packages/@react-spectrum/s2/src/SelectBox.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-/*
- * Copyright 2025 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {box, iconStyles} from './Checkbox';
-import Checkmark from '../ui-icons/Checkmark';
-import {ContextValue} from 'react-aria-components';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {IllustrationContext} from '../src/Icon';
-import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {SelectBoxContext} from './SelectBoxGroup';
-import {style} from '../style' with {type: 'macro'};
-import {useFocusableRef} from '@react-spectrum/utils';
-import {useSpectrumContextProps} from './useSpectrumContextProps';
-
-export interface SelectBoxProps extends StyleProps {
-  /**
-   * The value of the SelectBox.
-   */
-  value: string,
-  /**
-   * The label for the element.
-   */
-  children?: ReactNode,
-  /**
-   * Whether the SelectBox is disabled.
-   */
-  isDisabled?: boolean
-}
-
-export const SelectBoxSpectrumContext = createContext<ContextValue<Partial<SelectBoxProps>, FocusableRefValue<HTMLDivElement>>>(null);
-
-const selectBoxStyles = style({
-  display: 'flex',
-  flexDirection: {
-    default: 'column',
-    orientation: {
-      horizontal: 'row'
-    }
-  },
-  justifyContent: {
-    default: 'center',
-    orientation: {
-      horizontal: 'start'
-    }
-  },
-  alignItems: 'center',
-  font: 'ui',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  overflow: 'hidden',
-  position: 'relative',
-  // Sizing
-  width: {
-    default: 170,
-    orientation: {
-      horizontal: 368
-    }
-  },
-  height: {
-    default: 170,
-    orientation: {
-      horizontal: '100%'
-    }
-  },
-  minWidth: {
-    default: 144,
-    orientation: {
-      horizontal: 188
-    }
-  },
-  maxWidth: {
-    default: 170,
-    orientation: {
-      horizontal: 480
-    }
-  },
-  minHeight: {
-    default: 144,
-    orientation: {
-      horizontal: 80
-    }
-  },
-  maxHeight: {
-    default: 170,
-    orientation: {
-      horizontal: 240
-    }
-  },
-  // Spacing
-  padding: {
-    default: 24,
-    orientation: {
-      horizontal: 16
-    }
-  },
-  paddingStart: {
-    orientation: {
-      horizontal: 24
-    }
-  },
-  paddingEnd: {
-    orientation: {
-      horizontal: 32
-    }
-  },
-  gap: {
-    default: 8,
-    orientation: {
-      horizontal: 8
-    }
-  },
-  // Visual styling
-  borderRadius: 'lg',
-  backgroundColor: {
-    default: 'layer-2',
-    isDisabled: 'layer-1'
-  },
-  color: {
-    isDisabled: 'disabled'
-  },
-  boxShadow: {
-    default: 'emphasized',
-    isHovered: 'elevated',
-    isSelected: 'elevated',
-    forcedColors: 'none',
-    isDisabled: 'emphasized'
-  },
-  borderWidth: 2,
-  borderStyle: 'solid',
-  borderColor: {
-    default: 'transparent',
-    isSelected: 'gray-900',
-    isFocusVisible: 'blue-900',
-    isDisabled: 'transparent'
-  },
-  transition: 'default',
-  cursor: {
-    default: 'pointer',
-    isDisabled: 'default'
-  },
-  outlineStyle: 'none'
-}, getAllowedOverrides());
-
-const contentContainer = style({
-  display: 'flex',
-  flexDirection: {
-    default: 'column',
-    orientation: {
-      horizontal: 'row'
-    }
-  },
-  justifyContent: 'center',
-  alignItems: 'center',
-  textAlign: {
-    default: 'center',
-    orientation: {
-      horizontal: 'start'
-    }
-  },
-  gap: {
-    default: 8,
-    orientation: {
-      horizontal: 12
-    }
-  },
-  flex: {
-    orientation: {
-      horizontal: '1 0 0'
-    }
-  },
-  width: '100%',
-  overflow: 'hidden'
-}, getAllowedOverrides());
-
-const illustrationContainer = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minSize: 48,
-  flexShrink: 0,
-  color: {
-    isDisabled: 'disabled'
-  },
-  opacity: {
-    isDisabled: 0.4
-  }
-});
-
-const textContainer = style({
-  display: 'flex',
-  flexDirection: {
-    orientation: {
-      horizontal: 'column'
-    }
-  },
-  justifyContent: 'center',
-  alignItems: {
-    default: 'center',
-    orientation: {
-      horizontal: 'start'
-    }
-  },
-  gap: {
-    default: 12,
-    orientation: {
-      horizontal: 2
-    }
-  },
-  flex: {
-    orientation: {
-      horizontal: '1 0 0'
-    }
-  },
-  width: '100%',
-  minWidth: 0,
-  color: {
-    default: 'neutral',
-    isDisabled: 'disabled'
-  },
-}, getAllowedOverrides());
-
-const descriptionText = style({
-  alignSelf: 'stretch', 
-  width: '100%',
-  minWidth: 0,
-  overflow: 'hidden',
-  maxHeight: {
-    orientation: {
-      horizontal: 120,
-    }
-  },
-  color: {
-    default: 'neutral',
-    isDisabled: 'disabled'
-  }
-});
-
-const labelText = style({
-  display: 'block',
-  width: '100%',
-  overflow: 'hidden',
-  minWidth: 0,
-  textAlign: {
-    default: 'center',
-    orientation: {
-      horizontal: 'start'
-    }
-  },
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  alignSelf: {
-    orientation: {
-      horizontal: 'stretch'
-    }
-  },
-  fontWeight: {
-    orientation: {
-      horizontal: 'bold'
-    }
-  },
-  color: {
-    default: 'neutral',
-    isDisabled: 'disabled'
-  }
-});
-
-
-const SelectBoxRenderPropsContext = createContext<{
-  isHovered?: boolean,
-  isFocusVisible?: boolean,
-  isPressed?: boolean
-}>({});
-
-/**
- * SelectBox components allow users to select options from a list.
- * Works as content within a ListBoxItem.
- */
-export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: SelectBoxProps, ref: FocusableRef<HTMLDivElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, SelectBoxSpectrumContext);
-  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 {
-    orientation = 'vertical',
-    selectedKeys,
-    isDisabled: groupDisabled = false,
-    isCheckboxSelection = false
-  } = contextValue;
-
-  let renderProps = useContext(SelectBoxRenderPropsContext);
-
-  const size = 'M';
-  const isDisabled = individualDisabled || groupDisabled;
-  const isSelected = selectedKeys === 'all' || (selectedKeys && selectedKeys.has(value));
-  
-  const childrenArray = React.Children.toArray(children);
-  const illustrationSlot = childrenArray.find((child: any) => child?.props?.slot === 'illustration');
-  const textSlot = childrenArray.find((child: any) => child?.props?.slot === 'text');
-  const descriptionSlot = childrenArray.find((child: any) => child?.props?.slot === 'description');
-  const otherChildren = childrenArray.filter((child: any) => 
-    !['illustration', 'text', 'description'].includes(child?.props?.slot)
-  );
-
-  return (
-    <div
-      ref={domRef}
-      className={selectBoxStyles({
-        size, 
-        orientation, 
-        isDisabled,
-        isSelected,
-        isHovered: renderProps.isHovered || false,
-        isFocusVisible: renderProps.isFocusVisible || false
-      }, props.styles)}
-      style={UNSAFE_style}>
-      {isCheckboxSelection && (isSelected || (!isDisabled && renderProps.isHovered)) && (
-        <div 
-          className={style({
-            position: 'absolute',
-            top: 16,
-            left: 16
-          })}
-          aria-hidden="true">
-          <div
-            className={box({
-              isSelected,
-              isDisabled,
-              size: 'M'
-            } as any)}>
-            {isSelected && (
-              <Checkmark 
-                size="S" 
-                className={iconStyles} />
-            )}
-          </div>
-        </div>
-      )}
-      {!!illustrationSlot && (
-        <div className={illustrationContainer({size: 'S', orientation, isDisabled})}>
-          <IllustrationContext.Provider value={{size: 'S'}}>
-            {illustrationSlot}
-          </IllustrationContext.Provider>
-        </div>
-      )}
-      <div className={contentContainer({size, orientation})}>
-        <div className={textContainer({size, orientation, isDisabled})}>
-          <div className={labelText({orientation, isDisabled})}>
-            {textSlot}
-          </div>
-          {!!descriptionSlot && orientation === 'horizontal' && (
-            <div 
-              className={descriptionText({size, orientation, isDisabled})}>
-              {descriptionSlot}
-            </div>
-          )}
-        </div>
-      </div>
-      {otherChildren}
-    </div>
-  );
-});
-
-export {SelectBoxRenderPropsContext};
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 92ed7aebb87..517f40e814f 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -9,29 +9,29 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMRef, DOMRefValue, Orientation, Selection} from '@react-types/shared';
+import {box, iconStyles} from './Checkbox';
+import Checkmark from '../ui-icons/Checkmark';
 import {
   ContextValue,
   ListBox,
-  ListBoxItem
+  ListBoxItem,
+  ListBoxProps,
+  Provider
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, Orientation, Selection} 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, ReactElement, ReactNode, useEffect, useMemo} from 'react';
-import {SelectBoxRenderPropsContext} from './SelectBox';
-import {style} from '../style' with {type: 'macro'};
+import {IllustrationContext} from '../src/Icon';
+import React, {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';
+import {TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
-import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxGroupProps extends StyleProps {
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, 'layout' | 'dragAndDropHooks'>, AriaLabelingProps{
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
   children: ReactNode,
-  /**
-   * Handler that is called when the selection changes.
-   */
-  onSelectionChange?: (selection: Selection) => void,
   /**
    * The selection mode for the SelectBoxGroup.
    * @default 'single'
@@ -45,11 +45,6 @@ export interface SelectBoxGroupProps extends StyleProps {
    * The initial selected keys in the collection (uncontrolled).
    */
   defaultSelectedKeys?: Selection,
-  /**
-   * The axis the SelectBox elements should align with.
-   * @default 'vertical'
-   */
-  orientation?: Orientation,
   /**
    * Number of columns to display the SelectBox elements in.
    * @default 2
@@ -68,32 +63,232 @@ export interface SelectBoxGroupProps extends StyleProps {
    * Whether to show selection checkboxes for all SelectBoxes.
    * @default false
    */
-  isCheckboxSelection?: boolean,
+  showCheckbox?: boolean
+}
+
+export interface SelectBoxProps extends StyleProps {
   /**
-   * The name of the form field for form submission.
+   * The value of the SelectBox.
    */
-  name?: string,
+  value: string,
   /**
-   * Defines a string value that labels the SelectBoxGroup.
+   * The label for the element.
    */
-  'aria-label'?: string,
+  children?: ReactNode,
   /**
-   * Identifies the element (or elements) that labels the SelectBoxGroup.
+   * Whether the SelectBox is disabled.
    */
-  'aria-labelledby'?: string
+  isDisabled?: boolean
 }
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
   orientation?: Orientation,
   isDisabled?: boolean,
-  isCheckboxSelection?: boolean,
+  showCheckbox?: boolean,
   selectedKeys?: Selection,
   onSelectionChange?: (keys: Selection) => void
 }
 
 export const SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});
-export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+const descriptionOnly = ':has([slot=description]):not(:has([slot=label]))';
+const labelOnly = ':has([slot=label]):not(:has([slot=description]))';
+const selectBoxStyles = style({
+  ...focusRing(),
+  outlineOffset: {
+    isFocusVisible: -2
+  },
+  display: 'grid',
+  gridAutoRows: '1fr',
+  position: 'relative',
+  font: 'ui',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  width: {
+    default: 170,
+    orientation: {
+      horizontal: 368
+    }
+  },
+  height: {
+    default: 170,
+    orientation: {
+      horizontal: '100%'
+    }
+  },
+  minWidth: {
+    default: 144,
+    orientation: {
+      horizontal: 188
+    }
+  },
+  maxWidth: {
+    default: 170,
+    orientation: {
+      horizontal: 480
+    }
+  },
+  minHeight: {
+    default: 144,
+    orientation: {
+      horizontal: 80
+    }
+  },
+  maxHeight: {
+    default: 170,
+    orientation: {
+      horizontal: 240
+    }
+  },
+  padding: {
+    default: 24,
+    orientation: {
+      horizontal: 16
+    }
+  },
+  paddingStart: {
+    orientation: {
+      horizontal: 24
+    }
+  },
+  paddingEnd: {
+    orientation: {
+      horizontal: 32
+    }
+  },
+  gridTemplateAreas: {
+    orientation: {
+      vertical: [
+        'illustration',
+        '.',
+        'label'
+      ],
+      horizontal: {
+        default: [
+          'illustration . label',
+          'illustration . description'
+        ],
+        [descriptionOnly]: [
+          'illustration . description'
+        ],
+        [labelOnly]: [
+          'illustration . label'
+        ]
+      }
+    }
+  },
+  gridTemplateRows: {
+    orientation: {
+      vertical: ['min-content', 8, 'min-content'],
+      horizontal: ['min-content', 'min-content']
+    }
+  },
+  gridTemplateColumns: {
+    orientation: {
+      horizontal: ['min-content', 12, '1fr']
+    }
+  },
+  alignContent: {
+    orientation: {
+      vertical: 'center'
+    }
+  },
+  borderRadius: 'lg',
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: 'gray-900',
+    isDisabled: 'transparent'
+  },
+  backgroundColor: {
+    default: 'layer-2',
+    isDisabled: 'layer-1'
+  },
+  color: {
+    isDisabled: 'disabled'
+  },
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isSelected: 'elevated',
+    forcedColors: 'none',
+    isDisabled: 'emphasized'
+  },
+  borderWidth: 2,
+  transition: 'default',
+  cursor: {
+    default: 'pointer',
+    isDisabled: 'default'
+  }
+}, getAllowedOverrides());
+
+const illustrationContainer = style({
+  gridArea: 'illustration',
+  alignSelf: 'center',
+  justifySelf: 'center',
+  minSize: 48,
+  color: {
+    isDisabled: 'disabled'
+  },
+  opacity: {
+    isDisabled: 0.4
+  }
+});
+
+const descriptionText = style({
+  gridArea: 'description',
+  alignSelf: 'center',
+  display: {
+    default: 'block',
+    orientation: {
+      vertical: 'none'
+    }
+  },
+  overflow: 'hidden',
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  }
+});
+
+const labelText = style({
+  gridArea: 'label',
+  alignSelf: 'center',
+  justifySelf: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  width: '100%',
+  overflow: 'hidden',
+  minWidth: 0,
+  textAlign: {
+    default: 'center',
+    orientation: {
+      horizontal: 'start'
+    }
+  },
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontWeight: {
+    orientation: {
+      horizontal: 'bold'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  }
+});
 
 const gridStyles = style({
   display: 'grid',
@@ -107,26 +302,90 @@ const gridStyles = style({
   }
 }, getAllowedOverrides());
 
-const containerStyles = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8
-}, getAllowedOverrides());
+/**
+ * SelectBox is a single selectable item in a SelectBoxGroup.
+ */
+export function SelectBox(props: SelectBoxProps): ReactNode {
+  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;
+  
+  let {
+    orientation = 'vertical',
+    isDisabled: groupDisabled = false,
+    showCheckbox = false
+  } = useContext(SelectBoxContext);
+
+  const size = 'M';
+  const isDisabled = individualDisabled || groupDisabled;
 
-interface FormIntegrationProps {
-  name?: string,
-  selectedKeys: Selection,
-  selectionMode: 'single' | 'multiple'
+  return (
+    <ListBoxItem
+      id={value}
+      isDisabled={isDisabled}
+      textValue={value}
+      className={renderProps => (props.UNSAFE_className || '') + selectBoxStyles({
+        size, 
+        orientation, 
+        isDisabled: renderProps.isDisabled,
+        isSelected: renderProps.isSelected,
+        isHovered: renderProps.isHovered,
+        isFocusVisible: renderProps.isFocusVisible
+      }, props.styles)}
+      style={UNSAFE_style}>
+      {(renderProps) => (
+        <>
+          {showCheckbox && (renderProps.isSelected || (!renderProps.isDisabled && renderProps.isHovered)) && (
+            <div 
+              className={style({
+                position: 'absolute',
+                top: 12,
+                left: 12
+              })}
+              aria-hidden="true">
+              <div
+                className={box({
+                  isSelected: renderProps.isSelected,
+                  isDisabled: renderProps.isDisabled,
+                  size: 'M'
+                } as any)}>
+                {renderProps.isSelected && (
+                  <Checkmark 
+                    size="S" 
+                    className={iconStyles} />
+                )}
+              </div>
+            </div>
+          )}
+          <Provider
+            values={[
+              [IllustrationContext, {
+                size: 'S',
+                styles: illustrationContainer({size: 'S', orientation, isDisabled: renderProps.isDisabled})
+              }],
+              [TextContext, {
+                slots: {
+                  label: {
+                    styles: labelText({orientation, isDisabled: renderProps.isDisabled})
+                  },
+                  description: {
+                    styles: descriptionText({orientation, isDisabled: renderProps.isDisabled})
+                  }
+                }
+              }]
+            ]}>
+            {children}
+          </Provider>
+        </>
+      )}
+    </ListBoxItem>
+  );
 }
 
 /**
- * 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 ListBox for automatic grid-based keyboard navigation.
+ * SelectBoxGroup allows users to select one or more options from a list.
  */
-export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
-  
+
   let {
     children,
     onSelectionChange,
@@ -137,15 +396,11 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
     numColumns = 2,
     gutterWidth = 'default',
     isDisabled = false,
-    isCheckboxSelection = false,
-    name,
-    UNSAFE_style,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby
+    showCheckbox = false,
+    UNSAFE_className,
+    UNSAFE_style
   } = props;
 
-  const domRef = useDOMRef(ref);
-
   const [selectedKeys, setSelectedKeys] = useControlledState(
     controlledSelectedKeys,
     defaultSelectedKeys || new Set(),
@@ -153,27 +408,9 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
   );
 
   const childrenArray = React.Children.toArray(children).filter((x) => x);
-  
-  const disabledKeys = useMemo(() => {
-    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 (isDisabled || childElement.props?.isDisabled) {
-          disabled.add(childValue);
-        }
-      }
-    });
-    
-    return disabled.size > 0 ? disabled : undefined;
-  }, [isDisabled, childrenArray]);
-  
   useEffect(() => {
     if (childrenArray.length > 9) {
-      console.error('Invalid content. SelectBoxGroup cannot have more than 9 children.');
+      console.warn('Invalid content. SelectBoxGroup cannot have more than 9 children.');
     }
   }, [childrenArray.length]);
 
@@ -183,118 +420,32 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         allowMultiSelect: selectionMode === 'multiple',
         orientation,
         isDisabled,
-        isCheckboxSelection,
+        showCheckbox,
         selectedKeys,
         onSelectionChange: setSelectedKeys
       };
       
       return contextValue;
     },
-    [selectionMode, orientation, isDisabled, isCheckboxSelection, selectedKeys, setSelectedKeys]
+    [selectionMode, orientation, isDisabled, showCheckbox, selectedKeys, setSelectedKeys]
   );
 
   return (
-    <div
-      className={containerStyles(null, props.styles)}
-      style={UNSAFE_style}
-      ref={domRef}>
-      
-      <FormIntegration
-        name={name}
-        selectedKeys={selectedKeys}
-        selectionMode={selectionMode} />
-      
-      <ListBox
-        layout="grid"
-        selectionMode={selectionMode}
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
-        disabledKeys={disabledKeys}
-        aria-label={ariaLabel || 'Select options'}
-        aria-labelledby={ariaLabelledby}
-        className={gridStyles({gutterWidth, orientation}, props.styles)}
-        style={{
-          gridTemplateColumns: `repeat(${numColumns}, 1fr)`
-        }}>
-        
-        {childrenArray.map((child, index) => {
-          if (!React.isValidElement(child)) {return null;}
-          
-          const childElement = child as ReactElement<{value?: string}>;
-          const childValue = childElement.props?.value || String(index);
-          
-          const getTextValue = (element: ReactElement): string => {
-            const elementProps = (element as any).props;
-            const children = React.Children.toArray(elementProps.children) as ReactElement[];
-            const textSlot = children.find((child: any) => 
-              React.isValidElement(child) && (child as any).props?.slot === 'text'
-            );
-            
-            if (React.isValidElement(textSlot)) {
-              return String((textSlot as any).props.children || '');
-            }
-            
-            const textContent = children
-              .filter((child: any) => typeof child === 'string')
-              .join(' ');
-            
-            return textContent || childValue;
-          };
-          
-          const textValue = getTextValue(childElement);
-          
-          return (
-            <ListBoxItem key={childValue} id={childValue} textValue={textValue} aria-label={textValue}>
-              {(renderProps) => (
-                <SelectBoxContext.Provider value={selectBoxContextValue}>
-                  <SelectBoxRenderPropsContext.Provider 
-                    value={{
-                      isHovered: renderProps.isHovered,
-                      isFocusVisible: renderProps.isFocusVisible,
-                      isPressed: renderProps.isPressed
-                    }}>
-                    {child}
-                  </SelectBoxRenderPropsContext.Provider>
-                </SelectBoxContext.Provider>
-              )}
-            </ListBoxItem>
-          );
-        })}
-      </ListBox>
-    </div>
+    <ListBox
+      layout="grid"
+      selectionMode={selectionMode}
+      selectedKeys={selectedKeys}
+      onSelectionChange={setSelectedKeys}
+      className={UNSAFE_className + gridStyles({gutterWidth, orientation}, props.styles)}
+      aria-label="SelectBoxGroup"
+      aria-labelledby="SelectBoxGroup"
+      style={{
+        gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
+        ...UNSAFE_style
+      }}>
+      <SelectBoxContext.Provider value={selectBoxContextValue}>
+        {children}
+      </SelectBoxContext.Provider>
+    </ListBox>
   );
 });
-
-function FormIntegration({name, selectedKeys, selectionMode}: FormIntegrationProps) {
-  if (!name) {
-    return null;
-  }
-
-  const values = selectedKeys === 'all' ? [] : Array.from(selectedKeys).map(String);
-
-  if (selectionMode === 'multiple') {
-    return (
-      <>
-        {values.map((val, index) => (
-          <input
-            key={index}
-            type="hidden"
-            name={name}
-            value={val} />
-        ))}
-        {values.length === 0 && (
-          <input
-            type="hidden"
-            name={name}
-            value="" />
-        )}
-      </>
-    );
-  }
-  return (
-    <input
-      type="hidden"
-      name={name}
-      value={values[0] || ''} />
-  );
-}
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 8efded57cf0..28924ec0645 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -72,8 +72,7 @@ export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
-export {SelectBox} from './SelectBox';
-export {SelectBoxGroup, SelectBoxContext} from './SelectBoxGroup';
+export {SelectBox, SelectBoxContext, SelectBoxGroup} from './SelectBoxGroup';
 export {Slider, SliderContext} from './Slider';
 export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
@@ -150,8 +149,7 @@ export type {RadioProps} from './Radio';
 export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
-export type {SelectBoxProps} from './SelectBox';
-export type {SelectBoxGroupProps} from './SelectBoxGroup';
+export type {SelectBoxProps, SelectBoxGroupProps} from './SelectBoxGroup';
 export type {SliderProps} from './Slider';
 export type {RangeCalendarProps} from './RangeCalendar';
 export type {RangeSliderProps} from './RangeSlider';
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 4ecb0bd97ba..e7575ab6a30 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -17,14 +17,44 @@
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
-import {Button, Heading, SelectBox, SelectBoxGroup, Text} from '../src';
+import {Button, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
-import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
+import PaperAirplane from '../spectrum-illustrations/linear/Paperairplane';
 import React, {useState} from 'react';
 import type {Selection} from 'react-aria-components';
 import Server from '../spectrum-illustrations/linear/Server';
 import StarFilled1 from '../spectrum-illustrations/gradient/generic1/Star';
 import StarFilled2 from '../spectrum-illustrations/gradient/generic2/Star';
+import {style} from '../style' with {type: 'macro'};
+
+const headingStyles = style({
+  font: 'heading',
+  margin: 0,
+  marginBottom: 16
+});
+
+const subheadingStyles = style({
+  font: 'heading',
+  fontSize: 'heading-lg',
+  margin: 0,
+  marginBottom: 16
+});
+
+const sectionHeadingStyles = style({
+  font: 'heading', 
+  fontSize: 'heading-sm',
+  color: 'gray-600',
+  margin: 0,
+  marginBottom: 8
+});
+
+const descriptionStyles = style({
+  font: 'body',
+  fontSize: 'body-sm',
+  color: 'gray-600',
+  margin: 0,
+  marginBottom: 16
+});
 
 const meta: Meta<typeof SelectBoxGroup> = {
   title: 'SelectBoxGroup',
@@ -49,7 +79,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
       control: 'select',
       options: ['compact', 'default', 'spacious']
     },
-    isCheckboxSelection: {
+    showCheckbox: {
       control: 'boolean'
     }
   },
@@ -59,7 +89,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
     numColumns: 2,
     gutterWidth: 'default',
     isDisabled: false,
-    isCheckboxSelection: false
+    showCheckbox: false
   }
 };
 
@@ -70,20 +100,22 @@ export const Default: Story = {
   render: (args) => (
     <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="aws">
-        <Server slot="illustration" />
-        <Text slot="text">Amazon Web Services</Text>
+        <Server />
+        <Text slot="label">Amazon Web Services</Text>
+        <Text slot="description">Reliable cloud infrastructure</Text>
       </SelectBox>
       <SelectBox value="azure">
-        <AlertNotice slot="illustration" />
-        <Text slot="text">Microsoft Azure</Text>
+        <AlertNotice />
+        <Text slot="label">Microsoft Azure</Text>
       </SelectBox>
       <SelectBox value="gcp">
-        <Paperairplane slot="illustration" />
-        <Text slot="text">Google Cloud Platform</Text>
+        <PaperAirplane />
+        <Text slot="label">Google Cloud Platform</Text>
       </SelectBox>
       <SelectBox value="ibm">
-        <StarFilled1 slot="illustration" />
-        <Text slot="text">IBM Cloud</Text>
+        <StarFilled1 />
+        <Text slot="label">IBM Cloud</Text>
+        <Text slot="description">Hybrid cloud solutions</Text>
       </SelectBox>
     </SelectBoxGroup>
   )
@@ -93,7 +125,6 @@ export const MultipleSelection: Story = {
   args: {
     selectionMode: 'multiple',
     defaultSelectedKeys: new Set(['aws', 'gcp']),
-    necessityIndicator: 'icon',
     numColumns: 3,
     gutterWidth: 'default'
   },
@@ -104,48 +135,48 @@ export const MultipleSelection: Story = {
       </p>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
-          <Server slot="illustration" />
-          <Text slot="text">Amazon Web Services</Text>
-          <Text slot="description">Reliable cloud infrastructure</Text>
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
+          {/* <Text slot="description">Reliable cloud infrastructure</Text> */}
         </SelectBox>
         <SelectBox value="azure">
-          <AlertNotice slot="illustration" />
-          <Text slot="text">Microsoft Azure</Text>
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
           <Text slot="description">Enterprise cloud solutions</Text>
         </SelectBox>
         <SelectBox value="gcp">
-          <Paperairplane slot="illustration" />
-          <Text slot="text">Google Cloud Platform</Text>
+          <PaperAirplane />
+          <Text slot="label">Google Cloud Platform</Text>
           <Text slot="description">Modern cloud services</Text>
         </SelectBox>
         <SelectBox value="oracle">
-          <Server slot="illustration" />
-          <Text slot="text">Oracle Cloud</Text>
+          <Server />
+          <Text slot="label">Oracle Cloud</Text>
           <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
         <SelectBox value="ibm">
-          <Server slot="illustration" />
-          <Text slot="text">IBM Cloud</Text>
+          <Server />
+          <Text slot="label">IBM Cloud</Text>
           <Text slot="description">Hybrid cloud solutions</Text>
         </SelectBox>
         <SelectBox value="alibaba">
-          <Paperairplane slot="illustration" />
-          <Text slot="text">Alibaba Cloud</Text>
+          <PaperAirplane />
+          <Text slot="label">Alibaba Cloud</Text>
           <Text slot="description">Asia-focused services</Text>
         </SelectBox>
         <SelectBox value="digitalocean">
-          <Server slot="illustration" />
-          <Text slot="text">DigitalOcean</Text>
+          <Server />
+          <Text slot="label">DigitalOcean</Text>
           <Text slot="description">Developer-friendly platform</Text>
         </SelectBox>
         <SelectBox value="linode">
-          <AlertNotice slot="illustration" />
-          <Text slot="text">Linode</Text>
+          <AlertNotice />
+          <Text slot="label">Linode</Text>
           <Text slot="description">Simple cloud computing</Text>
         </SelectBox>
         <SelectBox value="vultr">
-          <Paperairplane slot="illustration" />
-          <Text slot="text">Vultr</Text>
+          <PaperAirplane />
+          <Text slot="label">Vultr</Text>
           <Text slot="description">High performance cloud</Text>
         </SelectBox>
       </SelectBoxGroup>
@@ -162,12 +193,12 @@ export const DisabledGroup: Story = {
   render: (args) => (
     <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
       <SelectBox value="option1">
-        <Server slot="illustration" />
-        <Text slot="text">Selected then Disabled</Text>
+        <Server />
+        <Text slot="label">Selected then Disabled</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <AlertNotice slot="illustration" />
-        <Text slot="text">Disabled</Text>
+        <AlertNotice />
+        <Text slot="label">Disabled</Text>
       </SelectBox>
     </SelectBoxGroup>
   )
@@ -178,8 +209,8 @@ function InteractiveExamplesStory() {
 
   return (
     <div style={{maxWidth: 800}}>
-      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Interactive Features Combined</Heading>
-      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
+      <h3 className={subheadingStyles}>Interactive Features Combined</h3>
+      <p className={descriptionStyles}>
         Current selection: {selectedKeys === 'all' ? 'All' : Array.from(selectedKeys).join(', ') || 'None'}
       </p>
       
@@ -192,70 +223,70 @@ function InteractiveExamplesStory() {
           setSelectedKeys(selection);
           action('onSelectionChange')(selection);
         }}>
-        {/* Enabled items with dynamic icons */}
+        {/* Enabled items with dynamic illustrations */}
         <SelectBox value="enabled1">
           {selectedKeys !== 'all' && selectedKeys.has('enabled1') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Enabled Item 1</Text>
+          <Text slot="label">Enabled Item 1</Text>
           <Text slot="description">Status updates</Text>
         </SelectBox>
         <SelectBox value="enabled2">
           {selectedKeys !== 'all' && selectedKeys.has('enabled2') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Enabled Item 2</Text>
+          <Text slot="label">Enabled Item 2</Text>
           <Text slot="description">Click to toggle</Text>
         </SelectBox>
         {/* Disabled item */}
         <SelectBox value="disabled1" isDisabled>
-          <AlertNotice slot="illustration" />
-          <Text slot="text">Disabled Item</Text>
+          <AlertNotice />
+          <Text slot="label">Disabled Item</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
         <SelectBox value="starred1">
           {selectedKeys !== 'all' && selectedKeys.has('starred1') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Starred Item 1</Text>
+          <Text slot="label">Starred Item 1</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
         <SelectBox value="starred2">
           {selectedKeys !== 'all' && selectedKeys.has('starred2') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Starred Item 2</Text>
+          <Text slot="label">Starred Item 2</Text>
           <Text slot="description">Click to star</Text>
         </SelectBox>
         <SelectBox value="disabled2" isDisabled>
-          <Server slot="illustration" />
-          <Text slot="text">Disabled Service</Text>
+          <Server />
+          <Text slot="label">Disabled Service</Text>
           <Text slot="description">Cannot select</Text>
         </SelectBox>
         <SelectBox value="dynamic1">
           {selectedKeys !== 'all' && selectedKeys.has('dynamic1') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Dynamic Icon</Text>
+          <Text slot="label">Dynamic Illustration</Text>
           <Text slot="description">Click to activate</Text>
         </SelectBox>
         <SelectBox value="controllable">
           {selectedKeys !== 'all' && selectedKeys.has('controllable') ? (
-            <StarFilled1 slot="illustration" />
+            <StarFilled1 />
           ) : (
-            <StarFilled2 slot="illustration" />
+            <StarFilled2 />
           )}
-          <Text slot="text">Controllable</Text>
+          <Text slot="label">Controllable</Text>
           <Text slot="description">External control available</Text>
         </SelectBox>
       </SelectBoxGroup>
@@ -285,180 +316,81 @@ export const InteractiveExamples: Story = {
   render: () => <InteractiveExamplesStory />
 };
 
-function FormAndLayoutStory() {
-  const [selectedPreferences, setSelectedPreferences] = useState<Selection>(new Set(['newsletter', 'security']));
-  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: 1000}}>
-      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Form Integration with Multiple Columns</Heading>
-      <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-        8-item grid with form integration demonstrating both layout and submission capabilities.
-      </p>
-      
-      <form onSubmit={handleSubmit}>
-        <SelectBoxGroup
-          selectionMode="multiple"
-          selectedKeys={selectedPreferences}
-          onSelectionChange={(selection) => {
-            setSelectedPreferences(selection);
-            action('onSelectionChange')(selection);
-          }}
-          numColumns={4}
-          gutterWidth="spacious"
-          name="preferences">
-          
-          <SelectBox value="newsletter">
-            <AlertNotice slot="illustration" />
-            <Text slot="text">Newsletter</Text>
-            <Text slot="description">Weekly updates and news</Text>
-          </SelectBox>
-          
-          <SelectBox value="marketing">
-            <Paperairplane slot="illustration" />
-            <Text slot="text">Marketing</Text>
-            <Text slot="description">Product promotions</Text>
-          </SelectBox>
-          
-          <SelectBox value="product">
-            <Server slot="illustration" />
-            <Text slot="text">Product News</Text>
-            <Text slot="description">Feature announcements</Text>
-          </SelectBox>
-          
-          <SelectBox value="security">
-            <AlertNotice slot="illustration" />
-            <Text slot="text">Security Alerts</Text>
-            <Text slot="description">Important updates</Text>
-          </SelectBox>
-          
-          <SelectBox value="events">
-            <Paperairplane slot="illustration" />
-            <Text slot="text">Events</Text>
-            <Text slot="description">Webinars & conferences</Text>
-          </SelectBox>
-          
-          <SelectBox value="surveys">
-            <Server slot="illustration" />
-            <Text slot="text">Surveys</Text>
-            <Text slot="description">Help us improve</Text>
-          </SelectBox>
-          
-          <SelectBox value="community">
-            <AlertNotice slot="illustration" />
-            <Text slot="text">Community</Text>
-            <Text slot="description">Forum notifications</Text>
-          </SelectBox>
-          
-          <SelectBox value="support">
-            <Server slot="illustration" />
-            <Text slot="text">Support</Text>
-            <Text slot="description">Help & assistance</Text>
-          </SelectBox>
-          
-        </SelectBoxGroup>
-        
-        <div style={{marginTop: 24, display: 'flex', gap: 12, alignItems: 'center'}}>
-          <Button type="submit" variant="accent">
-            Save Preferences
-          </Button>
-          <Button 
-            type="button"
-            onPress={() => setSelectedPreferences(new Set(['newsletter', 'security']))}
-            variant="secondary">
-            Reset to Default
-          </Button>
-          <span style={{fontSize: 14, color: '#666'}}>
-            Selected: {selectedPreferences === 'all' ? 'All' : selectedPreferences.size} item{(selectedPreferences === 'all' || selectedPreferences.size !== 1) ? 's' : ''}
-          </span>
-        </div>
-      </form>
-      
-      {submittedData && (
-        <div style={{marginTop: 20, padding: 16, backgroundColor: '#f0f8ff', borderRadius: 8, border: '1px solid #b3d9ff'}}>
-          <div><strong>Form Submitted Successfully!</strong></div>
-          <div style={{marginTop: 8}}>
-            Preferences: {submittedData.length > 0 ? submittedData.join(', ') : 'None selected'}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export const FormAndLayout: Story = {
-  render: () => <FormAndLayoutStory />
-};
-
 export const AllSlotCombinations: Story = {
   render: () => (
     <div style={{maxWidth: 1200, padding: 20}}>
-      <Heading level={2} UNSAFE_style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold'}}>All Slot Combinations</Heading>
+      <h2 className={headingStyles}>All Slot Combinations</h2>
       
       {/* Vertical Orientation */}
       <div style={{marginBottom: 40}}>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Vertical Orientation</Heading>
+        <h3 className={subheadingStyles}>Vertical Orientation</h3>
         <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
           
           {/* Text Only */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only</Heading>
+            <h4 className={sectionHeadingStyles}>Text Only</h4>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="text-only">
-                <Text slot="text">Simple Text</Text>
+                <Text slot="label">Simple Text</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
-          {/* Icon + Text */}
+          {/* Illustration + Text */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</Heading>
+            <h4 className={sectionHeadingStyles}>Illustration + Text</h4>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="icon-text">
-                <Server slot="illustration" />
-                <Text slot="text">With Icon</Text>
+              <SelectBox value="illustration-text">
+                <Server />
+                <Text slot="label">With Illustration</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
           {/* Text + Description */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</Heading>
+            <h4 className={sectionHeadingStyles}>Text + Description</h4>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="text-desc">
-                <Text slot="text">Main Text</Text>
+                <Text slot="label">Main Text</Text>
                 <Text slot="description">Additional description</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
-          {/* Icon + Text + Description */}
+          {/* Illustration + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Description</h4>
+            <SelectBoxGroup 
+              orientation="vertical" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="illustration-desc">
+                <PaperAirplane />
+                <Text slot="description">Only description text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text + Description */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</Heading>
+            <h4 className={sectionHeadingStyles}>Illustration + Text + Description</h4>
             <SelectBoxGroup 
               orientation="vertical" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="all-vertical">
-                <AlertNotice slot="illustration" />
-                <Text slot="text">Full Vertical</Text>
+                <AlertNotice />
+                <Text slot="label">Full Vertical</Text>
                 <Text slot="description">Complete description</Text>
               </SelectBox>
             </SelectBoxGroup>
@@ -469,60 +401,74 @@ export const AllSlotCombinations: Story = {
 
       {/* Horizontal Orientation */}
       <div>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Horizontal Orientation</Heading>
+        <h3 className={subheadingStyles}>Horizontal Orientation</h3>
         <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
           
           {/* Text Only */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text Only (Optimized)</Heading>
+            <h4 className={sectionHeadingStyles}>Text Only (Optimized)</h4>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="h-text-only">
-                <Text slot="text">Simple Horizontal Text</Text>
+                <Text slot="label">Simple Horizontal Text</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
-          {/* Icon + Text */}
+          {/* Illustration + Text */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text</Heading>
+            <h4 className={sectionHeadingStyles}>Illustration + Text</h4>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="h-icon-text">
-                <Paperairplane slot="illustration" />
-                <Text slot="text">Horizontal with Icon</Text>
+              <SelectBox value="h-illustration-text">
+                <PaperAirplane />
+                <Text slot="label">Horizontal with Illustration</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
           {/* Text + Description */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Text + Description</Heading>
+            <h4 className={sectionHeadingStyles}>Text + Description</h4>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="h-text-desc">
-                <Text slot="text">Main Horizontal Text</Text>
+                <Text slot="label">Main Horizontal Text</Text>
                 <Text slot="description">Horizontal description text</Text>
               </SelectBox>
             </SelectBoxGroup>
           </div>
 
-          {/* Icon + Text + Description */}
+          {/* Illustration + Description */}
           <div>
-            <Heading level={4} UNSAFE_style={{marginBottom: 8, fontSize: 14, color: '#666'}}>Icon + Text + Description</Heading>
+            <h4 className={sectionHeadingStyles}>Illustration + Description</h4>
+            <SelectBoxGroup 
+              orientation="horizontal" 
+              numColumns={1}
+              onSelectionChange={action('onSelectionChange')}>
+              <SelectBox value="h-illustration-desc">
+                <PaperAirplane />
+                <Text slot="description">Only horizontal description text</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+
+          {/* Illustration + Text + Description */}
+          <div>
+            <h4 className={sectionHeadingStyles}>Illustration + Text + Description</h4>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}
               onSelectionChange={action('onSelectionChange')}>
               <SelectBox value="h-all">
-                <Server slot="illustration" />
-                <Text slot="text">Complete Horizontal</Text>
+                <Server />
+                <Text slot="label">Complete Horizontal</Text>
                 <Text slot="description">Full horizontal layout with all elements</Text>
               </SelectBox>
             </SelectBoxGroup>
@@ -533,30 +479,35 @@ export const AllSlotCombinations: Story = {
 
       {/* Comparison Grid */}
       <div style={{marginTop: 40}}>
-        <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Side-by-Side Comparison</Heading>
+        <h3 className={subheadingStyles}>Side-by-Side Comparison</h3>
         <SelectBoxGroup 
-          numColumns={4}
+          numColumns={5}
           gutterWidth="spacious"
           onSelectionChange={action('onSelectionChange')}>
           
           {/* Vertical examples */}
           <SelectBox value="v1">
-            <Text slot="text">V: Text Only</Text>
+            <Text slot="label">V: Text Only</Text>
           </SelectBox>
           
           <SelectBox value="v2">
-            <StarFilled1 slot="illustration" />
-            <Text slot="text">V: Icon + Text</Text>
+            <StarFilled1 />
+            <Text slot="label">V: Illustration + Text</Text>
           </SelectBox>
           
           <SelectBox value="v3">
-            <Text slot="text">V: Text + Desc</Text>
+            <Text slot="label">V: Text + Desc</Text>
             <Text slot="description">Vertical description</Text>
           </SelectBox>
           
           <SelectBox value="v4">
-            <AlertNotice slot="illustration" />
-            <Text slot="text">V: All Elements</Text>
+            <PaperAirplane />
+            <Text slot="description">V: Illustration + Desc</Text>
+          </SelectBox>
+          
+          <SelectBox value="v5">
+            <AlertNotice />
+            <Text slot="label">V: All Elements</Text>
             <Text slot="description">Complete vertical</Text>
           </SelectBox>
           
@@ -565,28 +516,33 @@ export const AllSlotCombinations: Story = {
         <div style={{marginTop: 20}}>
           <SelectBoxGroup 
             orientation="horizontal"
-            numColumns={2}
+            numColumns={5}
             gutterWidth="spacious"
             onSelectionChange={action('onSelectionChange')}>
             
             {/* Horizontal examples */}
             <SelectBox value="h1">
-              <Text slot="text">H: Text Only</Text>
+              <Text slot="label">H: Text Only</Text>
             </SelectBox>
             
             <SelectBox value="h2">
-              <StarFilled1 slot="illustration" />
-              <Text slot="text">H: Icon + Text</Text>
+              <StarFilled1 />
+              <Text slot="label">H: Illustration + Text</Text>
             </SelectBox>
             
             <SelectBox value="h3">
-              <Text slot="text">H: Text + Description</Text>
+              <Text slot="label">H: Text + Description</Text>
               <Text slot="description">Horizontal description</Text>
             </SelectBox>
             
             <SelectBox value="h4">
-              <Paperairplane slot="illustration" />
-              <Text slot="text">H: All Elements</Text>
+              <Server />
+              <Text slot="description">H: Illustration + Desc</Text>
+            </SelectBox>
+            
+            <SelectBox value="h5">
+              <PaperAirplane />
+              <Text slot="label">H: All Elements</Text>
               <Text slot="description">Complete horizontal layout</Text>
             </SelectBox>
             
@@ -604,58 +560,112 @@ export const WithCheckboxes: Story = {
   },
   render: (args) => (
     <div style={{maxWidth: 600}}>
-      <Heading level={3} UNSAFE_style={{marginBottom: 16, fontSize: 16}}>Checkboxes Enabled</Heading>
+      <h3 className={subheadingStyles}>Checkboxes Enabled</h3>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
-          <Server slot="illustration" />
-          <Text slot="text">Amazon Web Services</Text>
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
           <Text slot="description">Reliable cloud infrastructure</Text>
         </SelectBox>
         <SelectBox value="azure">
-          <AlertNotice slot="illustration" />
-          <Text slot="text">Microsoft Azure</Text>
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
           <Text slot="description">Enterprise cloud solutions</Text>
         </SelectBox>
         <SelectBox value="gcp">
-          <Paperairplane slot="illustration" />
-          <Text slot="text">Google Cloud Platform</Text>
+          <PaperAirplane />
+          <Text slot="label">Google Cloud Platform</Text>
           <Text slot="description">Modern cloud services</Text>
         </SelectBox>
         <SelectBox value="oracle">
-          <Server slot="illustration" />
-          <Text slot="text">Oracle Cloud</Text>
+          <Server />
+          <Text slot="label">Oracle Cloud</Text>
           <Text slot="description">Database-focused cloud</Text>
         </SelectBox>
         <SelectBox value="longtext">
-          <StarFilled1 slot="illustration" />
-          <Text slot="text">This is an extremely long service name that should definitely overflow and show ellipsis behavior</Text>
+          <StarFilled1 />
+          <Text slot="label">This is an extremely long service name that should definitely overflow and show ellipsis behavior</Text>
           <Text slot="description">This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
         </SelectBox>
         <SelectBox value="anotherlongone">
-          <StarFilled2 slot="illustration" />
-          <Text slot="text">Another extremely long text. This is a very long text that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
+          <StarFilled2 />
+          <Text slot="label">Another extremely long text. This is a very long text that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
           <Text slot="description">Another extremely long description text that will help us verify how the SelectBox handles text overflow in different scenarios and orientations, ensuring that the text behavior is consistent and user-friendly across all use cases.</Text>
         </SelectBox>
         <SelectBox value="shortname">
-          <Paperairplane slot="illustration" />
-          <Text slot="text">Short</Text>
+          <PaperAirplane />
+          <Text slot="label">Short</Text>
           <Text slot="description">This description is intentionally very long to create a mixed layout where some boxes have short labels but long descriptions, which will help test how the grid layout handles boxes of different content lengths and whether they maintain consistent heights as expected. This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
         </SelectBox>
       </SelectBoxGroup>
       
-      <Heading level={3} UNSAFE_style={{marginTop: 32, marginBottom: 16, fontSize: 16}}>Checkboxes Disabled (Default)</Heading>
+      <h3 style={{marginTop: 32}} className={subheadingStyles}>Checkboxes Disabled (Default)</h3>
       <SelectBoxGroup defaultSelectedKeys={new Set(['aws'])} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="aws">
-          <Server slot="illustration" />
-          <Text slot="text">Amazon Web Services</Text>
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
           <Text slot="description">No checkbox visible</Text>
         </SelectBox>
         <SelectBox value="azure">
-          <AlertNotice slot="illustration" />
-          <Text slot="text">Microsoft Azure</Text>
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
           <Text slot="description">No checkbox on hover</Text>
         </SelectBox>
       </SelectBoxGroup>
     </div>
   )
 };
+
+export const TextSlots: Story = {
+  args: {
+    orientation: 'horizontal'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <h3 className={subheadingStyles}>Text Slots Example</h3>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server />
+          <Text slot="label">Amazon Web Services</Text>
+          <Text slot="description">Reliable cloud infrastructure</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
+          <Text slot="description">Enterprise cloud solutions</Text>
+        </SelectBox>
+        <SelectBox value="gcp">
+          <PaperAirplane />
+          <Text slot="label">Google Cloud Platform</Text>
+          <Text slot="description">Modern cloud services</Text>
+        </SelectBox>
+        <SelectBox value="oracle">
+          <Server />
+          <Text slot="label">Oracle Cloud</Text>
+          <Text slot="description">Database-focused cloud</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const WithDescription: Story = {
+  args: {
+    orientation: 'horizontal'
+  },
+  render: (args) => (
+    <div style={{maxWidth: 600}}>
+      <h3 className={subheadingStyles}>With Description</h3>
+      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="aws">
+          <Server />
+          <Text slot="description">Reliable cloud infrastructure</Text>
+        </SelectBox>
+        <SelectBox value="azure">
+          <AlertNotice />
+          <Text slot="label">Microsoft Azure</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 8bfb7a0d6fc..947810ee18b 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -1,7 +1,7 @@
 import {act, render, screen, waitFor} from '@react-spectrum/test-utils-internal';
-import {Button, SelectBox, SelectBoxGroup, Text} from '../src';
 import Calendar from '../spectrum-illustrations/linear/Calendar';
 import React from 'react';
+import {SelectBox, SelectBoxGroup, Text} from '../src';
 import {Selection} from '@react-types/shared';
 import userEvent from '@testing-library/user-event';
 
@@ -14,13 +14,13 @@ function SingleSelectBox() {
       onSelectionChange={setSelectedKeys}
       selectedKeys={selectedKeys}>
       <SelectBox value="option1">
-        <Text slot="text">Option 1</Text>
+        <Text slot="label">Option 1</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
+        <Text slot="label">Option 2</Text>
       </SelectBox>
       <SelectBox value="option3">
-        <Text slot="text">Option 3</Text>
+        <Text slot="label">Option 3</Text>
       </SelectBox>
     </SelectBoxGroup>
   );
@@ -35,13 +35,13 @@ function MultiSelectBox() {
       onSelectionChange={setSelectedKeys}
       selectedKeys={selectedKeys}>
       <SelectBox value="option1">
-        <Text slot="text">Option 1</Text>
+        <Text slot="label">Option 1</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
+        <Text slot="label">Option 2</Text>
       </SelectBox>
       <SelectBox value="option3">
-        <Text slot="text">Option 3</Text>
+        <Text slot="label">Option 3</Text>
       </SelectBox>
     </SelectBoxGroup>
   );
@@ -56,10 +56,10 @@ function DisabledSelectBox() {
       selectedKeys={new Set()}
       isDisabled>
       <SelectBox value="option1">
-        <Text slot="text">Option 1</Text>
+        <Text slot="label">Option 1</Text>
       </SelectBox>
       <SelectBox value="option2">
-        <Text slot="text">Option 2</Text>
+        <Text slot="label">Option 2</Text>
       </SelectBox>
     </SelectBoxGroup>
   );
@@ -122,10 +122,10 @@ describe('SelectBoxGroup', () => {
           selectedKeys={new Set()}
           isDisabled>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -152,12 +152,12 @@ describe('SelectBoxGroup', () => {
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set(['option1'])}
-          isCheckboxSelection>
+          showCheckbox>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -176,9 +176,9 @@ describe('SelectBoxGroup', () => {
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          isCheckboxSelection>
+          showCheckbox>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -200,7 +200,7 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={() => {}} 
           selectedKeys={new Set(['option1'])}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -218,9 +218,9 @@ describe('SelectBoxGroup', () => {
           selectionMode="single" 
           onSelectionChange={() => {}} 
           defaultSelectedKeys={new Set(['option1'])}
-          isCheckboxSelection>
+          showCheckbox>
           <SelectBox value="option1" isDisabled>
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -238,9 +238,9 @@ describe('SelectBoxGroup', () => {
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          isCheckboxSelection>
+          showCheckbox>
           <SelectBox value="option1" isDisabled>
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -257,36 +257,61 @@ describe('SelectBoxGroup', () => {
   });
 
   describe('Props and configuration', () => {
-    it('supports different sizes', () => {
+    it('supports different orientations', () => {
       render(
         <SelectBoxGroup 
-          aria-label="Size test"
+          aria-label="Horizontal test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}>
+          selectedKeys={new Set()}
+          orientation="horizontal">
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
       expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
 
-    it('supports horizontal orientation', () => {
+    it('supports different gutter widths', () => {
       render(
         <SelectBoxGroup 
-          aria-label="Horizontal test"
+          aria-label="Gutter width test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}
-          orientation="horizontal">
+          gutterWidth="compact">
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
       expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
+
+    it('supports custom number of columns', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Columns test"
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}
+          numColumns={3}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+          <SelectBox value="option3">
+            <Text slot="label">Option 3</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toHaveStyle('grid-template-columns: repeat(3, 1fr)');
+    });
   });
 
   describe('Controlled behavior', () => {
@@ -298,10 +323,10 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={() => {}} 
           selectedKeys={new Set(['option1'])}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -321,13 +346,13 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={() => {}}
           selectedKeys={new Set(['option1', 'option2'])}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
           <SelectBox value="option3">
-            <Text slot="text">Option 3</Text>
+            <Text slot="label">Option 3</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -350,10 +375,10 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={onSelectionChange}
           selectedKeys={new Set()}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -375,10 +400,10 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={onSelectionChange}
           selectedKeys={new Set()}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -390,182 +415,62 @@ describe('SelectBoxGroup', () => {
       const receivedSelection = onSelectionChange.mock.calls[0][0];
       expect(Array.from(receivedSelection)).toEqual(['option1']);
     });
-  });
 
-  describe('Form integration', () => {
-    it('creates hidden inputs for form submission', () => {
-      const {container} = render(
-        <SelectBoxGroup
-          aria-label="Form integration test"
-          selectionMode="multiple"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1', 'option2'])}
-          name="test-field">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="test-field"]');
-      expect(hiddenInputs).toHaveLength(2);
-      expect(hiddenInputs[0]).toHaveValue('option1');
-      expect(hiddenInputs[1]).toHaveValue('option2');
-    });
-
-    it('creates single hidden input for single selection', () => {
-      const {container} = render(
-        <SelectBoxGroup
-          aria-label="Single form test"
-          selectionMode="single"
-          onSelectionChange={() => {}}
-          selectedKeys={new Set(['option1'])}
-          name="test-field">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const hiddenInput = container.querySelector('input[type="hidden"][name="test-field"]');
-      expect(hiddenInput).toBeInTheDocument();
-      expect(hiddenInput).toHaveValue('option1');
-    });
-
-    it('works with form submission using S2 Button', async () => {
-      const onSubmit = jest.fn();
-      render(
-        <form 
-          onSubmit={(e) => {
-            e.preventDefault();
-            const formData = new FormData(e.currentTarget);
-            const values = formData.getAll('preferences');
-            onSubmit(values);
-          }}>
-          <SelectBoxGroup
-            aria-label="Form submission test"
-            selectionMode="multiple"
-            onSelectionChange={() => {}}
-            selectedKeys={new Set(['option1', 'option3'])}
-            name="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();
+    it('handles controlled component updates', async () => {
+      function ControlledTest() {
+        const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
+        
+        return (
+          <div>
+            <button onClick={() => setSelectedKeys(new Set(['option2']))}>
+              Select Option 2
+            </button>
+            <SelectBoxGroup 
+              aria-label="Controlled test"
+              selectionMode="single" 
+              onSelectionChange={setSelectedKeys} 
+              selectedKeys={selectedKeys}>
+              <SelectBox value="option1">
+                <Text slot="label">Option 1</Text>
+              </SelectBox>
+              <SelectBox value="option2">
+                <Text slot="label">Option 2</Text>
+              </SelectBox>
+            </SelectBoxGroup>
+          </div>
+        );
+      }
 
-      await userEvent.click(submitButton);
+      render(<ControlledTest />);
       
-      expect(onSubmit).toHaveBeenCalledWith(['option1', 'option3']);
-    });
-
-    it('creates hidden inputs for form submission in single mode', () => {
-      render(
-        <SelectBoxGroup
-          aria-label="Single form submission test"
-          selectionMode="single"
-          selectedKeys={new Set(['option2'])}
-          name="test-field">
-          <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 hiddenInput = screen.getByDisplayValue('option2');
-      expect(hiddenInput).toBeInTheDocument();
-      expect(hiddenInput).toHaveAttribute('type', 'hidden');
-      expect(hiddenInput).toHaveAttribute('name', 'test-field');
-    });
-
-    it('creates multiple hidden inputs for form submission in multiple mode', () => {
-      render(
-        <SelectBoxGroup
-          aria-label="Multiple form submission test"
-          selectionMode="multiple"
-          selectedKeys={new Set(['option1', 'option3'])}
-          name="test-field">
-          <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 hiddenInputs = screen.getAllByDisplayValue(/option[13]/);
-      expect(hiddenInputs).toHaveLength(2);
-      expect(hiddenInputs[0]).toHaveAttribute('type', 'hidden');
-      expect(hiddenInputs[0]).toHaveAttribute('name', 'test-field');
-      expect(hiddenInputs[1]).toHaveAttribute('type', 'hidden');
-      expect(hiddenInputs[1]).toHaveAttribute('name', 'test-field');
-    });
-
-    it('creates empty hidden input when no options selected in multiple mode', () => {
-      render(
-        <SelectBoxGroup
-          aria-label="Empty selection test"
-          selectionMode="multiple"
-          selectedKeys={new Set()}
-          name="test-field">
-          <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
-          </SelectBox>
-          <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
-          </SelectBox>
-        </SelectBoxGroup>
-      );
-
-      const hiddenInput = screen.getByDisplayValue('');
-      expect(hiddenInput).toBeInTheDocument();
-      expect(hiddenInput).toHaveAttribute('type', 'hidden');
-      expect(hiddenInput).toHaveAttribute('name', 'test-field');
+      const button = screen.getByRole('button', {name: 'Select Option 2'});
+      await userEvent.click(button);
+      
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option2).toHaveAttribute('aria-selected', 'true');
     });
 
-    it('does not create hidden inputs when name prop is not provided', () => {
+    it('handles "all" selection', () => {
       render(
-        <SelectBoxGroup
-          aria-label="No name prop test"
-          selectionMode="single"
-          selectedKeys={new Set(['option1'])}>
+        <SelectBoxGroup 
+          aria-label="All selection test"
+          selectionMode="multiple" 
+          onSelectionChange={() => {}} 
+          selectedKeys="all">
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
-
-      const hiddenInputs = document.querySelectorAll('input[type="hidden"]');
-      expect(hiddenInputs).toHaveLength(0);
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      
+      expect(option1).toHaveAttribute('aria-selected', 'true');
+      expect(option2).toHaveAttribute('aria-selected', 'true');
     });
   });
 
@@ -578,16 +483,19 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={() => {}}
           selectedKeys={new Set()}>
           <SelectBox value="option1" isDisabled>
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
 
       const rows = screen.getAllByRole('option');
       expect(rows.length).toBe(2);
+      
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      expect(option1).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('prevents interaction with disabled items', async () => {
@@ -599,7 +507,7 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={onSelectionChange}
           selectedKeys={new Set()}>
           <SelectBox value="option1" isDisabled>
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -612,7 +520,7 @@ describe('SelectBoxGroup', () => {
   });
 
   describe('Grid navigation', () => {
-    it('supports keyboard navigation', async () => {
+    it('supports keyboard navigation and grid layout', async () => {
       render(
         <SelectBoxGroup
           aria-label="Grid navigation test"
@@ -621,16 +529,16 @@ describe('SelectBoxGroup', () => {
           selectedKeys={new Set()}
           numColumns={2}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
           <SelectBox value="option3">
-            <Text slot="text">Option 3</Text>
+            <Text slot="label">Option 3</Text>
           </SelectBox>
           <SelectBox value="option4">
-            <Text slot="text">Option 4</Text>
+            <Text slot="label">Option 4</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -658,7 +566,7 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={onSelectionChange}
           selectedKeys={new Set()}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -675,21 +583,52 @@ describe('SelectBoxGroup', () => {
       const receivedSelection = onSelectionChange.mock.calls[0][0];
       expect(Array.from(receivedSelection)).toEqual(['option1']);
     });
+
+    it('supports arrow key navigation', async () => {
+      render(
+        <SelectBoxGroup
+          aria-label="Arrow key test"
+          selectionMode="single"
+          onSelectionChange={() => {}}
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+
+      const listbox = screen.getByRole('listbox');
+      await act(async () => {
+        listbox.focus();
+      });
+      
+      // Navigate to second option
+      await userEvent.keyboard('{ArrowDown}');
+      
+      // Check that navigation works by verifying an option has focus
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      expect(option1).toHaveFocus();
+    });
   });
 
   describe('Children validation', () => {
+    let consoleSpy: jest.SpyInstance;
+
     beforeEach(() => {
-      jest.spyOn(console, 'error').mockImplementation(() => {});
+      consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     });
 
     afterEach(() => {
-      (console.error as jest.Mock).mockRestore();
+      consoleSpy.mockRestore();
     });
 
     it('validates maximum children', () => {
       const manyChildren = Array.from({length: 10}, (_, i) => (
         <SelectBox key={i} value={`option${i}`}>
-          <Text slot="text">Option {i}</Text>
+          <Text slot="label">Option {i}</Text>
         </SelectBox>
       ));
       
@@ -703,10 +642,29 @@ describe('SelectBoxGroup', () => {
         </SelectBoxGroup>
       );
       
-      expect(console.error).toHaveBeenCalledWith(
+      expect(console.warn).toHaveBeenCalledWith(
         'Invalid content. SelectBoxGroup cannot have more than 9 children.'
       );
     });
+
+    it('does not warn with valid number of children', () => {
+      render(
+        <SelectBoxGroup 
+          aria-label="Valid children test" 
+          selectionMode="single" 
+          onSelectionChange={() => {}} 
+          selectedKeys={new Set()}>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+      );
+      
+      expect(console.warn).not.toHaveBeenCalled();
+    });
   });
 
   describe('Accessibility', () => {
@@ -718,10 +676,10 @@ describe('SelectBoxGroup', () => {
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -729,6 +687,28 @@ describe('SelectBoxGroup', () => {
       expect(screen.getByRole('listbox')).toBeInTheDocument();
       expect(screen.getAllByRole('option')).toHaveLength(2);
     });
+
+    it('supports aria-label and aria-labelledby', () => {
+      render(
+        <div>
+          <h2 id="test-label">My SelectBoxGroup</h2>
+          <SelectBoxGroup 
+            aria-labelledby="test-label"
+            selectionMode="single" 
+            onSelectionChange={() => {}} 
+            selectedKeys={new Set()}>
+            <SelectBox value="option1">
+              <Text slot="label">Option 1</Text>
+            </SelectBox>
+          </SelectBoxGroup>
+        </div>
+      );
+      
+      const listbox = screen.getByRole('listbox');
+      // Just verify the listbox has an aria-labelledby attribute  
+      expect(listbox).toHaveAttribute('aria-labelledby');
+      expect(listbox.getAttribute('aria-labelledby')).toBeTruthy();
+    });
   });
 
   describe('Edge cases', () => {
@@ -742,7 +722,7 @@ describe('SelectBoxGroup', () => {
           orientation="horizontal">
           <SelectBox value="option1">
             <Calendar slot="illustration" />
-            <Text slot="text">Complex Option</Text>
+            <Text slot="label">Complex Option</Text>
             <Text slot="description">With description</Text>
           </SelectBox>
         </SelectBoxGroup>
@@ -752,51 +732,62 @@ describe('SelectBoxGroup', () => {
       expect(screen.getByText('With description')).toBeInTheDocument();
     });
 
-    it('handles empty string values', () => {
+    it('handles different value types', () => {
       render(
         <SelectBoxGroup 
-          aria-label="Empty value test"
+          aria-label="Value types test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
           selectedKeys={new Set()}>
-          <SelectBox value="">
-            <Text slot="text">Empty Value</Text>
+          <SelectBox value="option1">
+            <Text slot="label">Option 1</Text>
+          </SelectBox>
+          <SelectBox value="option2">
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
       
-      const row = screen.getByRole('option', {name: 'Empty Value'});
-      expect(row).toBeInTheDocument();
+      const option1 = screen.getByRole('option', {name: 'Option 1'});
+      const option2 = screen.getByRole('option', {name: 'Option 2'});
+      expect(option1).toBeInTheDocument();
+      expect(option2).toBeInTheDocument();
     });
 
-    it('handles different gutter widths', () => {
+    it('handles empty children gracefully', () => {
       render(
         <SelectBoxGroup 
-          aria-label="Gutter width test"
+          aria-label="Empty children test"
           selectionMode="single" 
           onSelectionChange={() => {}} 
-          selectedKeys={new Set()}
-          gutterWidth="compact">
+          selectedKeys={new Set()}>
+          {null}
+          {undefined}
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Valid Option</Text>
           </SelectBox>
+          {false}
         </SelectBoxGroup>
       );
+      
       expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(1);
+      expect(screen.getByText('Valid Option')).toBeInTheDocument();
     });
 
-    it('handles "all" selection', () => {
+    it('handles uncontrolled selection with defaultSelectedKeys', async () => {
+      const onSelectionChange = jest.fn();
       render(
         <SelectBoxGroup 
-          aria-label="All selection test"
-          selectionMode="multiple" 
-          onSelectionChange={() => {}} 
-          selectedKeys="all">
+          aria-label="Uncontrolled test"
+          selectionMode="single" 
+          onSelectionChange={onSelectionChange}
+          defaultSelectedKeys={new Set(['option1'])}>
           <SelectBox value="option1">
-            <Text slot="text">Option 1</Text>
+            <Text slot="label">Option 1</Text>
           </SelectBox>
           <SelectBox value="option2">
-            <Text slot="text">Option 2</Text>
+            <Text slot="label">Option 2</Text>
           </SelectBox>
         </SelectBoxGroup>
       );
@@ -805,41 +796,12 @@ describe('SelectBoxGroup', () => {
       const option2 = screen.getByRole('option', {name: 'Option 2'});
       
       expect(option1).toHaveAttribute('aria-selected', 'true');
-      expect(option2).toHaveAttribute('aria-selected', 'true');
-    });
-
-    it('handles controlled component updates', async () => {
-      function ControlledTest() {
-        const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set());
-        
-        return (
-          <div>
-            <button onClick={() => setSelectedKeys(new Set(['option2']))}>
-              Select Option 2
-            </button>
-            <SelectBoxGroup 
-              aria-label="Controlled test"
-              selectionMode="single" 
-              onSelectionChange={setSelectedKeys} 
-              selectedKeys={selectedKeys}>
-              <SelectBox value="option1">
-                <Text slot="text">Option 1</Text>
-              </SelectBox>
-              <SelectBox value="option2">
-                <Text slot="text">Option 2</Text>
-              </SelectBox>
-            </SelectBoxGroup>
-          </div>
-        );
-      }
-
-      render(<ControlledTest />);
-      
-      const button = screen.getByRole('button', {name: 'Select Option 2'});
-      await userEvent.click(button);
+      expect(option2).toHaveAttribute('aria-selected', 'false');
       
-      const option2 = screen.getByRole('option', {name: 'Option 2'});
-      expect(option2).toHaveAttribute('aria-selected', 'true');
+      await userEvent.click(option2);
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      const receivedSelection = onSelectionChange.mock.calls[0][0];
+      expect(Array.from(receivedSelection)).toEqual(['option2']);
     });
   });
 });

From 267cf7bf3c01e6e014d3b3e752631aead1a5acdc Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 12 Aug 2025 09:59:39 -0700
Subject: [PATCH 22/24] s2(SelectBoxGroup): center label in horizontal layout
 when only label is present

---
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 35 ++++++-----
 .../s2/stories/SelectBoxGroup.stories.tsx     | 62 -------------------
 2 files changed, 20 insertions(+), 77 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 517f40e814f..7b5e3d40167 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -9,7 +9,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, DOMRefValue, Orientation, Selection} from '@react-types/shared';
+import {DOMRef, DOMRefValue, Orientation, Selection, GlobalDOMAttributes} from '@react-types/shared';
 import {box, iconStyles} from './Checkbox';
 import Checkmark from '../ui-icons/Checkmark';
 import {
@@ -27,7 +27,7 @@ import {TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, 'layout' | 'dragAndDropHooks'>, AriaLabelingProps{
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'renderEmptyState' | 'dependencies' | 'items' | 'children' | 'selectionMode'>{
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
@@ -95,6 +95,7 @@ export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBo
 
 const descriptionOnly = ':has([slot=description]):not(:has([slot=label]))';
 const labelOnly = ':has([slot=label]):not(:has([slot=description]))';
+const noIllustration = ':not(:has([slot=illustration]))';
 const selectBoxStyles = style({
   ...focusRing(),
   outlineOffset: {
@@ -182,7 +183,10 @@ const selectBoxStyles = style({
   gridTemplateRows: {
     orientation: {
       vertical: ['min-content', 8, 'min-content'],
-      horizontal: ['min-content', 'min-content']
+      horizontal: {
+        default: ['min-content', 'min-content'],
+        [noIllustration]: ['min-content'],
+      }
     }
   },
   gridTemplateColumns: {
@@ -266,6 +270,11 @@ const labelText = style({
     default: 'center',
     orientation: {
       horizontal: 'start'
+    },
+    [labelOnly]: {
+      orientation: {
+        horizontal: 'center'
+      }
     }
   },
   width: '100%',
@@ -275,6 +284,11 @@ const labelText = style({
     default: 'center',
     orientation: {
       horizontal: 'start'
+    },
+    [labelOnly]: {
+      orientation: {
+        horizontal: 'center'
+      }
     }
   },
   whiteSpace: 'nowrap',
@@ -292,6 +306,7 @@ const labelText = style({
 
 const gridStyles = style({
   display: 'grid',
+  outline: 'none',
   gridAutoRows: '1fr',
   gap: {
     gutterWidth: {
@@ -325,10 +340,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       className={renderProps => (props.UNSAFE_className || '') + selectBoxStyles({
         size, 
         orientation, 
-        isDisabled: renderProps.isDisabled,
-        isSelected: renderProps.isSelected,
-        isHovered: renderProps.isHovered,
-        isFocusVisible: renderProps.isFocusVisible
+        ...renderProps
       }, props.styles)}
       style={UNSAFE_style}>
       {(renderProps) => (
@@ -407,13 +419,6 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     onSelectionChange
   );
 
-  const childrenArray = React.Children.toArray(children).filter((x) => x);
-  useEffect(() => {
-    if (childrenArray.length > 9) {
-      console.warn('Invalid content. SelectBoxGroup cannot have more than 9 children.');
-    }
-  }, [childrenArray.length]);
-
   const selectBoxContextValue = useMemo(
     () => {
       const contextValue = {
@@ -436,7 +441,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
       selectionMode={selectionMode}
       selectedKeys={selectedKeys}
       onSelectionChange={setSelectedKeys}
-      className={UNSAFE_className + gridStyles({gutterWidth, orientation}, props.styles)}
+      className={(UNSAFE_className || '') + gridStyles({gutterWidth, orientation}, props.styles)}
       aria-label="SelectBoxGroup"
       aria-labelledby="SelectBoxGroup"
       style={{
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index e7575ab6a30..b88314656ab 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -554,68 +554,6 @@ export const AllSlotCombinations: Story = {
   )
 };
 
-export const WithCheckboxes: Story = {
-  args: {
-    defaultSelectedKeys: new Set(['aws', 'gcp'])
-  },
-  render: (args) => (
-    <div style={{maxWidth: 600}}>
-      <h3 className={subheadingStyles}>Checkboxes Enabled</h3>
-      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="aws">
-          <Server />
-          <Text slot="label">Amazon Web Services</Text>
-          <Text slot="description">Reliable cloud infrastructure</Text>
-        </SelectBox>
-        <SelectBox value="azure">
-          <AlertNotice />
-          <Text slot="label">Microsoft Azure</Text>
-          <Text slot="description">Enterprise cloud solutions</Text>
-        </SelectBox>
-        <SelectBox value="gcp">
-          <PaperAirplane />
-          <Text slot="label">Google Cloud Platform</Text>
-          <Text slot="description">Modern cloud services</Text>
-        </SelectBox>
-        <SelectBox value="oracle">
-          <Server />
-          <Text slot="label">Oracle Cloud</Text>
-          <Text slot="description">Database-focused cloud</Text>
-        </SelectBox>
-        <SelectBox value="longtext">
-          <StarFilled1 />
-          <Text slot="label">This is an extremely long service name that should definitely overflow and show ellipsis behavior</Text>
-          <Text slot="description">This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
-        </SelectBox>
-        <SelectBox value="anotherlongone">
-          <StarFilled2 />
-          <Text slot="label">Another extremely long text. This is a very long text that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
-          <Text slot="description">Another extremely long description text that will help us verify how the SelectBox handles text overflow in different scenarios and orientations, ensuring that the text behavior is consistent and user-friendly across all use cases.</Text>
-        </SelectBox>
-        <SelectBox value="shortname">
-          <PaperAirplane />
-          <Text slot="label">Short</Text>
-          <Text slot="description">This description is intentionally very long to create a mixed layout where some boxes have short labels but long descriptions, which will help test how the grid layout handles boxes of different content lengths and whether they maintain consistent heights as expected. This is a very long description that should test the text wrapping and overflow behavior in horizontal orientation. It should wrap naturally until it hits the container boundaries and then show appropriate overflow handling.</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-      
-      <h3 style={{marginTop: 32}} className={subheadingStyles}>Checkboxes Disabled (Default)</h3>
-      <SelectBoxGroup defaultSelectedKeys={new Set(['aws'])} onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="aws">
-          <Server />
-          <Text slot="label">Amazon Web Services</Text>
-          <Text slot="description">No checkbox visible</Text>
-        </SelectBox>
-        <SelectBox value="azure">
-          <AlertNotice />
-          <Text slot="label">Microsoft Azure</Text>
-          <Text slot="description">No checkbox on hover</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-    </div>
-  )
-};
-
 export const TextSlots: Story = {
   args: {
     orientation: 'horizontal'

From 4a6f6813dde2533ff1b73e88ace615cbd6f52aa1 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 12 Aug 2025 11:02:28 -0700
Subject: [PATCH 23/24] s2(SelectBoxGroup): support [DEFAULT_SLOT] as label
 styles for text-only children

---
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 20 +++++--------------
 .../s2/stories/SelectBoxGroup.stories.tsx     |  2 +-
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 7b5e3d40167..3b4d8780585 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -17,7 +17,8 @@ import {
   ListBox,
   ListBoxItem,
   ListBoxProps,
-  Provider
+  Provider,
+  DEFAULT_SLOT
 } from 'react-aria-components';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -93,7 +94,6 @@ interface SelectBoxContextValue {
 export const SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});
 export const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
-const descriptionOnly = ':has([slot=description]):not(:has([slot=label]))';
 const labelOnly = ':has([slot=label]):not(:has([slot=description]))';
 const noIllustration = ':not(:has([slot=illustration]))';
 const selectBoxStyles = style({
@@ -171,9 +171,6 @@ const selectBoxStyles = style({
           'illustration . label',
           'illustration . description'
         ],
-        [descriptionOnly]: [
-          'illustration . description'
-        ],
         [labelOnly]: [
           'illustration . label'
         ]
@@ -270,11 +267,6 @@ const labelText = style({
     default: 'center',
     orientation: {
       horizontal: 'start'
-    },
-    [labelOnly]: {
-      orientation: {
-        horizontal: 'center'
-      }
     }
   },
   width: '100%',
@@ -284,11 +276,6 @@ const labelText = style({
     default: 'center',
     orientation: {
       horizontal: 'start'
-    },
-    [labelOnly]: {
-      orientation: {
-        horizontal: 'center'
-      }
     }
   },
   whiteSpace: 'nowrap',
@@ -375,6 +362,9 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
               }],
               [TextContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {
+                    styles: labelText({orientation, isDisabled: renderProps.isDisabled})
+                  },
                   label: {
                     styles: labelText({orientation, isDisabled: renderProps.isDisabled})
                   },
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index b88314656ab..9ba6bf88719 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -406,7 +406,7 @@ export const AllSlotCombinations: Story = {
           
           {/* Text Only */}
           <div>
-            <h4 className={sectionHeadingStyles}>Text Only (Optimized)</h4>
+            <h4 className={sectionHeadingStyles}>Text Only</h4>
             <SelectBoxGroup 
               orientation="horizontal" 
               numColumns={1}

From c5420323b55d0ce77270eb6d26e4e1af30f1df30 Mon Sep 17 00:00:00 2001
From: DPandyan <daniel_pandyan@hotmail.com>
Date: Tue, 12 Aug 2025 13:15:35 -0700
Subject: [PATCH 24/24] removed extra story and count check

---
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 10 ++++-----
 .../s2/stories/SelectBoxGroup.stories.tsx     | 14 ------------
 .../s2/test/SelectBoxGroup.test.tsx           | 22 -------------------
 3 files changed, 5 insertions(+), 41 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 3b4d8780585..d545624255b 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -9,21 +9,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue, Orientation, Selection, GlobalDOMAttributes} from '@react-types/shared';
 import {box, iconStyles} from './Checkbox';
 import Checkmark from '../ui-icons/Checkmark';
 import {
   ContextValue,
+  DEFAULT_SLOT,
   ListBox,
   ListBoxItem,
   ListBoxProps,
-  Provider,
-  DEFAULT_SLOT
+  Provider
 } from 'react-aria-components';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, Orientation, Selection} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from '../src/Icon';
-import React, {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
 import {TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -182,7 +182,7 @@ const selectBoxStyles = style({
       vertical: ['min-content', 8, 'min-content'],
       horizontal: {
         default: ['min-content', 'min-content'],
-        [noIllustration]: ['min-content'],
+        [noIllustration]: ['min-content']
       }
     }
   },
diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
index 9ba6bf88719..8babd315516 100644
--- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx
@@ -445,20 +445,6 @@ export const AllSlotCombinations: Story = {
             </SelectBoxGroup>
           </div>
 
-          {/* Illustration + Description */}
-          <div>
-            <h4 className={sectionHeadingStyles}>Illustration + Description</h4>
-            <SelectBoxGroup 
-              orientation="horizontal" 
-              numColumns={1}
-              onSelectionChange={action('onSelectionChange')}>
-              <SelectBox value="h-illustration-desc">
-                <PaperAirplane />
-                <Text slot="description">Only horizontal description text</Text>
-              </SelectBox>
-            </SelectBoxGroup>
-          </div>
-
           {/* Illustration + Text + Description */}
           <div>
             <h4 className={sectionHeadingStyles}>Illustration + Text + Description</h4>
diff --git a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
index 947810ee18b..8100384d039 100644
--- a/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
+++ b/packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx
@@ -625,28 +625,6 @@ describe('SelectBoxGroup', () => {
       consoleSpy.mockRestore();
     });
 
-    it('validates maximum children', () => {
-      const manyChildren = Array.from({length: 10}, (_, i) => (
-        <SelectBox key={i} value={`option${i}`}>
-          <Text slot="label">Option {i}</Text>
-        </SelectBox>
-      ));
-      
-      render(
-        <SelectBoxGroup 
-          aria-label="Max children test" 
-          selectionMode="single" 
-          onSelectionChange={() => {}} 
-          selectedKeys={new Set()}>
-          {manyChildren}
-        </SelectBoxGroup>
-      );
-      
-      expect(console.warn).toHaveBeenCalledWith(
-        'Invalid content. SelectBoxGroup cannot have more than 9 children.'
-      );
-    });
-
     it('does not warn with valid number of children', () => {
       render(
         <SelectBoxGroup