diff --git a/.circleci/config.yml b/.circleci/config.yml
index d2cdca6d379..48d45555b3d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -20,14 +20,14 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:24.13.0
+      - image: cimg/node:24.14.1
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:24.13.0
+      - image: cimg/node:24.14.1
     resource_class: large
     environment:
       CACHE_VERSION: v1
@@ -35,7 +35,7 @@ executors:
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:24.13.0
+      - image: cimg/node:24.14.1
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
@@ -43,7 +43,7 @@ executors:
 
   rsp-2xlarge:
     docker:
-      - image: cimg/node:24.13.0
+      - image: cimg/node:24.14.1
     resource_class: 2xlarge
     environment:
       CACHE_VERSION: v1
@@ -63,10 +63,17 @@ commands:
       - run:
           name: Check AWS credentials
           command: |
-            if [ -z "$AWS_ACCESS_KEY_ID" ] || [ -z "$AWS_SECRET_ACCESS_KEY" ]; then
+            if [ -z "$AWS_ROLE_ARN" ]; then
               echo "AWS credentials not found"
               circleci-agent step halt
             fi
+      - aws-cli/setup:
+          role_arn: $AWS_ROLE_ARN
+          region: $AWS_DEFAULT_REGION
+          role_session_name: "CircleCI-Deploy-Session"
+      - run:
+          name: Verify AWS CLI setup
+          command: aws sts get-caller-identity
       - run:
           name: Configure AWS CLI for concurrent requests
           command: aws configure set default.s3.max_concurrent_requests 100
@@ -933,20 +940,26 @@ workflows:
             - install
           filters:
             branches:
-              ignore: main
+              ignore: 
+                - /main$/
+                - /gh-readonly-queue\/.*$/
       - ts-build-branch:
           requires:
             - install
           filters:
             branches:
-              ignore: main
+              ignore: 
+                - /main$/
+                - /gh-readonly-queue\/.*$/
       - ts-diff:
           requires:
             - ts-build-fork-point
             - ts-build-branch
           filters:
             branches:
-              ignore: main
+              ignore: 
+                - /main$/
+                - /gh-readonly-queue\/.*$/
       - typecheck-docs:
           requires:
             - install
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4bada46eab9..962c7e04584 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -58,7 +58,8 @@ If you are looking for place to start, consider the following options:
 
 ## Developing
 When you are ready to start developing you can clone the repo and start storybook.
-Make sure you have the following requirements installed: [node](https://nodejs.org/) (v24.13.0+) and [yarn](https://yarnpkg.com/en/) (v1.22.0+)
+
+Make sure you have the following requirements installed: [node](https://nodejs.org/) (v24.14.1+) and [yarn](https://yarnpkg.com/en/) (v1.22.0+)
 
 Fork the repo first using [this guide](https://help.github.com/articles/fork-a-repo), then clone it locally.
 ```
@@ -74,7 +75,7 @@ yarn start
 
 Or run the documentation and browse to [http://localhost:1234/](http://localhost:1234/) with:
 ```bash
-yarn start:docs
+yarn start:s2-docs
 ```
 
 ### Tests
@@ -90,13 +91,13 @@ We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](htt
 You can run the tests with:
 
 ```bash
-yarn jest
+yarn test
 ```
 
 You can also get a code coverage report by running:
 
 ```bash
-yarn jest --coverage
+yarn test --coverage
 ```
 
 ### Linting
@@ -118,12 +119,18 @@ yarn start
 ```
 Then, open [http://localhost:9003](http://localhost:9003) in your browser to play around with the components and test your changes.
 
+For S2 Storybook, run:
+```bash
+yarn start:s2
+```
+Then, open [http://localhost:6006](http://localhost:6006).
+
 ### Documentation
 Our documentation should always remain up to date. When making changes to components, make sure the appropriate documentation has been updated to reflect those changes. Documentation for each component can be found in the docs folder within a component's package. Other documentation pages can be found in the [packages/dev/docs](https://github.com/adobe/react-spectrum/tree/main/packages/dev/docs) folder in the codebase.
 
 Documentation can be run locally by using
 ```bash
-yarn start:docs
+yarn start:s2-docs
 ```
 Then, open [http://localhost:1234](http://localhost:1234) in your browser.
 
diff --git a/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx b/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
index 65d0d4e82fc..34c2a3bab66 100644
--- a/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
+++ b/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
@@ -68,7 +68,7 @@ export const Checkbox = forwardRef(function Checkbox(props: SpectrumCheckboxProp
   // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
   // but since the checkbox won't move in and out of a group, it should be safe.
   let groupState = useContext(CheckboxGroupContext);
-  let {inputProps, isInvalid, isDisabled} = groupState
+  let {labelProps, inputProps, isInvalid, isDisabled} = groupState
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ? useCheckboxGroupItem({
       ...props,
@@ -104,6 +104,7 @@ export const Checkbox = forwardRef(function Checkbox(props: SpectrumCheckboxProp
 
   return (
     <label
+      {...labelProps}
       {...styleProps}
       {...hoverProps}
       ref={domRef}
diff --git a/packages/@adobe/react-spectrum/src/radio/Radio.tsx b/packages/@adobe/react-spectrum/src/radio/Radio.tsx
index ee633fa1fa1..aab332d53a9 100644
--- a/packages/@adobe/react-spectrum/src/radio/Radio.tsx
+++ b/packages/@adobe/react-spectrum/src/radio/Radio.tsx
@@ -47,7 +47,7 @@ export const Radio = forwardRef(function Radio(props: SpectrumRadioProps, ref: F
     state
   } = radioGroupProps;
 
-  let {inputProps} = useRadio({
+  let {labelProps, inputProps} = useRadio({
     ...props,
     ...radioGroupProps,
     isDisabled
@@ -55,6 +55,7 @@ export const Radio = forwardRef(function Radio(props: SpectrumRadioProps, ref: F
 
   return (
     <label
+      {...labelProps}
       {...styleProps}
       {...hoverProps}
       ref={domRef}
diff --git a/packages/@adobe/react-spectrum/src/switch/Switch.tsx b/packages/@adobe/react-spectrum/src/switch/Switch.tsx
index f770ddc23ac..eb83ba5c820 100644
--- a/packages/@adobe/react-spectrum/src/switch/Switch.tsx
+++ b/packages/@adobe/react-spectrum/src/switch/Switch.tsx
@@ -49,11 +49,12 @@ export const Switch = forwardRef(function Switch(props: SpectrumSwitchProps, ref
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useFocusableRef(ref, inputRef);
   let state = useToggleState(props);
-  let {inputProps} = useSwitch(props, state, inputRef);
+  let {labelProps, inputProps} = useSwitch(props, state, inputRef);
 
 
   return (
     <label
+      {...labelProps}
       {...styleProps}
       {...hoverProps}
       ref={domRef}
diff --git a/packages/@adobe/react-spectrum/test/datepicker/DatePicker.test.js b/packages/@adobe/react-spectrum/test/datepicker/DatePicker.test.js
index bfb348ecb03..f2c23dbb842 100644
--- a/packages/@adobe/react-spectrum/test/datepicker/DatePicker.test.js
+++ b/packages/@adobe/react-spectrum/test/datepicker/DatePicker.test.js
@@ -1621,8 +1621,8 @@ describe('DatePicker', function () {
         testInput('era,', new CalendarDate(new JapaneseCalendar(), 'reiwa', 5, 2, 3), 'h', new CalendarDate(new JapaneseCalendar(), 'heisei', 5, 2, 3), false, {locale: 'en-US-u-ca-japanese'});
         testInput('era,', new CalendarDate(new JapaneseCalendar(), 'reiwa', 5, 2, 3), 's', new CalendarDate(new JapaneseCalendar(), 'showa', 5, 2, 3), false, {locale: 'en-US-u-ca-japanese'});
         testInput('era,', new CalendarDate(new JapaneseCalendar(), 'showa', 5, 2, 3), 'r', new CalendarDate(new JapaneseCalendar(), 'reiwa', 5, 2, 3), false, {locale: 'en-US-u-ca-japanese'});
-        testInput('era,', new CalendarDate(new EthiopicCalendar(), 'AM', 2012, 2, 3), '0', new CalendarDate(new EthiopicCalendar(), 'AA', 2012, 2, 3), false, {locale: 'en-US-u-ca-ethiopic'});
-        testInput('era,', new CalendarDate(new EthiopicCalendar(), 'AA', 2012, 2, 3), '1', new CalendarDate(new EthiopicCalendar(), 'AM', 2012, 2, 3), false, {locale: 'en-US-u-ca-ethiopic'});
+        testInput('era,', new CalendarDate(new EthiopicCalendar(), 'AM', 2012, 2, 3), 'A', new CalendarDate(new EthiopicCalendar(), 'AA', 2012, 2, 3), false, {locale: 'en-US-u-ca-ethiopic'});
+        testInput('era,', new CalendarDate(new EthiopicCalendar(), 'AA', 2012, 2, 3), 'M', new CalendarDate(new EthiopicCalendar(), 'AM', 2012, 2, 3), false, {locale: 'en-US-u-ca-ethiopic'});
       });
 
       it('should allow entering invalid dates, and constrain on blur', async function () {
diff --git a/packages/@internationalized/number/src/NumberParser.ts b/packages/@internationalized/number/src/NumberParser.ts
index 6311f920787..7c93c4f9dd8 100644
--- a/packages/@internationalized/number/src/NumberParser.ts
+++ b/packages/@internationalized/number/src/NumberParser.ts
@@ -232,6 +232,11 @@ class NumberParserImpl {
       value = replaceAll(value, "'", this.symbols.group);
     }
 
+    // On newer ICU versions, the special single quote has been normalized, so we need to backport.
+    if (this.symbols.group === "'" && value.includes('’') && isGroupSymbolAllowed) {
+      value = replaceAll(value, '’', this.symbols.group);
+    }
+
     // fr-FR group character is narrow non-breaking space, char code 8239 (U+202F), but that's not a key on the french keyboard,
     // so allow space and non-breaking space as a group char as well
     if (this.options.locale === 'fr-FR' && this.symbols.group && isGroupSymbolAllowed) {
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 543b9379e82..0922dcc028e 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -10,21 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
+import {CenterBaseline} from './CenterBaseline';
 import {
-  Checkbox as AriaCheckbox,
-  CheckboxProps as AriaCheckboxProps,
+  CheckboxButton,
+  CheckboxField,
+  CheckboxFieldProps,
   CheckboxRenderProps
 } from 'react-aria-components/Checkbox';
-import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
-import {CenterBaseline} from './CenterBaseline';
 import {CheckboxGroupStateContext} from 'react-aria-components/CheckboxGroup';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import {ContextValue, useSlottedContext} from 'react-aria-components/slots';
 import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
-import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
+import {HelpText} from './Field';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -42,20 +44,50 @@ interface CheckboxStyleProps {
 
 interface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}
 
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, CheckboxStyleProps {
+export interface CheckboxProps extends Omit<CheckboxFieldProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, HelpTextProps, StyleProps, CheckboxStyleProps {
   /** The label for the element. */
   children?: ReactNode
 }
 
-export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLInputElement, HTMLDivElement>>>(null);
+
+const field = style({
+  display: 'grid',
+  gridTemplateColumns: ['max-content', '1fr'],
+  columnGap: 'text-to-control',
+  alignContent: 'start',
+  width: {
+    default: 'fit',
+    isInCheckboxGroup: 'auto'
+  },
+  font: controlFont(),
+  '--field-height': {
+    type: 'height',
+    value: controlSize()
+  },
+  rowGap: {
+    default: 'calc(var(--field-height) - 1lh)',
+    isInCheckboxGroup: {
+      size: {
+        S: space(1),
+        M: space(1), 
+        L: 2,
+        XL: 2
+      }
+    }
+  },
+  gridColumnStart: {
+    isInForm: 'field'
+  }
+}, getAllowedOverrides());
 
 const wrapper = style({
-  display: 'flex',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
   position: 'relative',
-  columnGap: 'text-to-control',
   alignItems: 'baseline',
-  width: 'fit',
-  font: controlFont(),
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
@@ -64,11 +96,8 @@ const wrapper = style({
       forcedColors: 'GrayText'
     }
   },
-  gridColumnStart: {
-    isInForm: 'field'
-  },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 export const box = style<RenderProps>({
   ...focusRing(),
@@ -126,7 +155,7 @@ export const iconStyles = style({
   }
 });
 
-const iconSize = {
+const smallerSize = {
   S: 'XS',
   M: 'S',
   L: 'M',
@@ -137,7 +166,7 @@ const iconSize = {
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLInputElement, HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -148,47 +177,66 @@ export const Checkbox = forwardRef(function Checkbox({children, ...props}: Check
   let ctx = useSlottedContext(CheckboxContext, props.slot);
 
   return (
-    <AriaCheckbox
+    <CheckboxField
       {...props}
       ref={domRef}
       inputRef={inputRef}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
-      {renderProps => {
-        let checkbox = (
-          <div
-            ref={boxRef}
-            style={pressScale(boxRef)(renderProps)}
-            className={box({
-              ...renderProps,
-              isSelected: renderProps.isSelected || renderProps.isIndeterminate,
-              size: props.size || 'M',
-              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
-            })}>
-            {renderProps.isIndeterminate &&
-              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-            }
-            {renderProps.isSelected && !renderProps.isIndeterminate &&
-              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-            }
-          </div>
-        );
+      className={(props.UNSAFE_className || '') + field({size: props.size || 'M', isInCheckboxGroup}, props.styles)}>
+      {({isDisabled, isInvalid}) => (<>
+        <CheckboxButton className={renderProps => wrapper({...renderProps, isInForm, size: props.size || 'M'})}>
+          {renderProps => {
+            let checkbox = (
+              <div
+                ref={boxRef}
+                style={pressScale(boxRef)(renderProps)}
+                className={box({
+                  ...renderProps,
+                  isSelected: renderProps.isSelected || renderProps.isIndeterminate,
+                  size: props.size || 'M',
+                  isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
+                })}>
+                {renderProps.isIndeterminate &&
+                  <DashIcon size={smallerSize[props.size || 'M']} className={iconStyles} />
+                }
+                {renderProps.isSelected && !renderProps.isIndeterminate &&
+                  <CheckmarkIcon size={smallerSize[props.size || 'M']} className={iconStyles} />
+                }
+              </div>
+            );
 
-        // Only render checkbox without center baseline if no label.
-        // This avoids expanding the checkbox height to the font's line height.
-        if (!children) {
-          return checkbox;
-        }
+            // Only render checkbox without center baseline if no label.
+            // This avoids expanding the checkbox height to the font's line height.
+            if (!children) {
+              return checkbox;
+            }
 
-        return (
-          <>
-            <CenterBaseline>
-              {checkbox}
-            </CenterBaseline>
-            {children}
-          </>
-        );
-      }}
-    </AriaCheckbox>
+            return (
+              <>
+                <CenterBaseline>
+                  {checkbox}
+                </CenterBaseline>
+                <span className={style({gridColumnStart: 2})}>{children}</span>
+              </>
+            );
+          }}
+        </CheckboxButton>
+        <HelpText
+          size={isInCheckboxGroup ? smallerSize[props.size || 'M'] : props.size || 'M'}
+          styles={style({
+            gridColumnStart: {
+              default: 1,
+              isInCheckboxGroup: 2
+            },
+            paddingTop: 0
+          })({isInCheckboxGroup})}
+          isDisabled={isDisabled}
+          isInvalid={isInCheckboxGroup ? false : isInvalid}
+          description={props.description}
+          showErrorIcon>
+          {props.errorMessage}
+        </HelpText>
+      </>)}
+    </CheckboxField>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index 53b080c55dd..99b987b190e 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -100,6 +100,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
           size={size}
           labelPosition={labelPosition}
           labelAlign={labelAlign}
+          isQuiet // Make the label affect the width of the group
           necessityIndicator={necessityIndicator}
           contextualHelp={props.contextualHelp}>
           {label}
@@ -119,7 +120,11 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
             // Spectrum uses a fixed spacing value for horizontal,
             // but the gap changes depending on t-shirt size in vertical.
             columnGap: 16,
-            flexWrap: 'wrap'
+            flexWrap: {
+              orientation: {
+                horizontal: 'wrap'
+              }
+            }
           })({orientation})}>
           <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>
             <CheckboxContext.Provider value={{isEmphasized}}>
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 7f7aea0eb22..69d101aa005 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -273,11 +273,12 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
 });
 
 interface HelpTextProps extends FieldErrorProps {
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   isDisabled?: boolean,
   isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.
   description?: ReactNode,
-  showErrorIcon?: boolean
+  showErrorIcon?: boolean,
+  styles?: StyleString
 }
 
 export const helpTextStyles = style({
@@ -318,21 +319,37 @@ export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDiv
       <Text
         slot="description"
         ref={domDescriptionRef}
-        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>
+        className={mergeStyles(helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled}), props.styles)}>
         {props.description}
       </Text>
     );
   }
 
+  if (!props.isInvalid) {
+    return null;
+  }
+
   return (
     <FieldError
       {...props}
       ref={domErrorRef}
-      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>
+      className={renderProps => mergeStyles(helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled}), props.styles)}>
       {composeRenderProps(props.children, (children, {validationErrors}) => (<>
         {props.showErrorIcon &&
           <CenterBaseline>
-            <AlertIcon />
+            <AlertIcon
+              // @ts-ignore - ts doesn't know that AlertIcon is an icon and not a raw SVG
+              styles={style({
+                size: {
+                  size: {
+                    XS: 14,
+                    S: 16,
+                    M: 20,
+                    L: 22,
+                    XL: 26
+                  }
+                }
+              })({size: props.size || 'M'})} />
           </CenterBaseline>
         }
         <span>{children || validationErrors.join(' ')}</span>
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index e3a8b3c03e9..21a054d129d 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -11,13 +11,13 @@
  */
 
 import {
-  Radio as AriaRadio,
   RadioGroup as AriaRadioGroup,
   RadioGroupProps as AriaRadioGroupProps,
   RadioProps as AriaRadioProps,
+  RadioButton,
+  RadioField,
   RadioRenderProps
 } from 'react-aria-components/RadioGroup';
-
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {ContextValue} from 'react-aria-components/slots';
@@ -106,6 +106,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
             size={size}
             labelPosition={labelPosition}
             labelAlign={labelAlign}
+            isQuiet // Make the label affect the width of the group
             necessityIndicator={necessityIndicator}
             contextualHelp={props.contextualHelp}>
             {label}
@@ -120,7 +121,11 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
                   horizontal: 'row'
                 }
               },
-              flexWrap: 'wrap',
+              flexWrap: {
+                orientation: {
+                  horizontal: 'wrap'
+                }
+              },
               // Spectrum uses a fixed spacing value for horizontal (column),
               // but the gap changes depending on t-shirt size in vertical (row).
               columnGap: 16,
@@ -144,7 +149,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
   );
 });
 
-export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, Pick<HelpTextProps, 'description'> {
   /**
    * The label for the element.
    */
@@ -168,12 +173,36 @@ interface RadioContextProps extends RadioProps, ContextProps {}
 
 interface RenderProps extends RadioRenderProps, ContextProps {}
 
+const radioField = style({
+  display: 'grid',
+  gridTemplateColumns: ['max-content', '1fr'],
+  columnGap: 'text-to-control',
+  alignContent: 'start',
+  font: controlFont(),
+  '--field-height': {
+    type: 'height',
+    value: controlSize()
+  },
+  rowGap: {
+    size: {
+      S: space(1),
+      M: space(1), 
+      L: 2,
+      XL: 2
+    }
+  },
+  gridColumnStart: {
+    isInForm: 'field'
+  }
+}, getAllowedOverrides());
+
 const wrapper = style({
-  display: 'flex',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
   position: 'relative',
-  columnGap: 'text-to-control',
   alignItems: 'baseline',
-  font: controlFont(),
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
@@ -182,11 +211,8 @@ const wrapper = style({
       forcedColors: 'GrayText'
     }
   },
-  gridColumnStart: {
-    isInForm: 'field'
-  },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 const circle = style<RenderProps>({
   ...focusRing(),
@@ -223,11 +249,18 @@ const circle = style<RenderProps>({
   }
 });
 
+const smallerSize = {
+  S: 'XS',
+  M: 'S',
+  L: 'M',
+  XL: 'L'
+} as const;
+
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLInputElement, HTMLDivElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -239,28 +272,42 @@ export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps,
   } = useFormProps<RadioContextProps>(props);
 
   return (
-    <AriaRadio
+    <RadioField
       {...allProps}
       ref={domRef}
       inputRef={inputRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>
+      className={renderProps => UNSAFE_className + radioField({...renderProps, isInForm, size}, allProps.styles)}>
       {renderProps => (
         <>
-          <CenterBaseline>
-            <div
-              ref={circleRef}
-              style={pressScale(circleRef)(renderProps)}
-              className={circle({
-                ...renderProps,
-                isEmphasized: allProps.isEmphasized,
-                isSelected: renderProps.isSelected,
-                size
-              })} />
-          </CenterBaseline>
-          {children}
+          <RadioButton className={renderProps => wrapper({...renderProps, isInForm, size})}>
+            {renderProps => (
+              <>
+                <CenterBaseline>
+                  <div
+                    ref={circleRef}
+                    style={pressScale(circleRef)(renderProps)}
+                    className={circle({
+                      ...renderProps,
+                      isEmphasized: allProps.isEmphasized,
+                      isSelected: renderProps.isSelected,
+                      size
+                    })} />
+                </CenterBaseline>
+                {children}
+              </>
+            )}
+          </RadioButton>
+          <HelpText
+            size={smallerSize[size]}
+            styles={style({
+              gridColumnStart: 2,
+              paddingTop: 0
+            })}
+            isDisabled={renderProps.isDisabled}
+            description={props.description} />
         </>
       )}
-    </AriaRadio>
+    </RadioField>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index d503de2e73b..69186ab32bb 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {Switch as AriaSwitch, SwitchProps as AriaSwitchProps, SwitchRenderProps} from 'react-aria-components/Switch';
-
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {ContextValue} from 'react-aria-components/slots';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
+import {HelpText} from './Field';
 import {pressScale} from './pressScale';
+import {SwitchButton, SwitchField, SwitchFieldProps, SwitchRenderProps} from 'react-aria-components/Switch';
 import {useFocusableRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -39,32 +39,44 @@ interface SwitchStyleProps {
 
 interface RenderProps extends SwitchRenderProps, SwitchStyleProps {}
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'render' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, StyleProps, SwitchStyleProps {
+export interface SwitchProps extends Omit<SwitchFieldProps, 'className' | 'style' | 'render' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, HelpTextProps, StyleProps, SwitchStyleProps {
   children?: ReactNode
 }
 
-export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLInputElement, HTMLDivElement>>>(null);
 
-const wrapper = style({
-  display: 'flex',
+const field = style({
+  display: 'grid',
+  gridTemplateColumns: ['max-content', '1fr'],
   columnGap: 'text-to-control',
-  alignItems: 'baseline',
   width: 'fit',
   font: controlFont(),
+  '--field-height': {
+    type: 'height',
+    value: controlSize()
+  },
+  rowGap: 'calc(var(--field-height) - 1lh)',
+  gridColumnStart: {
+    isInForm: 'field'
+  }
+}, getAllowedOverrides());
+
+const wrapper = style({
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
+  alignItems: 'baseline',
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
-    forcedColors: 'ButtonText',
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
     }
   },
-  gridColumnStart: {
-    isInForm: 'field'
-  },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 const track = style<RenderProps>({
   ...focusRing(),
@@ -156,7 +168,7 @@ const transformStyle = ({isSelected, direction}: SwitchRenderProps & {direction:
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLInputElement, HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -166,30 +178,46 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProp
   let {direction} = useLocale();
   props = useFormProps(props);
   return (
-    <AriaSwitch
+    <SwitchField
       {...props}
       ref={domRef}
       inputRef={inputRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
-      {renderProps => (
-        <>
-          <CenterBaseline>
-            <div
-              className={track({
-                ...renderProps,
-                size: props.size || 'M',
-                isEmphasized: props.isEmphasized
-              })}>
-              <div
-                ref={handleRef}
-                style={pressScale(handleRef, transformStyle)({...renderProps, direction})}
-                className={handle(renderProps)} />
-            </div>
-          </CenterBaseline>
-          {children}
-        </>
-      )}
-    </AriaSwitch>
+      className={renderProps => UNSAFE_className + field({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
+      {({isDisabled, isInvalid}) => (<>
+        <SwitchButton className={renderProps => wrapper({...renderProps, isInForm, size: props.size || 'M'})}>
+          {renderProps => (
+            <>
+              <CenterBaseline>
+                <div
+                  className={track({
+                    ...renderProps,
+                    size: props.size || 'M',
+                    isEmphasized: props.isEmphasized
+                  })}>
+                  <div
+                    ref={handleRef}
+                    style={pressScale(handleRef, transformStyle)({...renderProps, direction})}
+                    className={handle(renderProps)} />
+                </div>
+              </CenterBaseline>
+              {children}
+            </>
+          )}
+        </SwitchButton>
+        <HelpText
+          size={props.size || 'M'}
+          styles={style({
+            gridColumnStart: 1,
+            paddingTop: 0
+          })}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          description={props.description}
+          showErrorIcon>
+          {props.errorMessage}
+        </HelpText>
+      </>)}
+    </SwitchField>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/useDOMRef.ts b/packages/@react-spectrum/s2/src/useDOMRef.ts
index fea09a48602..904b095807c 100644
--- a/packages/@react-spectrum/s2/src/useDOMRef.ts
+++ b/packages/@react-spectrum/s2/src/useDOMRef.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
+import {DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
 import {useImperativeHandle, useMemo, useRef} from 'react';
 
 export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): DOMRefValue<T> {
@@ -21,12 +21,13 @@ export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject
   };
 }
 
-export function createFocusableRef<T extends HTMLElement = HTMLElement>(domRef: RefObject<T | null>, focusableRef: RefObject<FocusableElement | null> = domRef): FocusableRefValue<T> {
+export function createFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(domRef: RefObject<D | null>, focusableRef?: RefObject<T | null>): FocusableRefValue<T, D> {
+  let resolvedFocusableRef = focusableRef || domRef;
   return {
     ...createDOMRef(domRef),
     focus() {
-      if (focusableRef.current) {
-        focusableRef.current.focus();
+      if (resolvedFocusableRef.current) {
+        resolvedFocusableRef.current.focus();
       }
     }
   };
@@ -38,9 +39,9 @@ export function useDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMRef<T>):
   return domRef;
 }
 
-export function useFocusableRef<T extends HTMLElement = HTMLElement>(ref: FocusableRef<T>, focusableRef?: RefObject<FocusableElement | null>): RefObject<T | null> {
-  let domRef = useRef<T>(null);
-  useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef));
+export function useFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(ref: FocusableRef<T, D>, focusableRef?: RefObject<T | null>): RefObject<D | null> {
+  let domRef = useRef<D>(null);
+  useImperativeHandle(ref, () => createFocusableRef<T, D>(domRef, focusableRef));
   return domRef;
 }
 
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index 04bde949d51..6d52cd83395 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -39,3 +39,18 @@ export const Example: Story = {
 export const LongLabel: Story = {
   render: (args) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>)
 };
+
+export const HelpText: Story = {
+  render: (args) => (
+    <Checkbox {...args} styles={style({width: 300})}>Product updates</Checkbox>
+  ),
+  args: {
+    description: 'Get notified about new features and improvements',
+    errorMessage: 'You must agree to the terms'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
index b8dde83fba1..6fefdb8b7a0 100644
--- a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -99,3 +99,20 @@ export const ContextualHelpExample: Story = {
     )
   }
 };
+
+export const HelpText: Story = {
+  render(args) {
+    return (
+      <CheckboxGroup {...args}>
+        <Checkbox value="soccer" description="Get notified about new features and improvements">Product update</Checkbox>
+        <Checkbox value="baseball" description="Important notifications about your account safety">Security alerts</Checkbox>
+        <Checkbox value="basketball" description="Receive promotions, offers, and newsletters">Marketing emails</Checkbox>
+      </CheckboxGroup>
+    );
+  },
+  args: {
+    label: 'Email notification preferences',
+    description: 'Optional checkbox group description',
+    errorMessage: 'Please choose notification preferences'
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
index 7177651c600..bb1b4f7032f 100644
--- a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
@@ -68,16 +68,15 @@ export const LongLabel: Story = {
 export const ErrorAndDescription: Story = {
   render: (args) => (
     <RadioGroup {...args}>
-      <Radio value="soccer">Soccer</Radio>
-      <Radio value="baseball">Baseball</Radio>
-      <Radio value="football" isDisabled>Football</Radio>
-      <Radio value="basketball">Basketball</Radio>
+      <Radio value="standard" description="Delivers in 5-7 business days">Standard Shipping (Free)</Radio>
+      <Radio value="expedited" description="Delivers in 2-3 business days">Expedited Shipping ($9.99)</Radio>
+      <Radio value="overnight" description="Next day delivery">Overnight Shipping ($19.99)</Radio>
     </RadioGroup>
   ),
   args: {
-    label: 'Favorite sport',
-    description: 'A long description to test help text wrapping.',
-    errorMessage: 'A long error message to test help text wrapping. Only shows when invalid is set which makes it red too!'
+    label: 'Shipping options',
+    description: 'Optional radio group description',
+    errorMessage: 'Please choose a shipping option'
   },
   parameters: {
     docs: {
diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
index d901c48d34d..2da20a26d86 100644
--- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
@@ -37,3 +37,18 @@ export const Example: Story = {
 export const LongLabel: Story = {
   render: (args) => <Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>
 };
+
+export const HelpText: Story = {
+  render: (args) => (
+    <Switch {...args} styles={style({width: 300})}>Product updates</Switch>
+  ),
+  args: {
+    description: 'Your organization requires two-factor authentication.',
+    errorMessage: 'You must enable two-factor authentication.'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/TableView.stories.tsx b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
index 45ce91272e3..3ac2f3b5d8c 100644
--- a/packages/@react-spectrum/s2/stories/TableView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
@@ -49,7 +49,7 @@ import User from '../s2wf-icons/S2_Icon_User_20_N.svg';
 import {useTreeData} from 'react-stately/useTreeData';
 
 let onActionFunc = action('onAction');
-let noOnAction = null;
+let noOnAction = undefined;
 const onActionOptions = {onActionFunc, noOnAction};
 
 const events = ['onResizeStart', 'onResize', 'onResizeEnd', 'onSelectionChange', 'onSortChange'];
@@ -63,7 +63,7 @@ const meta: Meta<typeof TableView> = {
   tags: ['autodocs'],
   args: {...getActionArgs(events)},
   argTypes: {
-    ...categorizeArgTypes('Events', ['onAction', 'onLoadMore', 'onResizeStart', 'onResize', 'onResizeEnd', 'onSelectionChange', 'onSortChange']),
+    ...categorizeArgTypes('Events', ['onAction', 'onLoadMore', ...events]),
     children: {table: {disable: true}},
     onAction: {
       options: Object.keys(onActionOptions), // An array of serializable values
diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index b9bebd80f52..ed9aa94269c 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -45,9 +45,9 @@ import {useAsyncList} from 'react-stately/useAsyncList';
 import {useListData} from 'react-stately/useListData';
 
 let onActionFunc = action('onAction');
-let noOnAction = null;
+let noOnAction = undefined;
 const onActionOptions = {onActionFunc, noOnAction};
-const events = ['onSelectionChange', 'onAction'];
+const events = ['onSelectionChange'];
 
 const meta: Meta<typeof TreeView> = {
   component: TreeView,
@@ -57,7 +57,7 @@ const meta: Meta<typeof TreeView> = {
   tags: ['autodocs'],
   args: {...getActionArgs(events)},
   argTypes: {
-    ...categorizeArgTypes('Events', events),
+    ...categorizeArgTypes('Events', ['onAction', ...events]),
     children: {table: {disable: true}},
     onAction: {
       options: Object.keys(onActionOptions), // An array of serializable values
diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index 95b25296cdd..29937f96284 100644
--- a/packages/@react-types/shared/src/dom.d.ts
+++ b/packages/@react-types/shared/src/dom.d.ts
@@ -26,6 +26,7 @@ import {
   PointerEventHandler,
   DOMAttributes as ReactDOMAttributes,
   ReactEventHandler,
+  RefAttributes,
   TouchEventHandler,
   TransitionEventHandler,
   UIEventHandler,
@@ -237,6 +238,8 @@ export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, Rea
   className?: string | undefined
 }
 
+export interface DOMAttributesWithRef<T = Element> extends DOMAttributes<T>, RefAttributes<T> {}
+
 export interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {
   role?: 'group' | 'region' | 'presentation'
 }
diff --git a/packages/@react-types/shared/src/refs.d.ts b/packages/@react-types/shared/src/refs.d.ts
index 16bcbe30265..0c50f0bb6c7 100644
--- a/packages/@react-types/shared/src/refs.d.ts
+++ b/packages/@react-types/shared/src/refs.d.ts
@@ -21,7 +21,7 @@ export interface FocusableRefValue<T extends HTMLElement = HTMLElement, D extend
 }
 
 export type DOMRef<T extends HTMLElement = HTMLElement> = Ref<DOMRefValue<T>>;
-export type FocusableRef<T extends HTMLElement = HTMLElement> = Ref<FocusableRefValue<T>>;
+export type FocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T> = Ref<FocusableRefValue<T, D>>;
 
 export interface RefObject<T> {
   current: T
diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
index 91b53f426fd..bd49f4fa4c1 100644
--- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
@@ -2,6 +2,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 
 import docs from 'docs:react-aria-components';
+import vanillaDocs from 'docs:vanilla-starter/Checkbox';
 import {Checkbox as VanillaCheckbox} from 'vanilla-starter/Checkbox';
 import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox';
 import '../../tailwind/tailwind.css';
@@ -13,22 +14,22 @@ export const description = 'Allows a user to select multiple items from a list o
 
 # Checkbox
 
-<PageDescription>{docs.exports.Checkbox.description}</PageDescription>
+<PageDescription>{docs.exports.CheckboxField.description}</PageDescription>
 
 <ExampleSwitcher>
   <VisualExample
     component={VanillaCheckbox}
-    docs={docs.exports.Checkbox}
-    links={docs.links}
-    props={['children', 'isIndeterminate', 'isDisabled']}
+    docs={vanillaDocs.exports.Checkbox}
+    links={vanillaDocs.links}
+    props={['children', 'description', 'isIndeterminate', 'isDisabled']}
     initialProps={{children: 'Remember me'}}
     type="vanilla"
     files={["starters/docs/src/Checkbox.tsx", "starters/docs/src/Checkbox.css"]} />
   <VisualExample
     component={TailwindCheckbox}
-    docs={docs.exports.Checkbox}
-    links={docs.links}
-    props={['children', 'isIndeterminate', 'isDisabled']}
+    docs={vanillaDocs.exports.Checkbox}
+    links={vanillaDocs.links}
+    props={['children', 'description', 'isIndeterminate', 'isDisabled']}
     initialProps={{children: 'Remember me'}}
     type="tailwind"
     files={["starters/tailwind/src/Checkbox.tsx"]} />
@@ -79,9 +80,10 @@ import {Form} from 'vanilla-starter/Form';;
     ///- begin highlight -///
     name="terms"
     value="agree"
-    isRequired>
+    isRequired
+    description="By clicking this checkbox, you agree to the terms and conditions.">
     {/*- end highlight -*/}
-    I agree to the terms
+    Accept terms and conditions
   </Checkbox>
   <Button type="submit" style={{marginTop: 8}}>Submit</Button>
 </Form>
@@ -91,10 +93,18 @@ import {Form} from 'vanilla-starter/Form';;
 
 <Anatomy />
 
-```tsx links={{Checkbox: '#checkbox'}}
-<Checkbox>Label</Checkbox>
+```tsx links={{CheckboxField: '#checkboxfield', CheckboxButton: '#checkboxbutton'}}
+<CheckboxField>
+  <CheckboxButton>Label</CheckboxButton>
+  <Text slot="description" />
+  <FieldError />
+</CheckboxField>
 ```
 
-### Checkbox
+### CheckboxField
 
-<PropTable component={docs.exports.Checkbox} links={docs.links} />
+<PropTable component={docs.exports.CheckboxField} links={docs.links} showDescription />
+
+### CheckboxButton
+
+<PropTable component={docs.exports.CheckboxButton} links={docs.links} showDescription />
diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
index f4973569d69..480c5fd0337 100644
--- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
@@ -19,27 +19,51 @@ export const description = 'Allows a user to select multiple items from a list o
 <PageDescription>{docs.exports.CheckboxGroup.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="vanilla" files={["starters/docs/src/CheckboxGroup.tsx", "starters/docs/src/CheckboxGroup.css"]}
+  ```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Email Notification Preferences'}} type="vanilla" files={["starters/docs/src/CheckboxGroup.tsx", "starters/docs/src/CheckboxGroup.css"]}
   "use client";
   import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
   import {Checkbox} from 'vanilla-starter/Checkbox';
 
   <CheckboxGroup/* PROPS */>
-    <Checkbox value="soccer">Soccer</Checkbox>
-    <Checkbox value="baseball">Baseball</Checkbox>
-    <Checkbox value="basketball">Basketball</Checkbox>
+    <Checkbox
+      value="product"
+      description="Get notified about new features and improvements">
+      Product Updates
+    </Checkbox>
+    <Checkbox
+      value="security"
+      description="Important notifications about your account safety">
+      Security Alerts
+    </Checkbox>
+    <Checkbox
+      value="marketing"
+      description="Receive promotions, offers, and newsletters">
+      Marketing Emails
+    </Checkbox>
   </CheckboxGroup>
   ```
 
-  ```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="tailwind" files={["starters/tailwind/src/CheckboxGroup.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.CheckboxGroup} links={vanillaDocs.links} props={['label', 'description', 'isDisabled']} initialProps={{label: 'Email Notification Preferences'}} type="tailwind" files={["starters/tailwind/src/CheckboxGroup.tsx"]}
   "use client";
   import {CheckboxGroup} from 'tailwind-starter/CheckboxGroup';
   import {Checkbox} from 'tailwind-starter/Checkbox';
 
   <CheckboxGroup/* PROPS */>
-    <Checkbox value="soccer">Soccer</Checkbox>
-    <Checkbox value="baseball">Baseball</Checkbox>
-    <Checkbox value="basketball">Basketball</Checkbox>
+    <Checkbox
+      value="product"
+      description="Get notified about new features and improvements">
+      Product Updates
+    </Checkbox>
+    <Checkbox
+      value="security"
+      description="Important notifications about your account safety">
+      Security Alerts
+    </Checkbox>
+    <Checkbox
+      value="marketing"
+      description="Receive promotions, offers, and newsletters">
+      Marketing Emails
+    </Checkbox>
   </CheckboxGroup>
   ```
 </ExampleSwitcher>
@@ -115,10 +139,10 @@ import {Form} from 'vanilla-starter/Form';;
 
 <Anatomy />
 
-```tsx links={{CheckboxGroup: '#checkboxgroup', Checkbox: 'Checkbox'}}
+```tsx links={{CheckboxGroup: '#checkboxgroup', CheckboxField: 'Checkbox'}}
 <CheckboxGroup>
   <Label />
-  <Checkbox />
+  <CheckboxField />
   <Text slot="description" />
   <FieldError />
 </CheckboxGroup>
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
index 696a1d601ff..34fe5fb478c 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
@@ -19,25 +19,49 @@ export const description = 'Allows a user to select a single item from a list of
 <PageDescription>{docs.exports.RadioGroup.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={vanillaDocs.exports.RadioGroup} links={vanillaDocs.links} props={['label', 'orientation', 'description', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="vanilla" files={["starters/docs/src/RadioGroup.tsx", "starters/docs/src/RadioGroup.css"]}
+  ```tsx render docs={vanillaDocs.exports.RadioGroup} links={vanillaDocs.links} props={['label', 'orientation', 'description', 'isDisabled']} initialProps={{label: 'Shipping options'}} type="vanilla" files={["starters/docs/src/RadioGroup.tsx", "starters/docs/src/RadioGroup.css"]}
   "use client";
   import {RadioGroup, Radio} from 'vanilla-starter/RadioGroup';
 
   <RadioGroup/* PROPS */>
-    <Radio value="cat">Cat</Radio>
-    <Radio value="dog">Dog</Radio>
-    <Radio value="dragon">Dragon</Radio>
+    <Radio
+      value="standard"
+      description="Delivers in 5–7 business days">
+      Standard Shipping (Free)
+    </Radio>
+    <Radio
+      value="expedited"
+      description="Delivers in 2–3 business days">
+      Expedited Shipping ($9.99)
+    </Radio>
+    <Radio
+      value="dragon"
+      description="Next-day delivery">
+      Overnight Shipping ($19.99)
+    </Radio>
   </RadioGroup>
   ```
 
-  ```tsx render docs={vanillaDocs.exports.RadioGroup} links={vanillaDocs.links} props={['label', 'orientation', 'description', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="tailwind" files={["starters/tailwind/src/RadioGroup.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.RadioGroup} links={vanillaDocs.links} props={['label', 'orientation', 'description', 'isDisabled']} initialProps={{label: 'Shipping options'}} type="tailwind" files={["starters/tailwind/src/RadioGroup.tsx"]}
   "use client";
   import {RadioGroup, Radio} from 'tailwind-starter/RadioGroup';
 
   <RadioGroup/* PROPS */>
-    <Radio value="cat">Cat</Radio>
-    <Radio value="dog">Dog</Radio>
-    <Radio value="dragon">Dragon</Radio>
+    <Radio
+      value="standard"
+      description="Delivers in 5–7 business days">
+      Standard Shipping (Free)
+    </Radio>
+    <Radio
+      value="expedited"
+      description="Delivers in 2–3 business days">
+      Expedited Shipping ($9.99)
+    </Radio>
+    <Radio
+      value="dragon"
+      description="Next-day delivery">
+      Overnight Shipping ($19.99)
+    </Radio>
   </RadioGroup>
   ```
 </ExampleSwitcher>
@@ -101,12 +125,15 @@ import {Form} from 'vanilla-starter/Form';;
 
 <Anatomy />
 
-```tsx links={{RadioGroup: '#radiogroup', Radio: '#radio', SelectionIndicator: 'selection#animated-selectionindicator'}}
+```tsx links={{RadioGroup: '#radiogroup', RadioField: '#radiofield', RadioButton: '#radiobutton', SelectionIndicator: 'selection#animated-selectionindicator'}}
 <RadioGroup>
   <Label />
-  <Radio>
-    <SelectionIndicator />
-  </Radio>
+  <RadioField>
+    <RadioButton>
+      <SelectionIndicator />
+    </RadioButton>
+    <Text slot="description" />
+  </RadioField>
   <Text slot="description" />
   <FieldError />
 </RadioGroup>
@@ -114,8 +141,12 @@ import {Form} from 'vanilla-starter/Form';;
 
 ### RadioGroup
 
-<PropTable component={docs.exports.RadioGroup} links={docs.links} />
+<PropTable component={docs.exports.RadioGroup} links={docs.links} showDescription />
+
+### RadioField
+
+<PropTable component={docs.exports.RadioField} links={docs.links} showDescription />
 
-### Radio
+### RadioButton
 
-<PropTable component={docs.exports.Radio} links={docs.links} />
+<PropTable component={docs.exports.RadioButton} links={docs.links} showDescription />
diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
index d60e239fe64..4d479bc44d1 100644
--- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
@@ -2,6 +2,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 
 import docs from 'docs:react-aria-components';
+import vanillaDocs from 'docs:vanilla-starter/Switch';
 import {Switch as VanillaSwitch} from 'vanilla-starter/Switch';
 import {Switch as TailwindSwitch} from 'tailwind-starter/Switch';
 import '../../tailwind/tailwind.css';
@@ -18,17 +19,17 @@ export const description = 'Allows a user to turn a setting on or off.';
 <ExampleSwitcher>
   <VisualExample
     component={VanillaSwitch}
-    docs={docs.exports.Switch}
-    links={docs.links}
-    props={['children', 'isDisabled']}
+    docs={vanillaDocs.exports.Switch}
+    links={vanillaDocs.links}
+    props={['children', 'description', 'isDisabled']}
     initialProps={{children: 'Low power mode'}}
     type="vanilla"
     files={["starters/docs/src/Switch.tsx", "starters/docs/src/Switch.css"]} />
   <VisualExample
     component={TailwindSwitch}
-    docs={docs.exports.Switch}
-    links={docs.links}
-    props={['children', 'isDisabled']}
+    docs={vanillaDocs.exports.Switch}
+    links={vanillaDocs.links}
+    props={['children', 'description', 'isDisabled']}
     initialProps={{children: 'Low power mode'}}
     type="tailwind"
     files={["starters/tailwind/src/Switch.tsx"]} />
@@ -65,7 +66,7 @@ function Example(props) {
 
 ## Forms
 
-Use the `name` and `value` props to submit the switch to the server. See the [Forms](forms) guide to learn more.
+Use the `name` and `value` props to submit the switch to the server. Set the `isRequired` prop to validate the user selects the switch, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";
@@ -75,7 +76,12 @@ import {Form} from 'vanilla-starter/Form';
 
 <Form>
   {/*- begin highlight -*/}
-  <Switch name="wifi">Wi-Fi</Switch>
+  <Switch
+    name="two-factor"
+    isRequired
+    description="Your organization requires two-factor authentication.">
+    Two-factor authentication
+  </Switch>
   {/*- end highlight -*/}
   <Button type="submit" style={{marginTop: 8}}>Submit</Button>
 </Form>
@@ -85,10 +91,18 @@ import {Form} from 'vanilla-starter/Form';
 
 <Anatomy />
 
-```tsx links={{Switch: '#switch'}}
-<Switch>Label</Switch>
+```tsx links={{SwitchField: '#switchfield', SwitchButton: '#switchbutton'}}
+<SwitchField>
+  <SwitchButton>Label</SwitchButton>
+  <Text slot="description" />
+  <FieldError />
+</SwitchField>
 ```
 
-### Switch
+### SwitchField
 
-<PropTable component={docs.exports.Switch} links={docs.links} />
+<PropTable component={docs.exports.SwitchField} links={docs.links} showDescription />
+
+### SwitchButton
+
+<PropTable component={docs.exports.SwitchButton} links={docs.links} showDescription />
diff --git a/packages/dev/s2-docs/pages/s2/Checkbox.mdx b/packages/dev/s2-docs/pages/s2/Checkbox.mdx
index 6c8559ea593..b73ed7931ec 100644
--- a/packages/dev/s2-docs/pages/s2/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/s2/Checkbox.mdx
@@ -14,7 +14,7 @@ export const description = 'Allows a user to select an individual option.';
 <VisualExample
   component={Checkbox}
   docs={docs.exports.Checkbox}
-  props={['children', 'size', 'isEmphasized', 'isIndeterminate', 'isDisabled']}
+  props={['children', 'size', 'description', 'isEmphasized', 'isIndeterminate', 'isDisabled']}
   initialProps={{children: 'Unsubscribe'}}
   importSource="@react-spectrum/s2/Checkbox"
   type="s2" />
@@ -64,9 +64,10 @@ import {Form} from '@react-spectrum/s2/Form';
     ///- begin highlight -///
     name="terms"
     value="agree"
-    isRequired>
+    isRequired
+    description="By clicking this checkbox, you agree to the terms and conditions.">
     {/*- end highlight -*/}
-    I agree to the terms
+    Accept terms and conditions
   </Checkbox>
   <Button type="submit">Submit</Button>
 </Form>
diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
index 16bf74a9a55..e9b1b13b201 100644
--- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
@@ -14,14 +14,26 @@ export const description = 'Allows a user to select one or more items in a list
 
 <PageDescription>{docs.exports.CheckboxGroup.description}</PageDescription>
 
-```tsx render docs={docs.exports.CheckboxGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="s2"
+```tsx render docs={docs.exports.CheckboxGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Email Notification Preferences'}} type="s2"
 "use client";
 import {CheckboxGroup, Checkbox} from '@react-spectrum/s2/CheckboxGroup';
 
 <CheckboxGroup/* PROPS */>
-  <Checkbox value="soccer">Soccer</Checkbox>
-  <Checkbox value="baseball">Baseball</Checkbox>
-  <Checkbox value="synchronized swimming">Synchronized Swimming</Checkbox>
+  <Checkbox
+    value="product"
+    description="Get notified about new features and improvements">
+    Product Updates
+  </Checkbox>
+  <Checkbox
+    value="security"
+    description="Important notifications about your account safety">
+    Security Alerts
+  </Checkbox>
+  <Checkbox
+    value="marketing"
+    description="Receive promotions, offers, and newsletters">
+    Marketing Emails
+  </Checkbox>
 </CheckboxGroup>
 ```
 
diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
index c55070d0055..94fe4872e2b 100644
--- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
@@ -14,14 +14,26 @@ export const description = 'Allows a user to select a single item from a list of
 
 <PageDescription>{docs.exports.RadioGroup.description}</PageDescription>
 
-```tsx render docs={docs.exports.RadioGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="s2"
+```tsx render docs={docs.exports.RadioGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Shipping options'}} type="s2"
 "use client";
 import {RadioGroup, Radio} from '@react-spectrum/s2/RadioGroup';
 
 <RadioGroup/* PROPS */>
-  <Radio value="cats">Cat</Radio>
-  <Radio value="dogs">Dog</Radio>
-  <Radio value="leopard gecko">Leopard Gecko</Radio>
+  <Radio
+    value="standard"
+    description="Delivers in 5–7 business days">
+    Standard Shipping (Free)
+  </Radio>
+  <Radio
+    value="expedited"
+    description="Delivers in 2–3 business days">
+    Expedited Shipping ($9.99)
+  </Radio>
+  <Radio
+    value="dragon"
+    description="Next-day delivery">
+    Overnight Shipping ($19.99)
+  </Radio>
 </RadioGroup>
 ```
 
@@ -78,7 +90,7 @@ function Example(props) {
       >
         <Radio value="dog">Dog</Radio>
         <Radio value="cat">Cat</Radio>
-        <Radio value="dragon">Dragon</Radio>
+        <Radio value="dragon">Komodo Dragon</Radio>
       </RadioGroup>
       <Button type="submit">Submit</Button>
     </Form>
diff --git a/packages/dev/s2-docs/pages/s2/Switch.mdx b/packages/dev/s2-docs/pages/s2/Switch.mdx
index 12881dc500f..d66c9e4a356 100644
--- a/packages/dev/s2-docs/pages/s2/Switch.mdx
+++ b/packages/dev/s2-docs/pages/s2/Switch.mdx
@@ -14,7 +14,7 @@ export const description = 'Allows a user to turn a setting on or off.';
 <VisualExample
   component={Switch}
   docs={docs.exports.Switch}
-  props={['children', 'size', 'isEmphasized']}
+  props={['children', 'size', 'description', 'isEmphasized', 'isDisabled']}
   initialProps={{
     children: 'Low power mode'
   }}
@@ -52,7 +52,7 @@ function Example(props) {
 
 ## Forms
 
-Use the `name` and `value` props to submit the switch to the server. See the [Forms](forms) guide to learn more.
+Use the `name` and `value` props to submit the switch to the server. Set the `isRequired` prop to validate the user selects the switch, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
 
 ```tsx render
 "use client";
@@ -62,7 +62,12 @@ import {Form} from '@react-spectrum/s2/Form';
 
 <Form>
   {/*- begin highlight -*/}
-  <Switch name="wifi">Wi-Fi</Switch>
+  <Switch
+    name="two-factor"
+    isRequired
+    description="Your organization requires two-factor authentication.">
+    Two-factor authentication
+  </Switch>
   {/*- end highlight -*/}
   <Button type="submit">Submit</Button>
 </Form>
diff --git a/packages/dev/s2-docs/pages/s2/home/Press.tsx b/packages/dev/s2-docs/pages/s2/home/Press.tsx
index 01cd6615a4c..2120a29b90d 100644
--- a/packages/dev/s2-docs/pages/s2/home/Press.tsx
+++ b/packages/dev/s2-docs/pages/s2/home/Press.tsx
@@ -11,7 +11,7 @@ const translate = (x: number, y: number) => `translate(${pos(x)}, ${pos(y)})`;
 export function PressAnimation(): ReactNode {
   let ref = useRef(null);
   let mouseRef = useRef<SVGSVGElement>(null);
-  let checkboxRef = useRef<FocusableRefValue<HTMLLabelElement>>(null);
+  let checkboxRef = useRef<FocusableRefValue<HTMLInputElement>>(null);
   let buttonRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
   let [isChecked, setChecked] = useState(false);
 
diff --git a/packages/react-aria-components/exports/Checkbox.ts b/packages/react-aria-components/exports/Checkbox.ts
index e88eb14e27e..47fce492c76 100644
--- a/packages/react-aria-components/exports/Checkbox.ts
+++ b/packages/react-aria-components/exports/Checkbox.ts
@@ -14,6 +14,13 @@
 // to import it from a React Server Component in a framework like Next.js.
 import 'client-only';
 
-export {Checkbox, CheckboxContext} from '../src/Checkbox';
-export type {CheckboxRenderProps, CheckboxProps} from '../src/Checkbox';
+export {Checkbox, CheckboxField, CheckboxButton, CheckboxContext} from '../src/Checkbox';
+export type {CheckboxRenderProps, CheckboxProps, CheckboxFieldProps, CheckboxButtonProps, CheckboxFieldRenderProps, CheckboxButtonRenderProps} from '../src/Checkbox';
 export type {ToggleState} from 'react-stately/useToggleState';
+
+export {Text} from '../src/Text';
+export type {TextProps} from '../src/Text';
+
+export {FieldError} from '../src/FieldError';
+export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError';
+export type {ValidationResult} from '@react-types/shared';
diff --git a/packages/react-aria-components/exports/RadioGroup.ts b/packages/react-aria-components/exports/RadioGroup.ts
index 2c65a41fde5..03aa1329047 100644
--- a/packages/react-aria-components/exports/RadioGroup.ts
+++ b/packages/react-aria-components/exports/RadioGroup.ts
@@ -14,8 +14,8 @@
 // to import it from a React Server Component in a framework like Next.js.
 import 'client-only';
 
-export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from '../src/RadioGroup';
-export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps} from '../src/RadioGroup';
+export {RadioGroup, Radio, RadioField, RadioButton, RadioGroupContext, RadioContext, RadioFieldContext, RadioGroupStateContext} from '../src/RadioGroup';
+export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioFieldProps, RadioButtonProps, RadioRenderProps, RadioFieldRenderProps, RadioButtonRenderProps} from '../src/RadioGroup';
 export type {RadioGroupState} from 'react-stately/useRadioGroupState';
 
 export {Label} from '../src/Label';
diff --git a/packages/react-aria-components/exports/Switch.ts b/packages/react-aria-components/exports/Switch.ts
index 9f967a4057f..175bd313496 100644
--- a/packages/react-aria-components/exports/Switch.ts
+++ b/packages/react-aria-components/exports/Switch.ts
@@ -14,6 +14,13 @@
 // to import it from a React Server Component in a framework like Next.js.
 import 'client-only';
 
-export {Switch, SwitchContext} from '../src/Switch';
-export type {SwitchProps, SwitchRenderProps} from '../src/Switch';
+export {Switch, SwitchField, SwitchButton, SwitchContext} from '../src/Switch';
+export type {SwitchProps, SwitchFieldProps, SwitchButtonProps, SwitchRenderProps, SwitchFieldRenderProps, SwitchButtonRenderProps} from '../src/Switch';
 export type {ToggleState} from 'react-stately/useToggleState';
+
+export {Text} from '../src/Text';
+export type {TextProps} from '../src/Text';
+
+export {FieldError} from '../src/FieldError';
+export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError';
+export type {ValidationResult} from '@react-types/shared';
diff --git a/packages/react-aria-components/exports/index.ts b/packages/react-aria-components/exports/index.ts
index f474cd21b8c..cb24054d65b 100644
--- a/packages/react-aria-components/exports/index.ts
+++ b/packages/react-aria-components/exports/index.ts
@@ -18,7 +18,7 @@ export {Autocomplete, AutocompleteContext, AutocompleteStateContext, SelectableC
 export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from '../src/Breadcrumbs';
 export {Button, ButtonContext} from '../src/Button';
 export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext, CalendarStateContext, RangeCalendarStateContext} from '../src/Calendar';
-export {Checkbox, CheckboxGroup, CheckboxContext, CheckboxGroupContext, CheckboxGroupStateContext} from '../src/Checkbox';
+export {Checkbox, CheckboxGroup, CheckboxField, CheckboxButton, CheckboxContext, CheckboxFieldContext, CheckboxGroupContext, CheckboxGroupStateContext} from '../src/Checkbox';
 export {ColorArea, ColorAreaContext, ColorAreaStateContext} from '../src/ColorArea';
 export {ColorField, ColorFieldContext, ColorFieldStateContext} from '../src/ColorField';
 export {ColorPicker, ColorPickerContext, ColorPickerStateContext} from '../src/ColorPicker';
@@ -56,14 +56,14 @@ export {NumberField, NumberFieldContext, NumberFieldStateContext} from '../src/N
 export {OverlayArrow} from '../src/OverlayArrow';
 export {Popover, PopoverContext} from '../src/Popover';
 export {ProgressBar, ProgressBarContext} from '../src/ProgressBar';
-export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from '../src/RadioGroup';
+export {RadioGroup, Radio, RadioField, RadioButton, RadioGroupContext, RadioContext, RadioFieldContext, RadioGroupStateContext} from '../src/RadioGroup';
 export {SearchField, SearchFieldContext} from '../src/SearchField';
 export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateContext} from '../src/Select';
 export {SelectionIndicator, SelectionIndicatorContext} from '../src/SelectionIndicator';
 export {Separator, SeparatorContext} from '../src/Separator';
 export {SharedElementTransition, SharedElement} from '../src/SharedElementTransition';
 export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from '../src/Slider';
-export {Switch, SwitchContext} from '../src/Switch';
+export {Switch, SwitchField, SwitchButton, SwitchContext, SwitchFieldContext} from '../src/Switch';
 export {TableLoadMoreItem, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext, TableLayout} from '../src/Table';
 export {Tabs, TabList, TabPanels, TabPanel, Tab, TabsContext, TabListStateContext} from '../src/Tabs';
 export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from '../src/TagGroup';
@@ -105,7 +105,7 @@ export type {AutocompleteProps, SelectableCollectionContextValue} from '../src/A
 export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from '../src/Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from '../src/Button';
 export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from '../src/Calendar';
-export type {CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxRenderProps, CheckboxProps} from '../src/Checkbox';
+export type {CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxRenderProps, CheckboxProps, CheckboxFieldProps, CheckboxFieldRenderProps, CheckboxButtonProps, CheckboxButtonRenderProps} from '../src/Checkbox';
 export type {ColorAreaProps, ColorAreaRenderProps} from '../src/ColorArea';
 export type {ColorFieldProps, ColorFieldRenderProps} from '../src/ColorField';
 export type {ColorSliderProps, ColorSliderRenderProps} from '../src/ColorSlider';
@@ -139,14 +139,14 @@ export type {NumberFieldProps, NumberFieldRenderProps} from '../src/NumberField'
 export type {OverlayArrowProps, OverlayArrowRenderProps} from '../src/OverlayArrow';
 export type {PopoverProps, PopoverRenderProps} from '../src/Popover';
 export type {ProgressBarProps, ProgressBarRenderProps} from '../src/ProgressBar';
-export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps} from '../src/RadioGroup';
+export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps, RadioFieldProps, RadioFieldRenderProps, RadioButtonProps, RadioButtonRenderProps} from '../src/RadioGroup';
 export type {SearchFieldProps, SearchFieldRenderProps} from '../src/SearchField';
 export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRenderProps} from '../src/Select';
 export type {SelectionIndicatorProps} from '../src/SelectionIndicator';
 export type {SharedElementTransitionProps, SharedElementProps, SharedElementRenderProps} from '../src/SharedElementTransition';
 export type {SeparatorProps} from '../src/Separator';
 export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from '../src/Slider';
-export type {SwitchProps, SwitchRenderProps} from '../src/Switch';
+export type {SwitchProps, SwitchRenderProps, SwitchFieldProps, SwitchFieldRenderProps, SwitchButtonProps, SwitchButtonRenderProps} from '../src/Switch';
 export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, TableBodyRenderProps, ResizableTableContainerProps, ColumnProps, ColumnRenderProps, ColumnResizerProps, ColumnResizerRenderProps, RowProps, RowRenderProps, CellProps, CellRenderProps, TableLoadMoreItemProps} from '../src/Table';
 export type {TabListProps, TabListRenderProps, TabPanelsProps, TabPanelProps, TabPanelRenderProps, TabProps, TabsProps, TabRenderProps, TabsRenderProps} from '../src/Tabs';
 export type {TagGroupProps, TagListProps, TagListRenderProps, TagProps, TagRenderProps} from '../src/TagGroup';
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index 674757cf5f6..d08ea640a5a 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -11,7 +11,7 @@
  */
 import {AriaCheckboxGroupProps, useCheckboxGroup, useCheckboxGroupItem} from 'react-aria/useCheckboxGroup';
 
-import {AriaCheckboxProps, useCheckbox} from 'react-aria/useCheckbox';
+import {AriaCheckboxProps, CheckboxAria, useCheckbox} from 'react-aria/useCheckbox';
 import {CheckboxGroupState, useCheckboxGroupState} from 'react-stately/useCheckboxGroupState';
 import {
   ClassNameOrFunction,
@@ -50,6 +50,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'childr
    */
   className?: ClassNameOrFunction<CheckboxGroupRenderProps>
 }
+
 export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
@@ -62,6 +63,26 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'val
   inputRef?: RefObject<HTMLInputElement | null>
 }
 
+export interface CheckboxFieldProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-CheckboxField'
+   */
+  className?: ClassNameOrFunction<CheckboxFieldRenderProps>,
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface CheckboxButtonProps extends HoverEvents, RenderProps<CheckboxButtonRenderProps, 'label'>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-CheckboxButton'
+   */
+  className?: ClassNameOrFunction<CheckboxButtonRenderProps>
+}
+
 export interface CheckboxGroupRenderProps {
   /**
    * Whether the checkbox group is disabled.
@@ -142,7 +163,43 @@ export interface CheckboxRenderProps {
   isRequired: boolean
 }
 
+export interface CheckboxFieldRenderProps {
+  /**
+   * Whether the checkbox is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the checkbox is indeterminate.
+   * @selector [data-indeterminate]
+   */
+  isIndeterminate: boolean,
+  /**
+   * Whether the checkbox is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the checkbox is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the checkbox invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the checkbox is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
+}
+
+export interface CheckboxButtonRenderProps extends CheckboxRenderProps {}
+
 export const CheckboxContext = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
+export const CheckboxFieldContext = createContext<ContextValue<CheckboxFieldProps, HTMLDivElement>>(null);
 export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
 export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
 
@@ -207,38 +264,132 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
   );
 });
 
+interface InternalCheckboxContextValue extends CheckboxAria {
+  inputRef: RefObject<HTMLInputElement | null>,
+  defaultClassName: string,
+  isIndeterminate?: boolean,
+  isRequired?: boolean
+}
+
+const InternalCheckboxContext = createContext<InternalCheckboxContextValue | null>(null);
+
 /**
- * A checkbox allows a user to select multiple items from a list of individual items, or
- * to mark one individual item as selected.
+ * A checkbox allows a user to select an item, with support for validation and help text.
  */
-export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const CheckboxField = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
   } = props;
-  [props, ref] = useContextProps(otherProps, ref, CheckboxContext);
+  [props, ref] = useContextProps(otherProps, ref, CheckboxFieldContext);
+  let groupState = useContext(CheckboxGroupStateContext);
+  let [aria, inputRef] = useCheckboxAria(props, userProvidedInputRef);
+  let {descriptionProps, errorMessageProps, isSelected, isDisabled, isReadOnly, isInvalid, validationDetails, validationErrors} = aria;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-CheckboxField',
+    values: {
+      isSelected,
+      isIndeterminate: props.isIndeterminate || false,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, renderProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-selected={isSelected || undefined}
+      data-indeterminate={props.isIndeterminate || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={isReadOnly || undefined}
+      data-invalid={isInvalid || undefined}
+      data-required={props.isRequired || undefined}>
+      <Provider
+        values={[
+          [InternalCheckboxContext, {
+            ...aria,
+            inputRef,
+            defaultClassName: 'react-aria-CheckboxButton',
+            isIndeterminate: props.isIndeterminate,
+            isRequired: props.isRequired
+          }],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }],
+          // In a CheckboxGroup, validation is handled at the group level instead of repeated on each checkbox.
+          [FieldErrorContext, groupState ? null : {isInvalid, validationDetails, validationErrors}]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});
+
+function useCheckboxAria(props: CheckboxProps | CheckboxFieldProps, userProvidedInputRef: RefObject<HTMLInputElement | null> | null): [CheckboxAria, RefObject<HTMLInputElement | null>] {
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let groupState = useContext(CheckboxGroupStateContext);
   let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
-  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid} = groupState
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ? useCheckboxGroupItem({
-      ...removeDataAttributes(props),
-      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
-      // it's passed explicitly here to avoid typescript error (requires ignore).
-      // @ts-ignore
-      value: props.value,
-      // ReactNode type doesn't allow function children.
-      children: typeof props.children === 'function' ? true : props.children
-    }, groupState, inputRef)
+  let checkboxProps = {
+    ...removeDataAttributes(props),
+    children: typeof props.children === 'function' ? true : props.children,
+    value: props.value!,
+    validationBehavior
+  };
+  
+  let aria = groupState
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    : useCheckbox({
-      ...removeDataAttributes(props),
-      children: typeof props.children === 'function' ? true : props.children,
-      validationBehavior
+    ? useCheckboxGroupItem(checkboxProps, groupState, inputRef)
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    }, useToggleState(props), inputRef);
+    : useCheckbox(checkboxProps, useToggleState(props), inputRef);
+  return [aria, inputRef];
+}
+
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items, or
+ * to mark one individual item as selected.
+ * @deprecated Use CheckboxField + CheckboxButton instead.
+ */
+export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, CheckboxContext);
+  let [aria, inputRef] = useCheckboxAria(props, userProvidedInputRef);
+  
+  return (
+    <InternalCheckboxContext.Provider
+      value={{
+        ...aria,
+        inputRef,
+        defaultClassName: 'react-aria-Checkbox',
+        isIndeterminate: props.isIndeterminate,
+        isRequired: props.isRequired
+      }}>
+      <CheckboxButton {...props} ref={ref} />
+    </InternalCheckboxContext.Provider>
+  );
+});
+
+/**
+ * A checkbox button is the clickable area of a checkbox, including the indicator and label.
+ */
+export const CheckboxButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxButton(props: CheckboxButtonProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid, inputRef, defaultClassName, isIndeterminate, isRequired} = useContext(InternalCheckboxContext)!;
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let isInteractionDisabled = isDisabled || isReadOnly;
 
@@ -249,10 +400,10 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
 
   let renderProps = useRenderProps({
     ...props,
-    defaultClassName: 'react-aria-Checkbox',
+    defaultClassName,
     values: {
       isSelected,
-      isIndeterminate: props.isIndeterminate || false,
+      isIndeterminate: isIndeterminate || false,
       isPressed,
       isHovered,
       isFocused,
@@ -260,7 +411,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
       isDisabled,
       isReadOnly,
       isInvalid,
-      isRequired: props.isRequired || false
+      isRequired: isRequired || false
     }
   });
 
@@ -274,7 +425,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
       ref={ref}
       slot={props.slot || undefined}
       data-selected={isSelected || undefined}
-      data-indeterminate={props.isIndeterminate || undefined}
+      data-indeterminate={isIndeterminate || undefined}
       data-pressed={isPressed || undefined}
       data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
@@ -282,7 +433,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
       data-disabled={isDisabled || undefined}
       data-readonly={isReadOnly || undefined}
       data-invalid={isInvalid || undefined}
-      data-required={props.isRequired || undefined}>
+      data-required={isRequired || undefined}>
       <VisuallyHidden elementType="span">
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index fb481428de5..1b9a660391f 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -18,7 +18,7 @@ import {
 } from 'react-aria/useGridList';
 
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext, CheckboxFieldContext} from './Checkbox';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -469,6 +469,12 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
                   selection: checkboxProps
                 }
               }],
+              [CheckboxFieldContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {},
+                  selection: checkboxProps
+                }
+              }],
               [ButtonContext, {
                 slots: {
                   [DEFAULT_SLOT]: buttonProps,
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index 4ea6ca394c6..6919da8a581 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaRadioGroupProps, AriaRadioProps, useRadio, useRadioGroup} from 'react-aria/useRadioGroup';
-
+import {AriaRadioGroupProps, AriaRadioProps, RadioAria, useRadio, useRadioGroup} from 'react-aria/useRadioGroup';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -35,7 +34,7 @@ import {LabelContext} from './Label';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeRefs} from 'react-aria/mergeRefs';
 import {RadioGroupState, useRadioGroupState} from 'react-stately/useRadioGroupState';
-import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
@@ -63,6 +62,26 @@ export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvent
   inputRef?: RefObject<HTMLInputElement | null>
 }
 
+export interface RadioFieldProps extends Omit<AriaRadioProps, 'children'>, RenderProps<RadioFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-RadioField'
+   */
+  className?: ClassNameOrFunction<RadioFieldRenderProps>,
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface RadioButtonProps extends HoverEvents, RenderProps<RadioButtonRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-RadioButton'
+   */
+  className?: ClassNameOrFunction<RadioButtonRenderProps>
+}
+
 export interface RadioGroupRenderProps {
   /**
    * The orientation of the radio group.
@@ -143,8 +162,39 @@ export interface RadioRenderProps {
   isRequired: boolean
 }
 
+export interface RadioFieldRenderProps {
+  /**
+   * Whether the radio is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the radio is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the radio is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the radio is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the checkbox is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
+}
+
+export interface RadioButtonRenderProps extends RadioRenderProps {}
+
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
 export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
+export const RadioFieldContext = createContext<ContextValue<Partial<RadioFieldProps>, HTMLDivElement>>(null);
 export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
 
 /**
@@ -215,6 +265,7 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 
 /**
  * A radio represents an individual option within a radio group.
+ * @deprecated Use RadioField + RadioButton instead.
  */
 export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
@@ -224,11 +275,95 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
   [props, ref] = useContextProps(otherProps, ref, RadioContext);
   let state = React.useContext(RadioGroupStateContext)!;
   let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
-  let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({
+  let aria = useRadio({
     ...removeDataAttributes<RadioProps>(props),
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
   }, state, inputRef);
+
+  return (
+    <InternalRadioContext.Provider value={{...aria, inputRef, defaultClassName: 'react-aria-Radio'}}>
+      <RadioButton {...props} ref={ref} />
+    </InternalRadioContext.Provider>
+  );
+});
+
+interface InternalRadioContextValue extends RadioAria {
+  inputRef: RefObject<HTMLInputElement | null>,
+  defaultClassName: string
+}
+
+const InternalRadioContext = createContext<InternalRadioContextValue | null>(null);
+
+/**
+ * A RadioField represents an individual option within a radio group, containing a RadioButton and optional description.
+ */
+export const RadioField = /*#__PURE__*/ (forwardRef as forwardRefType)(function RadioField(props: RadioFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, RadioFieldContext);
+  let state = React.useContext(RadioGroupStateContext)!;
+  let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
+  let aria = useRadio({
+    ...removeDataAttributes<RadioFieldProps>(props),
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === 'function' ? true : props.children
+  }, state, inputRef);
+  let {descriptionProps, isSelected, isDisabled} = aria;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-RadioField',
+    values: {
+      isSelected,
+      isDisabled,
+      isReadOnly: state.isReadOnly,
+      isInvalid: state.isInvalid,
+      isRequired: state.isRequired
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, renderProps)}
+      ref={ref}
+      data-selected={isSelected || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-invalid={state.isInvalid || undefined}
+      data-required={state.isRequired || undefined}>
+      <Provider
+        values={[
+          [SelectionIndicatorContext, {isSelected}],
+          [InternalRadioContext, {
+            ...aria,
+            inputRef,
+            defaultClassName: 'react-aria-RadioButton'
+          }],
+          [TextContext, {
+            slots: {
+              description: descriptionProps
+            }
+          }]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});
+
+/**
+ * A RadioButton is the clickable area of a radio, including the indicator and label.
+ */
+export const RadioButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function RadioButton(props: RadioButtonProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {labelProps, inputProps, isSelected, isDisabled, isPressed, defaultClassName, inputRef} = useContext(InternalRadioContext)!;
+  let state = React.useContext(RadioGroupStateContext)!;
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let interactionDisabled = isDisabled || state.isReadOnly;
 
@@ -239,7 +374,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
 
   let renderProps = useRenderProps({
     ...props,
-    defaultClassName: 'react-aria-Radio',
+    defaultClassName,
     values: {
       isSelected,
       isPressed,
@@ -273,9 +408,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
       <VisuallyHidden elementType="span">
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
-      <SelectionIndicatorContext.Provider value={{isSelected}}>
-        {renderProps.children}
-      </SelectionIndicatorContext.Provider>
+      {renderProps.children}
     </dom.label>
   );
 });
diff --git a/packages/react-aria-components/src/Switch.tsx b/packages/react-aria-components/src/Switch.tsx
index dc83c008893..29f4c267504 100644
--- a/packages/react-aria-components/src/Switch.tsx
+++ b/packages/react-aria-components/src/Switch.tsx
@@ -10,31 +10,37 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSwitchProps, useSwitch} from 'react-aria/useSwitch';
+import {AriaSwitchProps, SwitchAria, useSwitch} from 'react-aria/useSwitch';
 
 import {
   ClassNameOrFunction,
   ContextValue,
   dom,
+  Provider,
+  RACValidation,
   removeDataAttributes,
   RenderProps,
   SlotProps,
   useContextProps,
-  useRenderProps
+  useRenderProps,
+  useSlottedContext
 } from './utils';
+import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
+import {FormContext} from './Form';
 import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {HoverEvents} from '@react-types/shared';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeRefs} from 'react-aria/mergeRefs';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import {TextContext} from './Text';
 import {ToggleState, useToggleState} from 'react-stately/useToggleState';
 import {useFocusRing} from 'react-aria/useFocusRing';
 import {useHover} from 'react-aria/useHover';
 import {useObjectRef} from 'react-aria/useObjectRef';
 import {VisuallyHidden} from 'react-aria/VisuallyHidden';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children' | 'validationState' | 'validationBehavior' | 'isRequired' | 'isInvalid' | 'validate'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
  /**
   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
   * @default 'react-aria-Switch'
@@ -46,6 +52,26 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEve
  inputRef?: RefObject<HTMLInputElement | null>
 }
 
+export interface SwitchFieldProps extends Omit<AriaSwitchProps, 'children' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SwitchFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+ /**
+  * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+  * @default 'react-aria-SwitchField'
+  */
+ className?: ClassNameOrFunction<SwitchFieldRenderProps>,
+ /**
+  * A ref for the HTML input element.
+  */
+ inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface SwitchButtonProps extends HoverEvents, RenderProps<SwitchButtonRenderProps, 'label'>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-SwitchButton'
+   */
+  className?: ClassNameOrFunction<SwitchButtonRenderProps>
+}
+
 export interface SwitchRenderProps {
   /**
    * Whether the switch is selected.
@@ -88,10 +114,62 @@ export interface SwitchRenderProps {
   state: ToggleState
 }
 
+export interface SwitchFieldRenderProps {
+  /**
+   * Whether the switch is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the switch is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the switch is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the switch invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the switch is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
+  /**
+   * State of the switch.
+   */
+  state: ToggleState
+}
+
+export interface SwitchButtonRenderProps extends SwitchRenderProps {
+  /**
+   * Whether the switch invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the switch is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
+  /**
+   * State of the switch.
+   */
+  state: ToggleState
+}
+
 export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
+export const SwitchFieldContext = createContext<ContextValue<SwitchFieldProps, HTMLDivElement>>(null);
+export const ToggleStateContext = createContext<ToggleState | null>(null);
 
 /**
  * A switch allows a user to turn a setting on or off.
+ * @deprecated Use SwitchField + SwitchButton instead.
  */
 export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
@@ -101,13 +179,114 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
   [props, ref] = useContextProps(otherProps, ref, SwitchContext);
   let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
   let state = useToggleState(props);
-  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed} = useSwitch({
+  let aria = useSwitch({
     ...removeDataAttributes(props),
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
   }, state, inputRef);
+
+  return (
+    <Provider
+      values={[
+        [ToggleStateContext, state],
+        [InternalSwitchContext, {
+          ...aria,
+          inputRef,
+          defaultClassName: 'react-aria-Switch'
+        }]
+      ]}>
+      <SwitchButton {...props} ref={ref} />
+    </Provider>
+  );
+});
+
+interface InternalSwitchContextValue extends SwitchAria {
+  inputRef: RefObject<HTMLInputElement | null>,
+  defaultClassName: string,
+  isRequired?: boolean
+}
+
+const InternalSwitchContext = createContext<InternalSwitchContextValue | null>(null);
+
+/**
+ * A switch allows a user to turn a setting on or off, with support for validation and help text.
+ */
+export const SwitchField = /*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, SwitchFieldContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
+  let state = useToggleState(props);
+  let aria = useSwitch({
+    ...removeDataAttributes(props),
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === 'function' ? true : props.children,
+    validationBehavior
+  }, state, inputRef);
+  let {descriptionProps, errorMessageProps, isSelected, isDisabled, isReadOnly, isInvalid, validationDetails, validationErrors} = aria;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-SwitchField',
+    values: {
+      isSelected,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false,
+      state
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, renderProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-selected={isSelected || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={isReadOnly || undefined}
+      data-invalid={isInvalid || undefined}
+      data-required={props.isRequired || undefined}>
+      <Provider
+        values={[
+          [ToggleStateContext, state],
+          [InternalSwitchContext, {
+            ...aria,
+            inputRef,
+            defaultClassName: 'react-aria-SwitchButton',
+            isRequired: props.isRequired
+          }],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }],
+          [FieldErrorContext, {isInvalid, validationDetails, validationErrors}]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </dom.div>
+  );
+});
+
+/**
+ * A switch button is the clickable area of a switch, including the indicator and label.
+ */
+export const SwitchButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function SwitchButton(props: SwitchButtonProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid, inputRef, defaultClassName, isRequired} = useContext(InternalSwitchContext)!;
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
-  let isInteractionDisabled = props.isDisabled || props.isReadOnly;
+  let isInteractionDisabled = isDisabled || isReadOnly;
+  let state = useContext(ToggleStateContext)!;
 
   let {hoverProps, isHovered} = useHover({
     ...props,
@@ -116,7 +295,7 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
 
   let renderProps = useRenderProps({
     ...props,
-    defaultClassName: 'react-aria-Switch',
+    defaultClassName,
     values: {
       isSelected,
       isPressed,
@@ -125,6 +304,8 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
       isFocusVisible,
       isDisabled,
       isReadOnly,
+      isInvalid,
+      isRequired: isRequired || false,
       state
     }
   });
@@ -144,7 +325,9 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-disabled={isDisabled || undefined}
-      data-readonly={isReadOnly || undefined}>
+      data-readonly={isReadOnly || undefined}
+      data-invalid={isInvalid || undefined}
+      data-required={isRequired || undefined}>
       <VisuallyHidden elementType="span">
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 6d7179d6cd4..e98302b8e0d 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -2,7 +2,7 @@ import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps,
 import {BaseCollection, CollectionNode, FilterableNode, LoaderNode} from 'react-aria/private/collections/BaseCollection';
 import {buildHeaderRows} from 'react-stately/private/table/TableCollection';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext, CheckboxFieldContext} from './Checkbox';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -859,6 +859,11 @@ function TableHeaderRow({item}: {item: GridNode<any>}) {
             slots: {
               selection: checkboxProps
             }
+          }],
+          [CheckboxFieldContext, {
+            slots: {
+              selection: checkboxProps
+            }
           }]
         ]}>
         <CollectionBranch collection={state.collection} parent={item} />
@@ -1478,6 +1483,12 @@ export const Row = /*#__PURE__*/ createBranchComponent(
                   selection: checkboxProps
                 }
               }],
+              [CheckboxFieldContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {},
+                  selection: checkboxProps
+                }
+              }],
               [ButtonContext, {
                 slots: {
                   [DEFAULT_SLOT]: {},
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 7857a4d7dab..276fd15fe31 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -15,7 +15,7 @@ import {AriaTreeItemOptions, useTreeItem} from 'react-aria/useTree';
 import {AriaTreeProps, useTree} from 'react-aria/useTree';
 import {BaseCollection, CollectionNode, LoaderNode, SectionNode} from 'react-aria/private/collections/BaseCollection';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './Checkbox';
+import {CheckboxContext, CheckboxFieldContext} from './Checkbox';
 import {
   ChildrenOrFunction,
   ClassNameOrFunction,
@@ -787,6 +787,11 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent(TreeItemNode, <T ext
                 selection: checkboxProps
               }
             }],
+            [CheckboxFieldContext, {
+              slots: {
+                selection: checkboxProps
+              }
+            }],
           // TODO: support description in the tree row
           // TODO: don't think I need to pass isExpanded to the button here since it can be sourced from the renderProps? Might be worthwhile passing it down?
             [ButtonContext, {
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 03f353256db..5409b9d9d5e 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -1152,6 +1152,73 @@ export const OnLoadMoreTableVirtualizedResizeWrapperStory: StoryObj<typeof OnLoa
   }
 };
 
+const VirtualizedTableLoaderWidthTest = (args: {delay: number}): JSX.Element => {
+  let list = useAsyncList<Character>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+        await new Promise(resolve => setTimeout(resolve, args.delay));
+      }
+      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <div style={{resize: 'horizontal', overflow: 'auto', width: 600, height: 400, minWidth: 300, border: '1px solid gray', padding: 8}}>
+      <Virtualizer
+        layout={TableLayout}
+        layoutOptions={{
+          rowHeight: 25,
+          headingHeight: 25,
+          loaderHeight: 30
+        }}>
+        <Table aria-label="Star Wars characters" style={{width: '100%', height: '100%', overflow: 'auto'}}>
+          <TableHeader>
+            <Column id="name" isRowHeader>Name</Column>
+            <Column id="height">Height</Column>
+            <Column id="mass">Mass</Column>
+            <Column id="birth_year">Birth Year</Column>
+          </TableHeader>
+          <TableBody renderEmptyState={() => renderEmptyLoader({isLoading: list.loadingState === 'loading'})}>
+            <Collection items={list.items}>
+              {(item) => (
+                <Row id={item.name}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>{item.height}</Cell>
+                  <Cell>{item.mass}</Cell>
+                  <Cell>{item.birth_year}</Cell>
+                </Row>
+              )}
+            </Collection>
+            <TableLoadMoreItem
+              onLoadMore={list.loadMore}
+              isLoading={list.loadingState === 'loadingMore'}
+              style={{height: 30, width: '100%'}}>
+              <LoadingSpinner style={{height: 20, position: 'unset'}} />
+            </TableLoadMoreItem>
+          </TableBody>
+        </Table>
+      </Virtualizer>
+    </div>
+  );
+};
+
+export const VirtualizedTableLoaderWidthTestStory: StoryObj<typeof VirtualizedTableLoaderWidthTest> = {
+  render: VirtualizedTableLoaderWidthTest,
+  name: 'virtualized table, loader dynamic width',
+  args: {delay: 10000},
+  parameters: {
+    description: {
+      data: 'resizing the table should also resize the loader element width'
+    }
+  }
+};
+
 interface Launch {
   id: number,
   mission_name: string,
diff --git a/packages/react-aria-components/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 35abb978759..91e467f98a7 100644
--- a/packages/react-aria-components/test/Checkbox.test.js
+++ b/packages/react-aria-components/test/Checkbox.test.js
@@ -10,52 +10,79 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox, CheckboxContext} from '../src/Checkbox';
-import {pointerMap, render} from '@react-spectrum/test-utils-internal';
-import React from 'react';
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {Checkbox as AriaCheckbox, CheckboxButton, CheckboxContext, CheckboxField, CheckboxFieldContext} from '../src/Checkbox';
+import {FieldError} from '../src/FieldError';
+import {Form} from '../src/Form';
+import React, {forwardRef} from 'react';
+import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-describe('Checkbox', () => {
+const CheckboxExample = forwardRef(function CheckboxExample(props, ref) {
+  return (
+    <CheckboxField {...props} ref={ref}>
+      <CheckboxButton
+        className={props.buttonClassName}
+        onHoverStart={props.onHoverStart}
+        onHoverEnd={props.onHoverEnd}
+        onHoverChange={props.onHoverChange}>
+        {props.children}
+      </CheckboxButton>
+      {props.description && <Text slot="description">{props.description}</Text>}
+      <FieldError />
+    </CheckboxField>
+  );
+});
+
+const CheckboxLegacy = forwardRef(function CheckboxLegacy(props, ref) {
+  return <AriaCheckbox {...props} ref={ref} className={props.className || props.buttonClassName} />;
+});
+
+describe.each(['Checkbox', 'CheckboxField'])('%s', (comp) => {
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  let Checkbox = comp === 'CheckboxField' ? CheckboxExample : CheckboxLegacy;
+  let findRoot = el => comp === 'CheckboxField' ? el.closest('label').parentElement : el.closest('label');
+
   it('should render a checkbox with default class', () => {
     let {getByRole} = render(<Checkbox>Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
-    expect(checkbox).toHaveAttribute('class', 'react-aria-Checkbox');
+    expect(findRoot(checkbox)).toHaveAttribute('class', `react-aria-${comp}`);
   });
 
   it('should render a checkbox with custom class', () => {
     let {getByRole} = render(<Checkbox className="test">Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
-    expect(checkbox).toHaveAttribute('class', 'test');
+    expect(findRoot(checkbox)).toHaveAttribute('class', 'test');
   });
 
   it('should support DOM props', () => {
     let {getByRole} =  render(<Checkbox data-foo="bar">Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
-    expect(checkbox).toHaveAttribute('data-foo', 'bar');
+    expect(findRoot(checkbox)).toHaveAttribute('data-foo', 'bar');
     expect(getByRole('checkbox')).not.toHaveAttribute('data-foo', 'bar');
   });
 
   it('should support custom render function', () => {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    let {getByRole} = render(<Checkbox render={props => <label {...props} data-custom="bar" />}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox render={props => comp === 'CheckboxField' ? <div {...props} data-custom="bar" /> : <label {...props} data-custom="bar" />}>Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
-    expect(checkbox).toHaveAttribute('data-custom', 'bar');
+    expect(findRoot(checkbox)).toHaveAttribute('data-custom', 'bar');
   });
 
   it('should support slot', () => {
+    let Context = comp === 'CheckboxField' ? CheckboxFieldContext : CheckboxContext;
     let {getByRole} = render(
-      <CheckboxContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
+      <Context.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
         <Checkbox slot="test">Test</Checkbox>
-      </CheckboxContext.Provider>
+      </Context.Provider>
     );
 
     let checkbox = getByRole('checkbox');
-    expect(checkbox.closest('label')).toHaveAttribute('slot', 'test');
+    expect(findRoot(checkbox.closest('label'))).toHaveAttribute('slot', 'test');
     expect(checkbox).toHaveAttribute('aria-label', 'test');
   });
 
@@ -63,7 +90,7 @@ describe('Checkbox', () => {
     let hoverStartSpy = jest.fn();
     let hoverChangeSpy = jest.fn();
     let hoverEndSpy = jest.fn();
-    let {getByRole} = render(<Checkbox className={({isHovered}) => isHovered ? 'hover' : ''} onHoverStart={hoverStartSpy} onHoverChange={hoverChangeSpy} onHoverEnd={hoverEndSpy}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox buttonClassName={({isHovered}) => isHovered ? 'hover' : ''} onHoverStart={hoverStartSpy} onHoverChange={hoverChangeSpy} onHoverEnd={hoverEndSpy}>Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
 
     expect(checkbox).not.toHaveAttribute('data-hovered');
@@ -83,7 +110,7 @@ describe('Checkbox', () => {
   });
 
   it('should support focus ring', async () => {
-    let {getByRole} = render(<Checkbox className={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox buttonClassName={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>Test</Checkbox>);
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
@@ -133,7 +160,7 @@ describe('Checkbox', () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
     let onClickCapture = jest.fn();
-    let {getByRole} = render(<Checkbox className={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick} onClickCapture={onClickCapture}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox buttonClassName={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick} onClickCapture={onClickCapture}>Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
 
     expect(checkbox).not.toHaveAttribute('data-pressed');
@@ -155,7 +182,7 @@ describe('Checkbox', () => {
   it('should support press state with keyboard', async () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
-    let {getByRole} = render(<Checkbox className={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox buttonClassName={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick}>Test</Checkbox>);
     let checkbox = getByRole('checkbox').closest('label');
 
     expect(checkbox).not.toHaveAttribute('data-pressed');
@@ -181,70 +208,118 @@ describe('Checkbox', () => {
 
     expect(checkbox).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
-    expect(label).toHaveClass('disabled');
+    expect(findRoot(label)).toHaveAttribute('data-disabled', 'true');
+    expect(findRoot(label)).toHaveClass('disabled');
   });
 
   it('should support selected state', async () => {
     let onChange = jest.fn();
-    let {getByRole} = render(<Checkbox onChange={onChange} className={({isSelected}) => isSelected ? 'selected' : ''}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox onChange={onChange} buttonClassName={({isSelected}) => isSelected ? 'selected' : ''}>Test</Checkbox>);
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
     expect(checkbox).not.toBeChecked();
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
 
     await user.click(checkbox);
     expect(onChange).toHaveBeenLastCalledWith(true);
     expect(checkbox).toBeChecked();
     expect(label).toHaveAttribute('data-selected', 'true');
+    expect(findRoot(label)).toHaveAttribute('data-selected', 'true');
     expect(label).toHaveClass('selected');
 
     await user.click(checkbox);
     expect(onChange).toHaveBeenLastCalledWith(false);
     expect(checkbox).not.toBeChecked();
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
   });
 
   it('should support indeterminate state', () => {
-    let {getByRole} = render(<Checkbox isIndeterminate className={({isIndeterminate}) => isIndeterminate ? 'indeterminate' : ''}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox isIndeterminate buttonClassName={({isIndeterminate}) => isIndeterminate ? 'indeterminate' : ''}>Test</Checkbox>);
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
     expect(checkbox).toHaveProperty('indeterminate', true);
     expect(label).toHaveAttribute('data-indeterminate');
+    expect(findRoot(label)).toHaveAttribute('data-indeterminate');
     expect(label).toHaveClass('indeterminate');
   });
 
   it('should support read only state', () => {
-    let {getByRole} = render(<Checkbox isReadOnly className={({isReadOnly}) => isReadOnly ? 'readonly' : ''}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox isReadOnly buttonClassName={({isReadOnly}) => isReadOnly ? 'readonly' : ''}>Test</Checkbox>);
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
     expect(checkbox).toHaveAttribute('aria-readonly', 'true');
     expect(label).toHaveAttribute('data-readonly');
+    expect(findRoot(label)).toHaveAttribute('data-readonly');
     expect(label).toHaveClass('readonly');
   });
 
   it('should support invalid state', () => {
-    let {getByRole} = render(<Checkbox isInvalid className={({isInvalid}) => isInvalid ? 'invalid' : ''}>Test</Checkbox>);
+    let {getByRole} = render(<Checkbox isInvalid buttonClassName={({isInvalid}) => isInvalid ? 'invalid' : ''}>Test</Checkbox>);
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
     expect(checkbox).toHaveAttribute('aria-invalid', 'true');
     expect(label).toHaveAttribute('data-invalid', 'true');
+    expect(findRoot(label)).toHaveAttribute('data-invalid', 'true');
     expect(label).toHaveClass('invalid');
   });
 
-  it('should support required state', () => {
-    let {getByRole} = render(<Checkbox isRequired className={({isRequired}) => isRequired ? 'required' : ''}>Test</Checkbox>);
+  if (comp === 'CheckboxField') {
+    it('should support description', () => {
+      let {getByRole} = render(<Checkbox description="hello">Test</Checkbox>);
+      let checkbox = getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(checkbox.getAttribute('aria-describedby'))).toHaveTextContent('hello');
+    });
+
+    it('should update aria-describedby when changing description prop', () => {
+      let {getByRole, rerender} = render(<Checkbox>Test</Checkbox>);
+      let checkbox = getByRole('checkbox');
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+
+      rerender(<Checkbox description="hello">Test</Checkbox>);
+      expect(checkbox).toHaveAttribute('aria-describedby');
+
+      rerender(<Checkbox>Test</Checkbox>);
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+    });
+  }
+
+  it('should support required state', async () => {
+    let {getByRole} = render(
+      <Form>
+        <Checkbox isRequired buttonClassName={({isRequired}) => isRequired ? 'required' : ''}>Test</Checkbox>
+      </Form>
+    );
     let checkbox = getByRole('checkbox');
     let label = checkbox.closest('label');
 
     expect(checkbox).toHaveAttribute('required');
     expect(label).toHaveAttribute('data-required', 'true');
     expect(label).toHaveClass('required');
+    expect(findRoot(label)).toHaveAttribute('data-required', 'true');
+
+    if (comp === 'CheckboxField') {
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+      act(() => checkbox.form.requestSubmit());
+
+      expect(checkbox).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(checkbox.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    }
+
+    await user.click(label);
+
+    expect(checkbox).not.toHaveAttribute('aria-invalid');
+    expect(label).not.toHaveAttribute('data-invalid');
+    expect(findRoot(label)).not.toHaveAttribute('data-invalid');
+    expect(checkbox).not.toHaveAttribute('aria-describedby');
   });
 
   it('should support render props', async () => {
@@ -260,7 +335,7 @@ describe('Checkbox', () => {
   it('should support refs', () => {
     let ref = React.createRef();
     let {getByRole} = render(<Checkbox ref={ref}>Test</Checkbox>);
-    expect(ref.current).toBe(getByRole('checkbox').closest('.react-aria-Checkbox'));
+    expect(ref.current).toBe(findRoot(getByRole('checkbox')));
   });
 
   it('should support input ref', () => {
@@ -272,10 +347,11 @@ describe('Checkbox', () => {
   it('should support and merge input ref on context', () => {
     let inputRef = React.createRef();
     let contextInputRef = React.createRef();
+    let Context = comp === 'CheckboxField' ? CheckboxFieldContext : CheckboxContext;
     let {getByRole} = render(
-      <CheckboxContext.Provider value={{inputRef: contextInputRef}}>
+      <Context.Provider value={{inputRef: contextInputRef}}>
         <Checkbox inputRef={inputRef}>Test</Checkbox>
-      </CheckboxContext.Provider>
+      </Context.Provider>
     );
     expect(inputRef.current).toBe(getByRole('checkbox'));
     expect(contextInputRef.current).toBe(getByRole('checkbox'));
diff --git a/packages/react-aria-components/test/CheckboxGroup.test.js b/packages/react-aria-components/test/CheckboxGroup.test.js
index 15772d39ed6..688d0dc7dd6 100644
--- a/packages/react-aria-components/test/CheckboxGroup.test.js
+++ b/packages/react-aria-components/test/CheckboxGroup.test.js
@@ -11,30 +11,52 @@
  */
 
 import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
-import {Checkbox, CheckboxGroup, CheckboxGroupContext} from '../src/Checkbox';
+import {Checkbox as AriaCheckbox, CheckboxButton, CheckboxField, CheckboxGroup, CheckboxGroupContext} from '../src/Checkbox';
 import {FieldError} from '../src/FieldError';
 import {Label} from '../src/Label';
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-let TestCheckboxGroup = ({groupProps, checkboxProps}) => (
-  <CheckboxGroup {...groupProps}>
-    <Label>Test</Label>
-    <Checkbox {...checkboxProps} value="a">A</Checkbox>
-    <Checkbox {...checkboxProps} value="b">B</Checkbox>
-    <Checkbox {...checkboxProps} value="c">C</Checkbox>
-  </CheckboxGroup>
-);
+const CheckboxExample = forwardRef(function CheckboxExample(props, ref) {
+  return (
+    <CheckboxField {...props} ref={ref}>
+      <CheckboxButton
+        className={props.buttonClassName}
+        onHoverStart={props.onHoverStart}
+        onHoverEnd={props.onHoverEnd}
+        onHoverChange={props.onHoverChange}>
+        {props.children}
+      </CheckboxButton>
+      {props.description && <Text slot="description">{props.description}</Text>}
+      <FieldError />
+    </CheckboxField>
+  );
+});
 
-let renderGroup = (groupProps, checkboxProps) => render(<TestCheckboxGroup {...{groupProps, checkboxProps}} />);
+const CheckboxLegacy = forwardRef(function CheckboxLegacy(props, ref) {
+  return <AriaCheckbox {...props} ref={ref} className={props.className || props.buttonClassName} />;
+});
 
-describe('CheckboxGroup', () => {
+describe.each(['CheckboxField', 'Checkbox'])('CheckboxGroup with %s', (comp) => {
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  let Checkbox = comp === 'CheckboxField' ? CheckboxExample : CheckboxLegacy;
+  let findRoot = el => comp === 'CheckboxField' ? el.closest('label').parentElement : el.closest('label');
+  let TestCheckboxGroup = ({groupProps, checkboxProps}) => (
+    <CheckboxGroup {...groupProps}>
+      <Label>Test</Label>
+      <Checkbox {...checkboxProps} value="a">A</Checkbox>
+      <Checkbox {...checkboxProps} value="b">B</Checkbox>
+      <Checkbox {...checkboxProps} value="c">C</Checkbox>
+    </CheckboxGroup>
+  );
+
+  let renderGroup = (groupProps, checkboxProps) => render(<TestCheckboxGroup {...{groupProps, checkboxProps}} />);
+
   it('should render a checkbox group with default classes', () => {
     let {getByRole, getAllByRole} = renderGroup();
     let group = getByRole('group');
@@ -44,8 +66,7 @@ describe('CheckboxGroup', () => {
 
     let checkboxes = getAllByRole('checkbox');
     for (let checkbox of checkboxes) {
-      let label = checkbox.closest('label');
-      expect(label).toHaveAttribute('class', 'react-aria-Checkbox');
+      expect(findRoot(checkbox)).toHaveAttribute('class', `react-aria-${comp}`);
     }
   });
 
@@ -55,8 +76,7 @@ describe('CheckboxGroup', () => {
     expect(group).toHaveAttribute('class', 'group');
     let checkboxes = getAllByRole('checkbox');
     for (let checkbox of checkboxes) {
-      let label = checkbox.closest('label');
-      expect(label).toHaveAttribute('class', 'checkbox');
+      expect(findRoot(checkbox)).toHaveAttribute('class', 'checkbox');
     }
   });
 
@@ -91,7 +111,8 @@ describe('CheckboxGroup', () => {
 
     expect(checkbox).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
-    expect(label).toHaveClass('disabled');
+    expect(findRoot(checkbox)).toHaveAttribute('data-disabled', 'true');
+    expect(findRoot(checkbox)).toHaveClass('disabled');
   });
 
   it('should support disabled state on group', () => {
@@ -106,7 +127,8 @@ describe('CheckboxGroup', () => {
 
     expect(checkbox).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
-    expect(label).toHaveClass('disabled');
+    expect(findRoot(checkbox)).toHaveAttribute('data-disabled', 'true');
+    expect(findRoot(checkbox)).toHaveClass('disabled');
   });
 
   it('should support selected state', async () => {
@@ -123,26 +145,30 @@ describe('CheckboxGroup', () => {
     expect(onChange).toHaveBeenLastCalledWith(['a']);
     expect(checkboxes[0]).toBeChecked();
     expect(label).toHaveAttribute('data-selected', 'true');
-    expect(label).toHaveClass('selected');
+    expect(findRoot(checkboxes[0])).toHaveAttribute('data-selected', 'true');
+    expect(findRoot(checkboxes[0])).toHaveClass('selected');
 
     await user.click(checkboxes[0]);
     expect(onChange).toHaveBeenLastCalledWith([]);
     expect(checkboxes[0]).not.toBeChecked();
     expect(label).not.toHaveAttribute('data-selected');
-    expect(label).not.toHaveClass('selected');
+    expect(findRoot(checkboxes[0])).not.toHaveAttribute('data-selected');
+    expect(findRoot(checkboxes[0])).not.toHaveClass('selected');
   });
 
   it('should support read only state', () => {
     let className = ({isReadOnly}) => isReadOnly ? 'readonly' : '';
     let {getByRole, getAllByRole} = renderGroup({isReadOnly: true, className}, {className});
     let group = getByRole('group');
-    let label = getAllByRole('checkbox')[0].closest('label');
+    let checkbox = getAllByRole('checkbox')[0];
+    let label = checkbox.closest('label');
 
     expect(group).toHaveAttribute('data-readonly');
     expect(group).toHaveClass('readonly');
 
     expect(label).toHaveAttribute('data-readonly');
-    expect(label).toHaveClass('readonly');
+    expect(findRoot(checkbox)).toHaveAttribute('data-readonly');
+    expect(findRoot(checkbox)).toHaveClass('readonly');
   });
 
   it('should support validation state', () => {
@@ -156,7 +182,8 @@ describe('CheckboxGroup', () => {
     expect(group).toHaveClass('invalid');
 
     expect(label).toHaveAttribute('data-invalid', 'true');
-    expect(label).toHaveClass('invalid');
+    expect(findRoot(checkbox)).toHaveAttribute('data-invalid', 'true');
+    expect(findRoot(checkbox)).toHaveClass('invalid');
   });
 
   it('should support required state', () => {
@@ -170,14 +197,15 @@ describe('CheckboxGroup', () => {
     expect(group).toHaveClass('required');
 
     expect(label).toHaveAttribute('data-required', 'true');
-    expect(label).toHaveClass('required');
+    expect(findRoot(checkbox)).toHaveAttribute('data-required', 'true');
+    expect(findRoot(checkbox)).toHaveClass('required');
   });
 
   it('supports help text', () => {
     let {getByRole, getAllByRole} = render(
       <CheckboxGroup isInvalid>
         <Label>Test</Label>
-        <Checkbox value="a">A</Checkbox>
+        <Checkbox value="a" description="hello">A</Checkbox>
         <Text slot="description">Description</Text>
         <Text slot="errorMessage">Error</Text>
       </CheckboxGroup>
@@ -189,7 +217,7 @@ describe('CheckboxGroup', () => {
 
     let checkbox = getAllByRole('checkbox')[0];
     expect(checkbox).toHaveAttribute('aria-describedby');
-    expect(checkbox.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Error Description');
+    expect(checkbox.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe(comp === 'CheckboxField' ? 'hello Error Description' : 'Error Description');
   });
 
   it('should support render props', () => {
@@ -232,7 +260,7 @@ describe('CheckboxGroup', () => {
     expect(group).not.toHaveAttribute('aria-describedby');
     expect(group).not.toHaveAttribute('data-invalid');
     for (let checkbox of checkboxes) {
-      expect(checkbox.closest('.react-aria-Checkbox')).not.toHaveAttribute('data-invalid');
+      expect(findRoot(checkbox)).not.toHaveAttribute('data-invalid');
     }
 
     act(() => {getByTestId('form').checkValidity();});
@@ -242,14 +270,14 @@ describe('CheckboxGroup', () => {
     expect(group).toHaveAttribute('data-invalid');
 
     for (let checkbox of checkboxes) {
-      expect(checkbox.closest('.react-aria-Checkbox')).toHaveAttribute('data-invalid');
+      expect(findRoot(checkbox)).toHaveAttribute('data-invalid');
     }
 
     await user.click(checkboxes[0]);
     expect(group).not.toHaveAttribute('aria-describedby');
     expect(group).not.toHaveAttribute('data-invalid');
     for (let checkbox of checkboxes) {
-      expect(checkbox.closest('.react-aria-Checkbox')).not.toHaveAttribute('data-invalid');
+      expect(findRoot(checkbox)).not.toHaveAttribute('data-invalid');
     }
   });
 
diff --git a/packages/react-aria-components/test/GridList.test.js b/packages/react-aria-components/test/GridList.test.js
index 05a232aa7d7..27a5d5d9b46 100644
--- a/packages/react-aria-components/test/GridList.test.js
+++ b/packages/react-aria-components/test/GridList.test.js
@@ -11,8 +11,8 @@
  */
 
 import {act, fireEvent, mockClickDefault, pointerMap, render, setupIntersectionObserverMock, within} from '@react-spectrum/test-utils-internal';
+import {Checkbox as AriaCheckbox, CheckboxButton, CheckboxField} from '../src/Checkbox';
 import {Button} from '../src/Button';
-import {Checkbox} from '../src/Checkbox';
 import {Collection} from 'react-aria/Collection';
 import {Dialog, DialogTrigger} from '../src/Dialog';
 import {DropIndicator, useDragAndDrop} from '../src/useDragAndDrop';
@@ -29,11 +29,21 @@ import {Tag, TagGroup, TagList} from '../src/TagGroup';
 import userEvent from '@testing-library/user-event';
 import {Virtualizer} from '../src/Virtualizer';
 
+let Checkbox = ({comp}) => (
+  comp === 'CheckboxField'
+    ? (
+      <CheckboxField slot="selection">
+        <CheckboxButton />
+      </CheckboxField>
+    )
+    : <AriaCheckbox slot="selection" />
+);
+
 let TestGridList = ({listBoxProps, itemProps}) => (
   <GridList aria-label="Test" {...listBoxProps}>
-    <GridListItem {...itemProps} id="cat" textValue="Cat"><Checkbox slot="selection" /> Cat</GridListItem>
-    <GridListItem {...itemProps} id="dog" textValue="Dog"><Checkbox slot="selection" /> Dog</GridListItem>
-    <GridListItem {...itemProps} id="kangaroo" textValue="Kangaroo"><Checkbox slot="selection" /> Kangaroo</GridListItem>
+    <GridListItem {...itemProps} id="cat" textValue="Cat"><Checkbox slot="selection" comp={itemProps?.checkboxComponent} /> Cat</GridListItem>
+    <GridListItem {...itemProps} id="dog" textValue="Dog"><Checkbox slot="selection" comp={itemProps?.checkboxComponent} /> Dog</GridListItem>
+    <GridListItem {...itemProps} id="kangaroo" textValue="Kangaroo"><Checkbox slot="selection" comp={itemProps?.checkboxComponent} /> Kangaroo</GridListItem>
   </GridList>
 );
 
@@ -254,8 +264,8 @@ describe('GridList', () => {
     expect(row).not.toHaveClass('pressed');
   });
 
-  it('should support selection state', async () => {
-    let {getByRole} = renderGridList({selectionMode: 'multiple'}, {className: ({isSelected}) => isSelected ? 'selected' : ''});
+  it.each(['Checkbox', 'CheckboxField'])('should support selection state with %s', async (comp) => {
+    let {getByRole} = renderGridList({selectionMode: 'multiple'}, {checkboxComponent: comp, className: ({isSelected}) => isSelected ? 'selected' : ''});
     let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
 
     let row = gridListTester.rows[0];
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index 79af6b917d1..f12aece756d 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -16,30 +16,57 @@ import {Dialog, DialogTrigger} from '../src/Dialog';
 import {FieldError} from '../src/FieldError';
 import {Label} from '../src/Label';
 import {Modal} from '../src/Modal';
-import {Radio, RadioContext, RadioGroup, RadioGroupContext} from '../src/RadioGroup';
-import React from 'react';
+import {RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext, Radio as RadioLegacy} from '../src/RadioGroup';
+import React, {forwardRef} from 'react';
 import {Text} from '../src/Text';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
-let TestRadioGroup = ({groupProps, radioProps}) => (
-  <RadioGroup {...groupProps}>
-    <Label>Test</Label>
-    <Radio {...radioProps} value="a">A</Radio>
-    <Radio {...radioProps} value="b">B</Radio>
-    <Radio {...radioProps} value="c">C</Radio>
-  </RadioGroup>
-);
-
-let renderGroup = (groupProps, radioProps) => render(<TestRadioGroup {...{groupProps, radioProps}} />);
+const RadioFieldItem = forwardRef(function RadioFieldItem(props, ref) {
+  return (
+    <RadioField {...props} ref={ref}>
+      <RadioButton
+        className={props.buttonClassName}
+        onHoverStart={props.onHoverStart}
+        onHoverEnd={props.onHoverEnd}
+        onHoverChange={props.onHoverChange}>
+        {props.children}
+      </RadioButton>
+      {props.description && <Text slot="description">{props.description}</Text>}
+    </RadioField>
+  );
+});
 
-describe('RadioGroup', () => {
+describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
   let user;
   let testUtilUser = new User();
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  let Radio = comp === 'RadioGroup' ? RadioLegacy : RadioFieldItem;
+  let TestRadioGroupLegacy = ({groupProps, radioProps}) => (
+    <RadioGroup {...groupProps}>
+      <Label>Test</Label>
+      <Radio {...radioProps} className={radioProps?.className || radioProps?.buttonClassName} value="a">A</Radio>
+      <Radio {...radioProps} className={radioProps?.className || radioProps?.buttonClassName} value="b">B</Radio>
+      <Radio {...radioProps} className={radioProps?.className || radioProps?.buttonClassName} value="c">C</Radio>
+    </RadioGroup>
+  );
+
+  let TestRadioGroupField = ({groupProps, radioProps}) => (
+    <RadioGroup {...groupProps}>
+      <Label>Test</Label>
+      <RadioFieldItem {...radioProps} value="a">A</RadioFieldItem>
+      <RadioFieldItem {...radioProps} value="b">B</RadioFieldItem>
+      <RadioFieldItem {...radioProps} value="c">C</RadioFieldItem>
+    </RadioGroup>
+  );
+
+  let TestRadioGroup = comp === 'RadioField' ? TestRadioGroupField : TestRadioGroupLegacy;
+  let renderGroup = (groupProps, radioProps) => render(<TestRadioGroup {...{groupProps, radioProps}} />);
+  let findRoot = el => comp === 'RadioField' ? el.closest('label').parentElement : el.closest('label');
+
   it('should render a radio group with default classes', () => {
     let {getByRole, getAllByRole} = renderGroup();
     let group = getByRole('radiogroup');
@@ -49,8 +76,8 @@ describe('RadioGroup', () => {
 
     let radios = getAllByRole('radio');
     for (let radio of radios) {
-      let label = radio.closest('label');
-      expect(label).toHaveAttribute('class', 'react-aria-Radio');
+      let label = findRoot(radio);
+      expect(label).toHaveAttribute('class', comp === 'RadioField' ? 'react-aria-RadioField' : 'react-aria-Radio');
     }
   });
 
@@ -60,7 +87,7 @@ describe('RadioGroup', () => {
     expect(group).toHaveAttribute('class', 'group');
     let radios = getAllByRole('radio');
     for (let radio of radios) {
-      let label = radio.closest('label');
+      let label = findRoot(radio);
       expect(label).toHaveAttribute('class', 'radio');
     }
   });
@@ -70,7 +97,7 @@ describe('RadioGroup', () => {
     let group = getByRole('radiogroup');
     expect(group).toHaveAttribute('data-foo', 'bar');
     for (let radio of getAllByRole('radio')) {
-      expect(radio.closest('label')).toHaveAttribute('data-test', 'test');
+      expect(findRoot(radio)).toHaveAttribute('data-test', 'test');
     }
   });
 
@@ -78,12 +105,12 @@ describe('RadioGroup', () => {
     let {getAllByRole, getByRole} = renderGroup(
       {render: props => <div {...props} data-custom="true" />},
       // eslint-disable-next-line jsx-a11y/label-has-associated-control
-      {render: props => <label {...props} data-custom="true" />}
+      {render: props => comp === 'RadioField' ? <div {...props} data-custom="true" /> : <label {...props} data-custom="true" />}
     );
     let group = getByRole('radiogroup');
     expect(group).toHaveAttribute('data-custom', 'true');
     for (let radio of getAllByRole('radio')) {
-      expect(radio.closest('label')).toHaveAttribute('data-custom', 'true');
+      expect(findRoot(radio)).toHaveAttribute('data-custom', 'true');
     }
   });
 
@@ -126,12 +153,13 @@ describe('RadioGroup', () => {
   });
 
   it('should support slot', () => {
-    let {getByRole, getAllByText} = render(
+    let ItemContext = comp === 'RadioField' ? RadioFieldContext : RadioContext;
+    let {getByRole, getAllByRole} = render(
       <RadioGroupContext.Provider
         value={{slots: {test: {'aria-label': 'test'}}}}>
-        <RadioContext.Provider value={{'data-test': 'test'}}>
+        <ItemContext.Provider value={{'data-test': 'test'}}>
           <TestRadioGroup groupProps={{slot: 'test'}} />
-        </RadioContext.Provider>
+        </ItemContext.Provider>
       </RadioGroupContext.Provider>
     );
 
@@ -139,10 +167,9 @@ describe('RadioGroup', () => {
     expect(group).toHaveAttribute('slot', 'test');
     expect(group).toHaveAttribute('aria-label', 'test');
 
-    // label elements were not being found with getAllByRole('label')
-    let labels = getAllByText(/A|B|C/i);
-    for (let label of labels) {
-      expect(label).toHaveAttribute('data-test', 'test');
+    let radios = getAllByRole('radio');
+    for (let radio of radios) {
+      expect(findRoot(radio)).toHaveAttribute('data-test', 'test');
     }
   });
 
@@ -150,7 +177,7 @@ describe('RadioGroup', () => {
     let hoverStartSpy = jest.fn();
     let hoverChangeSpy = jest.fn();
     let hoverEndSpy = jest.fn();
-    let {getAllByRole} = renderGroup({}, {className: ({isHovered}) => isHovered ? 'hover' : '', onHoverStart: hoverStartSpy, onHoverChange: hoverChangeSpy, onHoverEnd: hoverEndSpy});
+    let {getAllByRole} = renderGroup({}, {buttonClassName: ({isHovered}) => isHovered ? 'hover' : '', onHoverStart: hoverStartSpy, onHoverChange: hoverChangeSpy, onHoverEnd: hoverEndSpy});
     let radio = getAllByRole('radio')[0].closest('label');
 
     expect(radio).not.toHaveAttribute('data-hovered');
@@ -170,7 +197,7 @@ describe('RadioGroup', () => {
   });
 
   it('should support focus ring', async () => {
-    let {getAllByRole} = renderGroup({}, {className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
+    let {getAllByRole} = renderGroup({}, {buttonClassName: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
     let radio = getAllByRole('radio')[0];
     let label = radio.closest('label');
 
@@ -191,7 +218,7 @@ describe('RadioGroup', () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
     let onClickCapture = jest.fn();
-    let {getAllByRole} = renderGroup({}, {className: ({isPressed}) => isPressed ? 'pressed' : '', onClick, onPress, onClickCapture});
+    let {getAllByRole} = renderGroup({}, {buttonClassName: ({isPressed}) => isPressed ? 'pressed' : '', onClick, onPress, onClickCapture});
     let radio = getAllByRole('radio')[0].closest('label');
 
     expect(radio).not.toHaveAttribute('data-pressed');
@@ -213,7 +240,7 @@ describe('RadioGroup', () => {
   it('should support press state with keyboard', async () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
-    let {getAllByRole} = renderGroup({}, {className: ({isPressed}) => isPressed ? 'pressed' : '', onClick, onPress});
+    let {getAllByRole} = renderGroup({}, {buttonClassName: ({isPressed}) => isPressed ? 'pressed' : '', onClick, onPress});
     let radio = getAllByRole('radio')[0].closest('label');
 
     expect(radio).not.toHaveAttribute('data-pressed');
@@ -233,12 +260,13 @@ describe('RadioGroup', () => {
   });
 
   it('should support disabled state on radio', () => {
-    let {getAllByRole} = renderGroup({}, {isDisabled: true, className: ({isDisabled}) => isDisabled ? 'disabled' : ''});
+    let {getAllByRole} = renderGroup({}, {isDisabled: true, buttonClassName: ({isDisabled}) => isDisabled ? 'disabled' : ''});
     let radio = getAllByRole('radio')[0];
     let label = radio.closest('label');
 
     expect(radio).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
+    expect(findRoot(label)).toHaveAttribute('data-disabled', 'true');
     expect(label).toHaveClass('disabled');
   });
 
@@ -254,24 +282,27 @@ describe('RadioGroup', () => {
 
     expect(radio).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
-    expect(label).toHaveClass('disabled');
+    expect(findRoot(label)).toHaveClass('disabled');
+    expect(findRoot(label)).toHaveAttribute('data-disabled', 'true');
   });
 
   it('should support selected state', async () => {
     let onChange = jest.fn();
-    let {getByRole} = renderGroup({onChange}, {className: ({isSelected}) => isSelected ? 'selected' : ''});
+    let {getByRole} = renderGroup({onChange}, {buttonClassName: ({isSelected}) => isSelected ? 'selected' : ''});
     let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
     let radios = radioGroupTester.radios;
     let label = radios[0].closest('label');
 
     expect(radioGroupTester.selectedRadio).toBeFalsy();
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
 
     await radioGroupTester.triggerRadio({radio: radios[0]});
     expect(onChange).toHaveBeenLastCalledWith('a');
     expect(radioGroupTester.selectedRadio).toBe(radios[0]);
     expect(label).toHaveAttribute('data-selected', 'true');
+    expect(findRoot(label)).toHaveAttribute('data-selected', 'true');
     expect(label).toHaveClass('selected');
 
     await radioGroupTester.triggerRadio({radio: radios[1]});
@@ -279,6 +310,7 @@ describe('RadioGroup', () => {
     expect(radios[0]).not.toBeChecked();
     expect(radioGroupTester.selectedRadio).toBe(radios[1]);
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
   });
 
@@ -292,7 +324,8 @@ describe('RadioGroup', () => {
     expect(group).toHaveClass('readonly');
 
     expect(label).toHaveAttribute('data-readonly');
-    expect(label).toHaveClass('readonly');
+    expect(findRoot(label)).toHaveAttribute('data-readonly');
+    expect(findRoot(label)).toHaveClass('readonly');
   });
 
   it('should support invalid state', () => {
@@ -306,7 +339,8 @@ describe('RadioGroup', () => {
     expect(group).toHaveClass('invalid');
 
     expect(label).toHaveAttribute('data-invalid', 'true');
-    expect(label).toHaveClass('invalid');
+    expect(findRoot(label)).toHaveAttribute('data-invalid', 'true');
+    expect(findRoot(label)).toHaveClass('invalid');
   });
 
   it('should support required state', () => {
@@ -320,7 +354,8 @@ describe('RadioGroup', () => {
     expect(group).toHaveClass('required');
 
     expect(label).toHaveAttribute('data-required', 'true');
-    expect(label).toHaveClass('required');
+    expect(findRoot(label)).toHaveAttribute('data-required', 'true');
+    expect(findRoot(label)).toHaveClass('required');
   });
 
   it('should support orientation', async () => {
@@ -342,7 +377,7 @@ describe('RadioGroup', () => {
     let {getByRole, getAllByRole} = render(
       <RadioGroup isInvalid>
         <Label>Test</Label>
-        <Radio value="a">A</Radio>
+        <Radio value="a" description="hello">A</Radio>
         <Text slot="description">Description</Text>
         <Text slot="errorMessage">Error</Text>
       </RadioGroup>
@@ -354,11 +389,11 @@ describe('RadioGroup', () => {
 
     let radio = getAllByRole('radio')[0];
     expect(radio).toHaveAttribute('aria-describedby');
-    expect(radio.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Error Description');
+    expect(radio.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe(comp === 'RadioField' ? 'hello Error Description' : 'Error Description');
   });
 
   it('should not navigate within the group using Tab', async () => {
-    let {getAllByRole} = renderGroup({}, {className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
+    let {getAllByRole} = renderGroup({}, {buttonClassName: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
     let radios = getAllByRole('radio');
     let labelA = radios[0].closest('label');
     let labelB = radios[1].closest('label');
@@ -397,7 +432,7 @@ describe('RadioGroup', () => {
           <Dialog role="alertdialog" data-test="dialog">
             {({close}) => (
               <>
-                <TestRadioGroup radioProps={{className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />
+                <TestRadioGroup radioProps={{buttonClassName: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />
                 <Button onPress={close}>Close</Button>
               </>
             )}
@@ -468,7 +503,7 @@ describe('RadioGroup', () => {
     );
     let radio = getAllByTestId('radio-a');
     expect(radio).toHaveLength(1);
-    expect(radio[0].nodeName).toBe('LABEL');
+    expect(radio[0].nodeName).toBe(comp === 'RadioField' ? 'DIV' : 'LABEL');
     let group = getAllByRole('radiogroup');
     expect(group).toHaveLength(1);
     expect(group[0]).toHaveAttribute('data-testid', 'radio-group');
@@ -586,7 +621,7 @@ describe('RadioGroup', () => {
       </RadioGroup>
     );
     expect(groupRef.current).toBe(getByRole('radiogroup'));
-    expect(radioRef.current).toBe(getByRole('radio').closest('.react-aria-Radio'));
+    expect(radioRef.current).toBe(findRoot(getByRole('radio')));
   });
 
   it('should support input ref', () => {
@@ -604,12 +639,13 @@ describe('RadioGroup', () => {
   it('should support and merge input ref on context', () => {
     let inputRef = React.createRef();
     let contextInputRef = React.createRef();
+    let Context = comp === 'RadioField' ? RadioFieldContext : RadioContext;
     let {getByRole} = render(
       <RadioGroup>
         <Label>Test</Label>
-        <RadioContext.Provider value={{inputRef: contextInputRef}}>
+        <Context.Provider value={{inputRef: contextInputRef}}>
           <Radio inputRef={inputRef} value="a">A</Radio>
-        </RadioContext.Provider>
+        </Context.Provider>
       </RadioGroup>
     );
     let radio = getByRole('radio');
diff --git a/packages/react-aria-components/test/Switch.test.js b/packages/react-aria-components/test/Switch.test.js
index 2b1d21f5985..cc1bbce8031 100644
--- a/packages/react-aria-components/test/Switch.test.js
+++ b/packages/react-aria-components/test/Switch.test.js
@@ -10,41 +10,68 @@
  * governing permissions and limitations under the License.
  */
 
-import {pointerMap, render} from '@react-spectrum/test-utils-internal';
-import React from 'react';
-import {Switch, SwitchContext} from '../src/Switch';
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {Switch as AriaSwitch, SwitchButton, SwitchContext, SwitchField, SwitchFieldContext} from '../src/Switch';
+import {FieldError} from '../src/FieldError';
+import {Form} from '../src/Form';
+import React, {forwardRef} from 'react';
+import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-describe('Switch', () => {
+const SwitchExample = forwardRef(function SwitchExample(props, ref) {
+  return (
+    <SwitchField {...props} ref={ref}>
+      <SwitchButton
+        className={props.buttonClassName}
+        onHoverStart={props.onHoverStart}
+        onHoverEnd={props.onHoverEnd}
+        onHoverChange={props.onHoverChange}>
+        {props.children}
+      </SwitchButton>
+      {props.description && <Text slot="description">{props.description}</Text>}
+      <FieldError />
+    </SwitchField>
+  );
+});
+
+const SwitchLegacy = forwardRef(function SwitchLegacy(props, ref) {
+  return <AriaSwitch {...props} ref={ref} className={props.className || props.buttonClassName} />;
+});
+
+describe.each(['Switch', 'SwitchField'])('%s', (comp) => {
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
   });
+
+  let Switch = comp === 'SwitchField' ? SwitchExample : SwitchLegacy;
+  let findRoot = el => comp === 'SwitchField' ? el.closest('label').parentElement : el.closest('label');
+
   it('should render a s with default class', () => {
     let {getByRole} = render(<Switch>Test</Switch>);
     let s = getByRole('switch').closest('label');
-    expect(s).toHaveAttribute('class', 'react-aria-Switch');
+    expect(findRoot(s)).toHaveAttribute('class', `react-aria-${comp}`);
   });
 
   it('should render a s with custom class', () => {
     let {getByRole} = render(<Switch className="test">Test</Switch>);
     let s = getByRole('switch').closest('label');
-    expect(s).toHaveAttribute('class', 'test');
+    expect(findRoot(s)).toHaveAttribute('class', 'test');
   });
 
   it('should support data- props on label element', () => {
     let {getByRole} = render(<Switch data-foo="bar" >Test</Switch>);
     let s = getByRole('switch');
     let label = s.closest('label');
-    expect(label).toHaveAttribute('data-foo', 'bar');
+    expect(findRoot(label)).toHaveAttribute('data-foo', 'bar');
     expect(s).not.toHaveAttribute('data-foo');
   });
 
   it('should support custom render function', () => {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    let {getByRole} = render(<Switch render={props => <label {...props} data-custom="bar" />}>Test</Switch>);
+    let {getByRole} = render(<Switch render={props => comp === 'SwitchField' ? <div {...props} data-custom="bar" /> : <label {...props} data-custom="bar" />}>Test</Switch>);
     let checkbox = getByRole('switch').closest('label');
-    expect(checkbox).toHaveAttribute('data-custom', 'bar');
+    expect(findRoot(checkbox)).toHaveAttribute('data-custom', 'bar');
   });
 
   it('should support render props', async () => {
@@ -63,14 +90,15 @@ describe('Switch', () => {
   });
 
   it('should support slot', () => {
+    let Context = comp === 'SwitchField' ? SwitchFieldContext : SwitchContext;
     let {getByRole} = render(
-      <SwitchContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
+      <Context.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
         <Switch slot="test">Test</Switch>
-      </SwitchContext.Provider>
+      </Context.Provider>
     );
 
     let s = getByRole('switch');
-    expect(s.closest('label')).toHaveAttribute('slot', 'test');
+    expect(findRoot(s)).toHaveAttribute('slot', 'test');
     expect(s).toHaveAttribute('aria-label', 'test');
   });
 
@@ -78,7 +106,7 @@ describe('Switch', () => {
     let hoverStartSpy = jest.fn();
     let hoverChangeSpy = jest.fn();
     let hoverEndSpy = jest.fn();
-    let {getByRole} = render(<Switch className={({isHovered}) => isHovered ? 'hover' : ''} onHoverStart={hoverStartSpy} onHoverChange={hoverChangeSpy} onHoverEnd={hoverEndSpy}>Test</Switch>);
+    let {getByRole} = render(<Switch buttonClassName={({isHovered}) => isHovered ? 'hover' : ''} onHoverStart={hoverStartSpy} onHoverChange={hoverChangeSpy} onHoverEnd={hoverEndSpy}>Test</Switch>);
     let s = getByRole('switch').closest('label');
 
     expect(s).not.toHaveAttribute('data-hovered');
@@ -98,7 +126,7 @@ describe('Switch', () => {
   });
 
   it('should support focus ring', async () => {
-    let {getByRole} = render(<Switch className={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>Test</Switch>);
+    let {getByRole} = render(<Switch buttonClassName={({isFocusVisible}) => isFocusVisible ? 'focus' : ''}>Test</Switch>);
     let s = getByRole('switch');
     let label = s.closest('label');
 
@@ -149,7 +177,7 @@ describe('Switch', () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
     let onClickCapture = jest.fn();
-    let {getByRole} = render(<Switch className={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick} onClickCapture={onClickCapture}>Test</Switch>);
+    let {getByRole} = render(<Switch buttonClassName={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick} onClickCapture={onClickCapture}>Test</Switch>);
     let s = getByRole('switch').closest('label');
 
     expect(s).not.toHaveAttribute('data-pressed');
@@ -171,7 +199,7 @@ describe('Switch', () => {
   it('should support press state with keyboard', async () => {
     let onPress = jest.fn();
     let onClick = jest.fn();
-    let {getByRole} = render(<Switch className={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick}>Test</Switch>);
+    let {getByRole} = render(<Switch buttonClassName={({isPressed}) => isPressed ? 'pressed' : ''} onPress={onPress} onClick={onClick}>Test</Switch>);
     let s = getByRole('switch').closest('label');
 
     expect(s).not.toHaveAttribute('data-pressed');
@@ -197,39 +225,44 @@ describe('Switch', () => {
 
     expect(s).toBeDisabled();
     expect(label).toHaveAttribute('data-disabled', 'true');
-    expect(label).toHaveClass('disabled');
+    expect(findRoot(label)).toHaveAttribute('data-disabled', 'true');
+    expect(findRoot(label)).toHaveClass('disabled');
   });
 
   it('should support selected state', async () => {
     let onChange = jest.fn();
-    let {getByRole} = render(<Switch onChange={onChange} className={({isSelected}) => isSelected ? 'selected' : ''}>Test</Switch>);
+    let {getByRole} = render(<Switch onChange={onChange} buttonClassName={({isSelected}) => isSelected ? 'selected' : ''}>Test</Switch>);
     let s = getByRole('switch');
     let label = s.closest('label');
 
     expect(s).not.toBeChecked();
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
 
     await user.click(s);
     expect(onChange).toHaveBeenLastCalledWith(true);
     expect(s).toBeChecked();
     expect(label).toHaveAttribute('data-selected', 'true');
+    expect(findRoot(label)).toHaveAttribute('data-selected');
     expect(label).toHaveClass('selected');
 
     await user.click(s);
     expect(onChange).toHaveBeenLastCalledWith(false);
     expect(s).not.toBeChecked();
     expect(label).not.toHaveAttribute('data-selected');
+    expect(findRoot(label)).not.toHaveAttribute('data-selected');
     expect(label).not.toHaveClass('selected');
   });
 
   it('should support read only state', () => {
-    let {getByRole} = render(<Switch isReadOnly className={({isReadOnly}) => isReadOnly ? 'readonly' : ''}>Test</Switch>);
+    let {getByRole} = render(<Switch isReadOnly buttonClassName={({isReadOnly}) => isReadOnly ? 'readonly' : ''}>Test</Switch>);
     let s = getByRole('switch');
     let label = s.closest('label');
 
     expect(s).toHaveAttribute('aria-readonly', 'true');
     expect(label).toHaveAttribute('data-readonly');
+    expect(findRoot(label)).toHaveAttribute('data-readonly');
     expect(label).toHaveClass('readonly');
   });
 
@@ -239,13 +272,13 @@ describe('Switch', () => {
     );
     let outerEl = getAllByTestId('switch-test');
     expect(outerEl).toHaveLength(1);
-    expect(outerEl[0]).toHaveClass('react-aria-Switch');
+    expect(outerEl[0]).toHaveClass(`react-aria-${comp}`);
   });
 
   it('should support refs', () => {
     let ref = React.createRef();
     let {getByRole} = render(<Switch ref={ref}>Test</Switch>);
-    expect(ref.current).toBe(getByRole('switch').closest('.react-aria-Switch'));
+    expect(ref.current).toBe(findRoot(getByRole('switch')));
   });
 
   it('should support input ref', () => {
@@ -257,10 +290,11 @@ describe('Switch', () => {
   it('should support and merge input ref on context', () => {
     let inputRef = React.createRef();
     let contextInputRef = React.createRef();
+    let Context = comp === 'SwitchField' ? SwitchFieldContext : SwitchContext;
     let {getByRole} = render(
-      <SwitchContext.Provider value={{inputRef: contextInputRef}}>
+      <Context.Provider value={{inputRef: contextInputRef}}>
         <Switch inputRef={inputRef}>Test</Switch>
-      </SwitchContext.Provider>
+      </Context.Provider>
     );
     expect(inputRef.current).toBe(getByRole('switch'));
     expect(contextInputRef.current).toBe(getByRole('switch'));
@@ -271,4 +305,58 @@ describe('Switch', () => {
     let input = getByRole('switch');
     expect(input).toHaveAttribute('form', 'test');
   });
+
+  if (comp === 'SwitchField') {
+    it('should support description', () => {
+      let {getByRole} = render(<Switch description="hello">Test</Switch>);
+      let checkbox = getByRole('switch');
+      expect(checkbox).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(checkbox.getAttribute('aria-describedby'))).toHaveTextContent('hello');
+    });
+
+    it('should update aria-describedby when changing description prop', () => {
+      let {getByRole, rerender} = render(<Switch>Test</Switch>);
+      let checkbox = getByRole('switch');
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+
+      rerender(<Switch description="hello">Test</Switch>);
+      expect(checkbox).toHaveAttribute('aria-describedby');
+
+      rerender(<Switch>Test</Switch>);
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+    });
+
+    it('should support required state', async () => {
+      let {getByRole} = render(
+        <Form>
+          <Switch isRequired buttonClassName={({isRequired}) => isRequired ? 'required' : ''}>Test</Switch>
+        </Form>
+      );
+      let checkbox = getByRole('switch');
+      let label = checkbox.closest('label');
+      let field = label.parentElement;
+
+      expect(checkbox).toHaveAttribute('required');
+      expect(label).toHaveAttribute('data-required', 'true');
+      expect(label).toHaveClass('required');
+      expect(field).toHaveAttribute('data-required', 'true');
+
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+      act(() => checkbox.form.requestSubmit());
+
+      expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+      expect(label).toHaveAttribute('data-invalid', 'true');
+      expect(field).toHaveAttribute('data-invalid', 'true');
+
+      expect(checkbox).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(checkbox.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+      await user.click(label);
+
+      expect(checkbox).not.toHaveAttribute('aria-invalid');
+      expect(label).not.toHaveAttribute('data-invalid');
+      expect(field).not.toHaveAttribute('data-invalid');
+      expect(checkbox).not.toHaveAttribute('aria-describedby');
+    });
+  }
 });
diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js
index 2619bd546ba..718817c850d 100644
--- a/packages/react-aria-components/test/Table.test.js
+++ b/packages/react-aria-components/test/Table.test.js
@@ -27,7 +27,7 @@ import {
   useTableOptions
 } from '../src/Table';
 
-import {Checkbox} from '../src/Checkbox';
+import {Checkbox, CheckboxButton, CheckboxField} from '../src/Checkbox';
 import {Collection} from 'react-aria/Collection';
 import {composeStories} from '@storybook/react';
 import {DataTransfer, DragEvent} from 'react-aria/test/dnd/mocks';
@@ -102,7 +102,7 @@ function MyTableHeader({columns, children, ...otherProps}) {
   );
 }
 
-function MyRow({id, columns, children, ...otherProps}) {
+function MyRow({id, columns, children, checkboxComponent, ...otherProps}) {
   let {selectionBehavior, allowsDragging} = useTableOptions();
 
   return (
@@ -114,7 +114,7 @@ function MyRow({id, columns, children, ...otherProps}) {
       )}
       {selectionBehavior === 'toggle' && (
         <Cell>
-          <MyCheckbox />
+          <MyCheckbox comp={checkboxComponent} />
         </Cell>
       )}
       <Collection items={columns}>
@@ -124,7 +124,15 @@ function MyRow({id, columns, children, ...otherProps}) {
   );
 }
 
-function MyCheckbox() {
+function MyCheckbox({comp}) {
+  if (comp === 'CheckboxField') {
+    return (
+      <CheckboxField slot="selection">
+        <CheckboxButton />
+      </CheckboxField>
+    );
+  }
+
   return (
     <Checkbox slot="selection">
       {({isIndeterminate}) => (
@@ -391,9 +399,10 @@ describe('Table', () => {
     }
   });
 
-  it('should render checkboxes for selection', async () => {
+  it.each(['Checkbox', 'CheckboxField'])('should render checkboxes for selection using %s', async (comp) => {
     let {getAllByRole} = renderTable({
-      tableProps: {selectionMode: 'multiple'}
+      tableProps: {selectionMode: 'multiple'},
+      rowProps: {checkboxComponent: comp}
     });
 
     for (let row of getAllByRole('row')) {
diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx
index 434ac46e58a..3892774265f 100644
--- a/packages/react-aria-components/test/Tree.test.tsx
+++ b/packages/react-aria-components/test/Tree.test.tsx
@@ -13,7 +13,7 @@
 import {act, fireEvent, mockClickDefault, pointerMap, render, setupIntersectionObserverMock, within} from '@react-spectrum/test-utils-internal';
 import {AriaTreeTests} from './AriaTree.test-util';
 import {Button} from '../src/Button';
-import {Checkbox} from '../src/Checkbox';
+import {Checkbox, CheckboxButton, CheckboxField} from '../src/Checkbox';
 import {Collection} from 'react-aria/Collection';
 import {composeStories} from '@storybook/react';
 // @ts-ignore
@@ -46,7 +46,13 @@ let StaticTreeItem = (props) => {
         {({isExpanded, hasChildItems, selectionMode, selectionBehavior}) => (
           <>
             {(selectionMode !== 'none' || props.href != null) && selectionBehavior === 'toggle' && (
-              <Checkbox slot="selection" />
+              props.checkboxComponent === 'CheckboxField'
+                ? (
+                  <CheckboxField slot="selection">
+                    <CheckboxButton />
+                  </CheckboxField>
+                )
+                : <Checkbox slot="selection" />
             )}
             {hasChildItems && <Button slot="chevron">{isExpanded ? '⏷' : '⏵'}</Button>}
             <Text>{props.title || props.children}</Text>
@@ -440,8 +446,8 @@ describe('Tree', () => {
     expect(rows[16]).toHaveAttribute('aria-setsize', '1');
   });
 
-  it('should render checkboxes for selection', async () => {
-    let {getByRole, getAllByRole} = render(<StaticTree treeProps={{selectionMode: 'single'}} rowProps={{href: 'https://google.com'}} />);
+  it.each(['Checkbox', 'CheckboxField'])('should render checkboxes for selection using %s', async (comp) => {
+    let {getByRole, getAllByRole} = render(<StaticTree treeProps={{selectionMode: 'single'}} rowProps={{href: 'https://google.com', checkboxComponent: comp}} />);
     let tree = getByRole('treegrid');
     expect(tree).not.toHaveAttribute('aria-multiselectable');
 
diff --git a/packages/react-aria/src/checkbox/useCheckbox.ts b/packages/react-aria/src/checkbox/useCheckbox.ts
index 6180b322300..fdc7b6ea02d 100644
--- a/packages/react-aria/src/checkbox/useCheckbox.ts
+++ b/packages/react-aria/src/checkbox/useCheckbox.ts
@@ -11,13 +11,10 @@
  */
 
 import {AriaToggleProps, useToggle} from '../toggle/useToggle';
-import {InputDOMProps, RefObject, ValidationResult} from '@react-types/shared';
+import {DOMAttributesWithRef, InputDOMProps, RefObject, ValidationResult} from '@react-types/shared';
 import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react';
 import {mergeProps} from '../utils/mergeProps';
-import {privateValidationStateProp, useFormValidationState} from 'react-stately/private/form/useFormValidationState';
 import {ToggleProps, ToggleState} from 'react-stately/useToggleState';
-import {useFormValidation} from '../form/useFormValidation';
-import {usePress} from '../interactions/usePress';
 
 export interface CheckboxProps extends ToggleProps {
   /**
@@ -34,6 +31,10 @@ export interface CheckboxAria extends ValidationResult {
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the checkbox is selected. */
   isSelected: boolean,
   /** Whether the checkbox is in a pressed state. */
@@ -53,17 +54,9 @@ export interface CheckboxAria extends ValidationResult {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement | null>): CheckboxAria {
-  // Create validation state here because it doesn't make sense to add to general useToggleState.
-  let validationState = useFormValidationState({...props, value: state.isSelected});
-  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
-  let {labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
-    ...props,
-    isInvalid
-  }, state, inputRef);
+  let {labelProps, inputProps, descriptionProps, errorMessageProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid, validationErrors, validationDetails} = useToggle(props, state, inputRef);
 
-  useFormValidation(props, validationState, inputRef);
-
-  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;
+  let {isIndeterminate} = props;
   useEffect(() => {
     // indeterminate is a property, but it can only be set via javascript
     // https://css-tricks.com/indeterminate-checkboxes/
@@ -72,36 +65,18 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     }
   });
 
-  // Reset validation state on label press for checkbox with a hidden input.
-  let {pressProps} = usePress({
-    isDisabled: isDisabled || isReadOnly,
-    onPress() {
-      // @ts-expect-error
-      let {[privateValidationStateProp]: groupValidationState} = props;
-
-      let {commitValidation} = groupValidationState
-      ? groupValidationState
-      : validationState;
-
-      commitValidation();
-    }
-  });
-
   return {
     labelProps: mergeProps(
       labelProps,
-      pressProps,
       useMemo(() => ({
         // Prevent label from being focused when mouse down on it.
         // Note, this does not prevent the input from being focused in the `click` event.
         onMouseDown: e => e.preventDefault()
-      }), [])),
-    inputProps: {
-      ...inputProps,
-      checked: isSelected,
-      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
-      required: isRequired && validationBehavior === 'native'
-    },
+      }), [])
+    ),
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
     isSelected,
     isPressed,
     isDisabled,
diff --git a/packages/react-aria/src/checkbox/useCheckboxGroupItem.ts b/packages/react-aria/src/checkbox/useCheckboxGroupItem.ts
index d9a5615b46f..24a7407e9bc 100644
--- a/packages/react-aria/src/checkbox/useCheckboxGroupItem.ts
+++ b/packages/react-aria/src/checkbox/useCheckboxGroupItem.ts
@@ -100,7 +100,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     inputProps: {
       ...res.inputProps,
       'aria-describedby': [
-        props['aria-describedby'],
+        res.inputProps['aria-describedby'],
         state.isInvalid ? errorMessageId : null,
         descriptionId
       ].filter(Boolean).join(' ') || undefined
diff --git a/packages/react-aria/src/radio/useRadio.ts b/packages/react-aria/src/radio/useRadio.ts
index c7ab30f7783..3bdb69b32b9 100644
--- a/packages/react-aria/src/radio/useRadio.ts
+++ b/packages/react-aria/src/radio/useRadio.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, FocusableProps, PressEvents, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributesWithRef, DOMProps, FocusableProps, PressEvents, RefObject} from '@react-types/shared';
 import {filterDOMProps} from '../utils/filterDOMProps';
 import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode, useMemo} from 'react';
 import {mergeProps} from '../utils/mergeProps';
@@ -20,6 +20,7 @@ import {useFocusable} from '../interactions/useFocusable';
 import {useFormReset} from '../utils/useFormReset';
 import {useFormValidation} from '../form/useFormValidation';
 import {usePress} from '../interactions/usePress';
+import {useSlotId2} from '../utils/useSlot';
 
 export interface RadioProps extends FocusableProps {
   /**
@@ -45,6 +46,8 @@ export interface RadioAria {
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the radio is disabled. */
   isDisabled: boolean,
   /** Whether the radio is currently selected. */
@@ -136,6 +139,8 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   useFormReset(ref, state.defaultSelectedValue, state.setSelectedValue);
   useFormValidation({validationBehavior}, state, ref);
 
+  let descriptionProps = useSlotId2();
+
   return {
     labelProps: mergeProps(
       labelProps,
@@ -159,10 +164,12 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
       onChange,
       'aria-describedby': [
         props['aria-describedby'],
+        descriptionProps.id,
         state.isInvalid ? errorMessageId : null,
         descriptionId
       ].filter(Boolean).join(' ') || undefined
     }),
+    descriptionProps,
     isDisabled,
     isSelected: checked,
     isPressed: isPressed || isLabelPressed
diff --git a/packages/react-aria/src/switch/useSwitch.ts b/packages/react-aria/src/switch/useSwitch.ts
index 2ced33e4715..a8a7f291544 100644
--- a/packages/react-aria/src/switch/useSwitch.ts
+++ b/packages/react-aria/src/switch/useSwitch.ts
@@ -10,46 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, RefObject} from '@react-types/shared';
-import {InputHTMLAttributes, LabelHTMLAttributes, ReactNode} from 'react';
-import {ToggleState} from 'react-stately/useToggleState';
-import {useToggle} from '../toggle/useToggle';
+import {AriaToggleProps, useToggle} from '../toggle/useToggle';
+import {DOMAttributesWithRef, InputDOMProps, RefObject, ValidationResult} from '@react-types/shared';
+import {InputHTMLAttributes, LabelHTMLAttributes} from 'react';
+import {ToggleProps, ToggleState} from 'react-stately/useToggleState';
 
-export interface SwitchProps extends InputBase, FocusableProps {
-  /**
-   * The content to render as the Switch's label.
-   */
-  children?: ReactNode,
-  /**
-   * Whether the Switch should be selected (uncontrolled).
-   */
-  defaultSelected?: boolean,
-  /**
-   * Whether the Switch should be selected (controlled).
-   */
-  isSelected?: boolean,
-  /**
-   * Handler that is called when the Switch's selection state changes.
-   */
-  onChange?: (isSelected: boolean) => void,
-  /**
-   * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
-   */
-  value?: string
-}
+export interface SwitchProps extends ToggleProps {}
 
-export interface AriaSwitchProps extends SwitchProps, FocusableDOMProps, InputDOMProps, AriaLabelingProps {
+export interface AriaSwitchProps extends SwitchProps, InputDOMProps, AriaToggleProps {
   /**
    * Identifies the element (or elements) whose contents or presence are controlled by the current element.
    */
   'aria-controls'?: string
 }
 
-export interface SwitchAria {
+export interface SwitchAria extends ValidationResult {
   /** Props for the label wrapper element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the switch description element, if any. */
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
+  /** Props for the switch error message element, if any. */
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the switch is selected. */
   isSelected: boolean,
   /** Whether the switch is in a pressed state. */
@@ -68,7 +51,7 @@ export interface SwitchAria {
  * @param ref - Ref to the HTML input element.
  */
 export function useSwitch(props: AriaSwitchProps, state: ToggleState, ref: RefObject<HTMLInputElement | null>): SwitchAria {
-  let {labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle(props, state, ref);
+  let {labelProps, inputProps, isSelected, ...states} = useToggle(props, state, ref);
 
   return {
     labelProps,
@@ -78,8 +61,6 @@ export function useSwitch(props: AriaSwitchProps, state: ToggleState, ref: RefOb
       checked: isSelected
     },
     isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly
+    ...states
   };
 }
diff --git a/packages/react-aria/src/toggle/useToggle.ts b/packages/react-aria/src/toggle/useToggle.ts
index fdaf749cfb2..d35be1ada26 100644
--- a/packages/react-aria/src/toggle/useToggle.ts
+++ b/packages/react-aria/src/toggle/useToggle.ts
@@ -10,15 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, AriaValidationProps, FocusableDOMProps, InputDOMProps, PressEvents, RefObject} from '@react-types/shared';
-import {ChangeEventHandler, InputHTMLAttributes, LabelHTMLAttributes} from 'react';
+import {AriaLabelingProps, AriaValidationProps, DOMAttributesWithRef, FocusableDOMProps, InputDOMProps, PressEvents, RefObject, ValidationResult} from '@react-types/shared';
+import {ChangeEventHandler, InputHTMLAttributes, LabelHTMLAttributes, useState} from 'react';
 import {filterDOMProps} from '../utils/filterDOMProps';
 import {getEventTarget} from '../utils/shadowdom/DOMFunctions';
 import {mergeProps} from '../utils/mergeProps';
+import {privateValidationStateProp, useFormValidationState} from 'react-stately/private/form/useFormValidationState';
 import {ToggleProps, ToggleState} from 'react-stately/useToggleState';
 import {useFocusable} from '../interactions/useFocusable';
 import {useFormReset} from '../utils/useFormReset';
+import {useFormValidation} from '../form/useFormValidation';
 import {usePress} from '../interactions/usePress';
+import {useSlotId2} from '../utils/useSlot';
 
 export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents {
   /**
@@ -27,11 +30,15 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
-export interface ToggleAria {
+export interface ToggleAria extends ValidationResult {
   /** Props to be spread on the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props to be spread on the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the toggle is selected. */
   isSelected: boolean,
   /** Whether the toggle is in a pressed state. */
@@ -55,10 +62,11 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     name,
     form,
     children,
+    isRequired,
+    validationBehavior = 'aria',
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
-    validationState = 'valid',
-    isInvalid,
+    'aria-describedby': ariaDescribedby,
     onPressStart,
     onPressEnd,
     onPressChange,
@@ -67,6 +75,12 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     onClick
   } = props;
 
+  // Create validation state here because it doesn't make sense to add to general useToggleState.
+  let validationState = useFormValidationState({...props, value: state.isSelected});
+  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
+
+  useFormValidation(props, validationState, ref);
+
   let onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     // since we spread props on label, onChange will end up there as well as in here.
     // so we have to stop propagation at the lowest level that we care about
@@ -92,16 +106,57 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
   });
 
   // Handle press state on the label.
-  let {pressProps: labelProps, isPressed: isLabelPressed} = usePress({
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
+  let [isLabelPressed, setLabelPressed] = useState(false);
+  let {pressProps: labelProps} = usePress({
+    onPressStart(e) {
+      // Keyboard interactions are handled directly on the input.
+      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+        e.continuePropagation();
+        return;
+      }
+
+      onPressStart?.(e);
+      onPressChange?.(true);
+      setLabelPressed(true);
+    },
+    onPressEnd(e) {
+      // Keyboard interactions are handled directly on the input.
+      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+        e.continuePropagation();
+        return;
+      }
+
+      onPressEnd?.(e);
+      onPressChange?.(false);
+      setLabelPressed(false);
+    },
+    onPressUp(e) {
+      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+        e.continuePropagation();
+        return;
+      }
+
+      onPressUp?.(e);
+    },
     onClick,
     onPress(e) {
+      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+        e.continuePropagation();
+        return;
+      }
+
       onPress?.(e);
       state.toggle();
       ref.current?.focus();
+
+      // @ts-expect-error
+      let {[privateValidationStateProp]: groupValidationState} = props;
+
+      let {commitValidation} = groupValidationState
+      ? groupValidationState
+      : validationState;
+
+      commitValidation();
     },
     isDisabled: isDisabled || isReadOnly
   });
@@ -112,13 +167,25 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   useFormReset(ref, state.defaultSelected, state.setSelected);
 
+  // Copied from useField because we don't want the label behavior that provides.
+  let descriptionProps = useSlotId2();
+  let errorMessageProps = useSlotId2();
+
   return {
     labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
     inputProps: mergeProps(domProps, {
-      'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
+      checked: state.isSelected,
+      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+      required: isRequired && validationBehavior === 'native',
+      'aria-invalid': isInvalid || props.validationState === 'invalid' || undefined,
       'aria-errormessage': props['aria-errormessage'],
       'aria-controls': props['aria-controls'],
       'aria-readonly': isReadOnly || undefined,
+      'aria-describedby': [
+        descriptionProps.id,
+        errorMessageProps.id,
+        ariaDescribedby
+      ].filter(Boolean).join(' ') || undefined,
       onChange,
       disabled: isDisabled,
       ...(value == null ? {} : {value}),
@@ -127,10 +194,14 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
       type: 'checkbox',
       ...interactions
     }),
+    descriptionProps,
+    errorMessageProps,
     isSelected: state.isSelected,
     isPressed: isPressed || isLabelPressed,
     isDisabled,
     isReadOnly,
-    isInvalid: isInvalid || validationState === 'invalid'
+    isInvalid: isInvalid || props.validationState === 'invalid',
+    validationErrors,
+    validationDetails
   };
 }
diff --git a/packages/react-aria/src/utils/useSlot.ts b/packages/react-aria/src/utils/useSlot.ts
new file mode 100644
index 00000000000..2fcb6028d1a
--- /dev/null
+++ b/packages/react-aria/src/utils/useSlot.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2026 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {RefCallback, useCallback, useRef, useState} from 'react';
+import {useId} from './useId';
+import {useLayoutEffect} from './useLayoutEffect';
+
+export function useSlot(initialState: boolean | (() => boolean) = true): [RefCallback<any>, boolean] {
+  // Initial state is typically based on the parent having an aria-label or aria-labelledby.
+  // If it does, this value should be false so that we don't update the state and cause a rerender when we go through the layoutEffect
+  let [hasSlot, setHasSlot] = useState(initialState);
+  let hasRun = useRef(false);
+
+  // A callback ref which will run when the slotted element mounts.
+  // This should happen before the useLayoutEffect below.
+  let ref = useCallback((el: any) => {
+    hasRun.current = true;
+    setHasSlot(!!el);
+  }, []);
+
+  // If the callback hasn't been called, then reset to false.
+  useLayoutEffect(() => {
+    if (!hasRun.current) {
+      setHasSlot(false);
+    }
+  }, []);
+
+  return [ref, hasSlot];
+}
+
+interface SlotAria {
+  id: string | undefined,
+  ref: RefCallback<any>
+}
+
+export function useSlotId2(initialState: boolean | (() => boolean) = true): SlotAria {
+  let id = useId();
+  let [ref, hasSlot] = useSlot(initialState);
+
+  return {
+    id: hasSlot ? id : undefined,
+    ref
+  };
+}
diff --git a/packages/react-stately/src/layout/TableLayout.ts b/packages/react-stately/src/layout/TableLayout.ts
index a9fc643b8ad..dca6d1fdfba 100644
--- a/packages/react-stately/src/layout/TableLayout.ts
+++ b/packages/react-stately/src/layout/TableLayout.ts
@@ -361,6 +361,17 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     };
   }
 
+  protected buildLoader(node: GridNode<T>, x: number, y: number): LayoutNode {
+    let layoutNode = super.buildLoader(node, x, y);
+    let collection = this.virtualizer!.collection as TableCollection<T>;
+
+    // use the same approach as buildRow to get the proper width of the loader, otherwise
+    // we get a outdated loader width
+    layoutNode.layoutInfo.rect.width = this.layoutNodes.get(collection.head?.key ?? 'header')!.layoutInfo.rect.width;
+    layoutNode.validRect = layoutNode.layoutInfo.rect.intersection(this.requestedRect);
+    return layoutNode;
+  }
+
   protected buildNode(node: GridNode<T>, x: number, y: number): LayoutNode {
     switch (node.type) {
       case 'headerrow':
diff --git a/starters/docs/src/Checkbox.css b/starters/docs/src/Checkbox.css
index 23b84a8d950..68fe58efcca 100644
--- a/starters/docs/src/Checkbox.css
+++ b/starters/docs/src/Checkbox.css
@@ -1,7 +1,22 @@
 @import "./theme.css";
 @import "./utilities.css";
 
-.react-aria-Checkbox {
+.react-aria-CheckboxField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+
+  [slot=description],
+  .react-aria-FieldError {
+    margin-left: calc(var(--spacing) * 6.5);
+  }
+
+  &[data-disabled] [slot=description] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-CheckboxButton {
   --checkmark-color: var(--highlight-foreground);
 
   display: flex;
diff --git a/starters/docs/src/Checkbox.tsx b/starters/docs/src/Checkbox.tsx
index d82ba088b8e..2d6e0bef3c8 100644
--- a/starters/docs/src/Checkbox.tsx
+++ b/starters/docs/src/Checkbox.tsx
@@ -1,17 +1,21 @@
 'use client';
-import { Checkbox as AriaCheckbox, type CheckboxProps } from 'react-aria-components/Checkbox';
+import { CheckboxButton, CheckboxField, type CheckboxFieldProps, type ValidationResult } from 'react-aria-components/Checkbox';
 import './Checkbox.css';
+import { Description, FieldError } from './Form';
+import type { ReactNode } from 'react';
 
-export function Checkbox(
-  { children, ...props }: Omit<CheckboxProps, 'children'> & {
-    children?: React.ReactNode;
-  }
-) {
+interface CheckboxProps extends CheckboxFieldProps {
+  children?: ReactNode,
+  description?: string,
+  errorMessage?: string | ((validation: ValidationResult) => string)
+}
+
+export function Checkbox({ children, description, errorMessage, ...props }: CheckboxProps) {
   return (
     (
-      <AriaCheckbox {...props}>
-        {({ isIndeterminate }) => (
-          <>
+      <CheckboxField {...props}>
+        <CheckboxButton>
+          {({ isIndeterminate }) => (<>
             <div className="indicator">
               <svg viewBox="0 0 18 18" aria-hidden="true" key={isIndeterminate ? 'indeterminate' : 'check'}>
                 {isIndeterminate
@@ -20,9 +24,11 @@ export function Checkbox(
               </svg>
             </div>
             {children}
-          </>
-        )}
-      </AriaCheckbox>
+          </>)}
+        </CheckboxButton>
+        {description && <Description>{description}</Description>}
+        <FieldError>{errorMessage}</FieldError>
+      </CheckboxField>
     )
   );
 }
diff --git a/starters/docs/src/CheckboxGroup.css b/starters/docs/src/CheckboxGroup.css
index b1356fd8b07..068762be189 100644
--- a/starters/docs/src/CheckboxGroup.css
+++ b/starters/docs/src/CheckboxGroup.css
@@ -3,7 +3,8 @@
 .react-aria-CheckboxGroup {
   display: flex;
   flex-direction: column;
-  
+  gap: var(--spacing-1);
+
   .checkbox-items {
     display: flex;
     gap: var(--spacing-3);
diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
index 74e558b148c..34d06e82d3c 100644
--- a/starters/docs/src/GridList.css
+++ b/starters/docs/src/GridList.css
@@ -167,38 +167,41 @@
     color: var(--text-color-disabled);
   }
 
-  .react-aria-Checkbox {
+  .react-aria-CheckboxField {
     position: absolute;
     top: var(--spacing-4);
     inset-inline-start: var(--spacing-4);
-    --focus-ring-color: var(--highlight-foreground);
-    --checkmark-color: light-dark(white, black);
 
-    .indicator {
-      --indicator-border: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.7));
+    .react-aria-CheckboxButton {
+      --focus-ring-color: var(--highlight-foreground);
+      --checkmark-color: light-dark(white, black);
 
-      @media (forced-colors: active) {
-        --indicator-border: ButtonBorder;
+      .indicator {
+        --indicator-border: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.7));
+
+        @media (forced-colors: active) {
+          --indicator-border: ButtonBorder;
+        }
       }
-    }
 
-    &[data-selected] .indicator {
-      --indicator-color: light-dark(black, var(--highlight-foreground));
-      --indicator-shadow: transparent;
+      &[data-selected] .indicator {
+        --indicator-color: light-dark(black, var(--highlight-foreground));
+        --indicator-shadow: transparent;
 
-      @media (forced-colors: active) {
-        --indicator-color: Highlight;
-        --checkmark-color: HighlightText;
+        @media (forced-colors: active) {
+          --indicator-color: Highlight;
+          --checkmark-color: HighlightText;
+        }
       }
-    }
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -4px;
-      background: light-dark(rgb(255 255 255 / 0.51), rgb(0 0 0 / 0.56));
-      box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px 0px;
-      border-radius: var(--radius);
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -4px;
+        background: light-dark(rgb(255 255 255 / 0.51), rgb(0 0 0 / 0.56));
+        box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px 0px;
+        border-radius: var(--radius);
+      }
     }
   }
 
diff --git a/starters/docs/src/RadioGroup.css b/starters/docs/src/RadioGroup.css
index 326b156aac1..90712059ddd 100644
--- a/starters/docs/src/RadioGroup.css
+++ b/starters/docs/src/RadioGroup.css
@@ -4,7 +4,9 @@
 .react-aria-RadioGroup {
   display: flex;
   flex-direction: column;
+  max-width: 100%;
   color: var(--text-color);
+  gap: var(--spacing-1);
 
   .radio-items {
     display: flex;
@@ -17,10 +19,24 @@
 
   &[data-orientation=horizontal] .radio-items {
     flex-direction: row;
+    flex-wrap: wrap;
   }
 }
 
-.react-aria-Radio {
+.react-aria-RadioField {
+  display: flex;
+  flex-direction: column;
+
+  [slot=description] {
+    margin-left: calc(var(--spacing) * 6.5)
+  }
+
+  &[data-disabled] [slot=description] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-RadioButton {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
@@ -39,6 +55,7 @@
     position: relative;
     width: calc(var(--spacing) * 4.5);
     height: calc(var(--spacing) * 4.5);
+    flex-shrink: 0;
     box-sizing: border-box;
     border-radius: 50%;
     transition: all 200ms;
diff --git a/starters/docs/src/RadioGroup.tsx b/starters/docs/src/RadioGroup.tsx
index 8cfe4a1baa3..35074631747 100644
--- a/starters/docs/src/RadioGroup.tsx
+++ b/starters/docs/src/RadioGroup.tsx
@@ -1,10 +1,11 @@
 'use client';
 import {
   RadioGroup as AriaRadioGroup,
+  RadioField,
+  RadioButton,
   type RadioGroupProps as AriaRadioGroupProps,
   type ValidationResult,
-  type RadioProps,
-  Radio as AriaRadio,
+  type RadioFieldProps,
 } from 'react-aria-components/RadioGroup';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import {Label, FieldError, Description} from './Form';
@@ -39,15 +40,20 @@ export function RadioGroup(
   );
 }
 
+export interface RadioProps extends RadioFieldProps {
+  description?: string;
+}
+
 export function Radio(props: RadioProps) {
   return (
-    <AriaRadio {...props}>
-      {composeRenderProps(props.children, (children) => (
-        <>
+    <RadioField {...props}>
+      <RadioButton>
+        {composeRenderProps(props.children, (children) => (<>
           <div className="indicator" />
           {children}
-        </>
-      ))}
-    </AriaRadio>
+        </>))}
+      </RadioButton>
+      {props.description && <Description>{props.description}</Description>}
+    </RadioField>
   )
 }
diff --git a/starters/docs/src/Switch.css b/starters/docs/src/Switch.css
index 010a06e4a5a..a686cd9a004 100644
--- a/starters/docs/src/Switch.css
+++ b/starters/docs/src/Switch.css
@@ -1,7 +1,17 @@
 @import "./theme.css";
 @import "./utilities.css";
 
-.react-aria-Switch {
+.react-aria-SwitchField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+
+  &[data-disabled] [slot=description] {
+    color: var(--text-color-disabled);
+  }
+}
+
+.react-aria-SwitchButton {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
@@ -38,6 +48,16 @@
     background: var(--button-background-pressed);
   }
 
+  &[data-invalid] {
+    .handle {
+      --indicator-color: var(--invalid-color);
+    }
+
+    &[data-pressed] .handle {
+      background: transparent
+    }
+  }
+
   &[data-selected] {
     --border-color: var(--highlight-background-pressed);
     .handle {
diff --git a/starters/docs/src/Switch.tsx b/starters/docs/src/Switch.tsx
index d64d0589276..1f0accb8dae 100644
--- a/starters/docs/src/Switch.tsx
+++ b/starters/docs/src/Switch.tsx
@@ -1,20 +1,28 @@
 'use client';
-import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch';
+import { SwitchField, SwitchButton, type SwitchFieldProps, type ValidationResult } from 'react-aria-components/Switch';
 import './Switch.css';
+import { Description, FieldError } from './Form';
+import type { ReactNode } from 'react';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
-  children: React.ReactNode;
+export interface SwitchProps extends Omit<SwitchFieldProps, 'children'> {
+  children: ReactNode,
+  description?: string,
+  errorMessage?: string | ((validation: ValidationResult) => string)
 }
 
-export function Switch({ children, ...props }: SwitchProps) {
+export function Switch({ children, description, errorMessage, ...props }: SwitchProps) {
   return (
-    <AriaSwitch {...props}>
-      {({isSelected, isDisabled}) => (<>
-        <div className="track indicator">
-          <div data-disabled={isDisabled || undefined} className={isSelected ? 'handle' : 'handle indicator'} />
-        </div>
-        {children}
-      </>)}
-    </AriaSwitch>
+    <SwitchField {...props}>
+      <SwitchButton>
+        {({isSelected, isDisabled}) => (<>
+          <div className="track indicator">
+            <div data-disabled={isDisabled || undefined} className={isSelected ? 'handle' : 'handle indicator'} />
+          </div>
+          {children}
+        </>)}
+      </SwitchButton>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </SwitchField>
   );
 }
diff --git a/starters/docs/src/Table.css b/starters/docs/src/Table.css
index b1db63964f0..bf634557bbb 100644
--- a/starters/docs/src/Table.css
+++ b/starters/docs/src/Table.css
@@ -313,7 +313,7 @@
   translate: calc(68px + (var(--table-row-level) - 1) * var(--spacing-4)) 0;
 }
 
-:where(.react-aria-Row) .react-aria-Checkbox {
+.react-aria-Row .react-aria-CheckboxButton {
   --checkmark-color: var(--highlight-background);
   &[data-selected] .indicator {
     --indicator-color: var(--highlight-foreground);
diff --git a/starters/docs/src/Tree.css b/starters/docs/src/Tree.css
index 8d752c6c07c..bde93e30306 100644
--- a/starters/docs/src/Tree.css
+++ b/starters/docs/src/Tree.css
@@ -197,7 +197,7 @@
   }
 }
 
-:where(.react-aria-TreeItem) .react-aria-Checkbox {
+.react-aria-TreeItem .react-aria-CheckboxButton {
   --checkmark-color: var(--highlight-background);
   &[data-selected] .indicator {
     --indicator-color: var(--highlight-foreground);
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index 3ab7ee0cba0..992febb408d 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -1,10 +1,11 @@
 'use client';
 import { Check, Minus } from 'lucide-react';
 import React from 'react';
-import { Checkbox as AriaCheckbox, type CheckboxProps } from 'react-aria-components/Checkbox';
+import { CheckboxField, CheckboxButton, type CheckboxFieldProps, type ValidationResult } from 'react-aria-components/Checkbox';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import { tv } from 'tailwind-variants';
 import { focusRing } from './utils';
+import { Description, FieldError } from './Field';
 
 const checkboxStyles = tv({
   base: 'flex gap-2 items-center group font-sans text-sm transition relative [-webkit-tap-highlight-color:transparent]',
@@ -35,22 +36,32 @@ const boxStyles = tv({
 
 const iconStyles = 'w-3.5 h-3.5 text-white group-disabled:text-neutral-400 dark:text-neutral-900 dark:group-disabled:text-neutral-600 forced-colors:text-[HighlightText] pointer-events-none';
 
+interface CheckboxProps extends CheckboxFieldProps {
+  children?: React.ReactNode,
+  description?: string,
+  errorMessage?: string | ((validation: ValidationResult) => string)
+}
+
 export function Checkbox(props: CheckboxProps) {
   return (
-    <AriaCheckbox {...props} className={composeRenderProps(props.className, (className, renderProps) => checkboxStyles({...renderProps, className}))}>
-      {composeRenderProps(props.children, (children, {isSelected, isIndeterminate, ...renderProps}) => (
-        <>
-          <div className={boxStyles({isSelected: isSelected || isIndeterminate, ...renderProps})}>
-            {isIndeterminate
-              ? <Minus aria-hidden className={iconStyles} />
-              : isSelected
-                ? <Check aria-hidden className={iconStyles} />
-                : null
-            }
-          </div>
-          {children}
-        </>
-      ))}
-    </AriaCheckbox>
+    <CheckboxField {...props} className="flex flex-col gap-1 group">
+      <CheckboxButton className={composeRenderProps(props.className, (className, renderProps) => checkboxStyles({...renderProps, className}))}>
+        {composeRenderProps(props.children, (children, {isSelected, isIndeterminate, ...renderProps}) => (
+          <>
+            <div className={boxStyles({isSelected: isSelected || isIndeterminate, ...renderProps})}>
+              {isIndeterminate
+                ? <Minus aria-hidden className={iconStyles} />
+                : isSelected
+                  ? <Check aria-hidden className={iconStyles} />
+                  : null
+              }
+            </div>
+            {children}
+          </>
+        ))}
+      </CheckboxButton>
+      {props.description && <Description className="ms-6.5">{props.description}</Description>}
+      <FieldError className="ms-6.5">{props.errorMessage}</FieldError>
+    </CheckboxField>
   );
 }
diff --git a/starters/tailwind/src/Field.tsx b/starters/tailwind/src/Field.tsx
index bc800fd398d..1a1a1d82c51 100644
--- a/starters/tailwind/src/Field.tsx
+++ b/starters/tailwind/src/Field.tsx
@@ -15,11 +15,11 @@ export function Label(props: LabelProps) {
 }
 
 export function Description(props: TextProps) {
-  return <Text {...props} slot="description" className={twMerge('text-sm text-neutral-600', props.className)} />;
+  return <Text {...props} slot="description" className={twMerge('text-xs text-neutral-600 dark:text-neutral-400 group-disabled:text-neutral-200 dark:group-disabled:text-neutral-700 contain-inline-size', props.className)} />;
 }
 
 export function FieldError(props: FieldErrorProps) {
-  return <RACFieldError {...props} className={composeTailwindRenderProps(props.className, 'text-sm text-red-600 forced-colors:text-[Mark]')} />
+  return <RACFieldError {...props} className={composeTailwindRenderProps(props.className, 'text-xs text-red-600 contain-inline-size forced-colors:text-[Mark]')} />
 }
 
 export const fieldBorderStyles = tv({
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index c7f942015cc..0eaf069917d 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -2,10 +2,11 @@
 import React, { type ReactNode } from 'react';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import {
-  Radio as RACRadio,
+  RadioField,
+  RadioButton,
   RadioGroup as RACRadioGroup,
   type RadioGroupProps as RACRadioGroupProps,
-  type RadioProps,
+  type RadioFieldProps,
   type ValidationResult,
 } from 'react-aria-components/RadioGroup';
 import { tv } from 'tailwind-variants';
@@ -34,7 +35,7 @@ export function RadioGroup(props: RadioGroupProps) {
 
 const styles = tv({
   extend: focusRing,
-  base: 'w-4.5 h-4.5 box-border rounded-full border bg-white dark:bg-neutral-900 transition-all',
+  base: 'w-4.5 h-4.5 flex-shrink-0 box-border rounded-full border bg-white dark:bg-neutral-900 transition-all',
   variants: {
     isSelected: {
       false: 'border-neutral-400 dark:border-neutral-400 group-pressed:border-neutral-500 dark:group-pressed:border-neutral-300',
@@ -49,13 +50,20 @@ const styles = tv({
   }
 });
 
+export interface RadioProps extends RadioFieldProps {
+  description?: string;
+}
+
 export function Radio(props: RadioProps) {
   return (
-    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
-      {composeRenderProps(props.children, (children, renderProps) => <>
-        <div className={styles(renderProps)} />
-        {children}
-      </>)}
-    </RACRadio>
+    <RadioField {...props} className="flex flex-col gap-1 group">
+      <RadioButton className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
+        {composeRenderProps(props.children, (children, renderProps) => <>
+          <div className={styles(renderProps)} />
+          {children}
+        </>)}
+      </RadioButton>
+      {props.description && <Description className="ms-6.5">{props.description}</Description>}
+    </RadioField>
   );
 }
diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx
index 2ac411a306d..2c94642afd2 100644
--- a/starters/tailwind/src/Switch.tsx
+++ b/starters/tailwind/src/Switch.tsx
@@ -1,11 +1,14 @@
 'use client';
 import React from 'react';
-import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch';
+import { SwitchField, SwitchButton, type SwitchFieldProps, type ValidationResult } from 'react-aria-components/Switch';
 import { tv } from 'tailwind-variants';
 import { composeTailwindRenderProps, focusRing } from './utils';
+import { Description, FieldError } from './Field';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
-  children: React.ReactNode;
+export interface SwitchProps extends Omit<SwitchFieldProps, 'children'> {
+  children: React.ReactNode,
+  description?: string,
+  errorMessage?: string | ((validation: ValidationResult) => string)
 }
 
 const track = tv({
@@ -49,15 +52,19 @@ const handle = tv({
 
 export function Switch({ children, ...props }: SwitchProps) {
   return (
-    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
-      {(renderProps) => (
-        <>
-          <div className={track(renderProps)}>
-            <span className={handle(renderProps)} />
-          </div>
-          {children}
-        </>
-      )}
-    </AriaSwitch>
+    <SwitchField {...props} className="flex flex-col gap-1 group">
+      <SwitchButton className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
+        {(renderProps) => (
+          <>
+            <div className={track(renderProps)}>
+              <span className={handle(renderProps)} />
+            </div>
+            {children}
+          </>
+        )}
+      </SwitchButton>
+      {props.description && <Description>{props.description}</Description>}
+      <FieldError>{props.errorMessage}</FieldError>
+    </SwitchField>
   );
 }