From 954bfab572dbf94041e58126d65d1f5793905e6b Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 3 Apr 2026 17:38:34 -0700
Subject: [PATCH 1/6] feat: Support help text in Checkbox, Radio, and Switch

---
 .../react-spectrum/src/checkbox/Checkbox.tsx  |   3 +-
 .../@adobe/react-spectrum/src/radio/Radio.tsx |   3 +-
 .../react-spectrum/src/switch/Switch.tsx      |   3 +-
 packages/@react-spectrum/s2/src/Checkbox.tsx  | 118 ++++++----
 .../@react-spectrum/s2/src/RadioGroup.tsx     |   4 +-
 packages/@react-spectrum/s2/src/Switch.tsx    |   5 +-
 packages/@react-spectrum/s2/src/useDOMRef.ts  |  15 +-
 packages/@react-types/shared/src/refs.d.ts    |   2 +-
 .../dev/s2-docs/pages/react-aria/Checkbox.mdx |  36 ++--
 .../pages/react-aria/CheckboxGroup.mdx        |  44 +++-
 .../s2-docs/pages/react-aria/RadioGroup.mdx   |  61 ++++--
 .../dev/s2-docs/pages/react-aria/Switch.mdx   |  38 ++--
 packages/dev/s2-docs/pages/s2/Checkbox.mdx    |   5 +-
 .../react-aria-components/exports/Checkbox.ts |  11 +-
 .../exports/RadioGroup.ts                     |   4 +-
 .../react-aria-components/exports/Switch.ts   |  11 +-
 .../react-aria-components/exports/index.ts    |  12 +-
 .../react-aria-components/src/Checkbox.tsx    | 203 +++++++++++++++---
 .../react-aria-components/src/GridList.tsx    |   8 +-
 .../react-aria-components/src/RadioGroup.tsx  | 149 ++++++++++++-
 packages/react-aria-components/src/Switch.tsx | 199 ++++++++++++++++-
 packages/react-aria-components/src/Table.tsx  |  13 +-
 packages/react-aria-components/src/Tree.tsx   |   7 +-
 .../test/Checkbox.test.js                     | 105 ++++++---
 .../test/RadioGroup.test.js                   | 111 ++++++----
 .../react-aria-components/test/Switch.test.js | 113 ++++++++--
 .../react-aria/src/checkbox/useCheckbox.ts    |  49 ++---
 packages/react-aria/src/radio/useRadio.ts     |  14 +-
 packages/react-aria/src/switch/useSwitch.ts   |  45 ++--
 packages/react-aria/src/toggle/useToggle.ts   |  96 +++++++--
 starters/docs/src/Checkbox.css                |  13 +-
 starters/docs/src/Checkbox.tsx                |  30 +--
 starters/docs/src/CheckboxGroup.css           |   3 +-
 starters/docs/src/RadioGroup.css              |  15 +-
 starters/docs/src/RadioGroup.tsx              |  22 +-
 starters/docs/src/Switch.css                  |  18 +-
 starters/docs/src/Switch.tsx                  |  32 +--
 starters/tailwind/src/Checkbox.tsx            |  43 ++--
 starters/tailwind/src/Field.tsx               |   4 +-
 starters/tailwind/src/RadioGroup.tsx          |  26 ++-
 starters/tailwind/src/Switch.tsx              |  33 +--
 41 files changed, 1310 insertions(+), 416 deletions(-)

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/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 543b9379e82..589e401044b 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,19 +44,31 @@ 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({
+  width: 'fit',
+  '--field-height': {
+    type: 'height',
+    value: controlSize()
+  },
+  '--field-gap': {
+    type: 'rowGap',
+    value: 'calc(var(--field-height) - 1lh)'
+  }
+}, getAllowedOverrides());
 
 const wrapper = style({
   display: 'flex',
   position: 'relative',
   columnGap: 'text-to-control',
   alignItems: 'baseline',
-  width: 'fit',
+  width: 'full',
   font: controlFont(),
   transition: 'colors',
   color: {
@@ -68,7 +82,7 @@ const wrapper = style({
     isInForm: 'field'
   },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 export const box = style<RenderProps>({
   ...focusRing(),
@@ -137,7 +151,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 +162,59 @@ 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'}, 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={iconSize[props.size || 'M']} className={iconStyles} />
+                }
+                {renderProps.isSelected && !renderProps.isIndeterminate &&
+                  <CheckmarkIcon size={iconSize[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>
+                {children}
+              </>
+            );
+          }}
+        </CheckboxButton>
+        <HelpText
+          size={props.size || 'M'}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          description={props.description}
+          showErrorIcon>
+          {props.errorMessage}
+        </HelpText>
+      </>)}
+    </CheckboxField>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index e3a8b3c03e9..7999730547d 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -144,7 +144,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, 'description' | 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * The label for the element.
    */
@@ -227,7 +227,7 @@ const circle = style<RenderProps>({
  * 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, HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index d503de2e73b..84a658502a4 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -11,7 +11,6 @@
  */
 
 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';
@@ -43,7 +42,7 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
   children?: ReactNode
 }
 
-export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLInputElement, HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -156,7 +155,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, HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
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-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..00f4165562c 100644
--- a/packages/dev/s2-docs/pages/s2/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/s2/Checkbox.mdx
@@ -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/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..a672a73f74d 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<RadioProps>, 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..fa461ac77f7 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<SwitchProps, 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/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 35abb978759..59618278d8e 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 {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 from 'react';
+import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-describe('Checkbox', () => {
+function CheckboxExample(props) {
+  return (
+    <CheckboxField {...props}>
+      <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>
+  );
+}
+
+function CheckboxLegacy(props) {
+  return <AriaCheckbox {...props} 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,99 @@ 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');
   });
 
+  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 support required state', () => {
-    let {getByRole} = render(<Checkbox isRequired className={({isRequired}) => isRequired ? 'required' : ''}>Test</Checkbox>);
+    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');
+    }
   });
 
   it('should support render props', async () => {
@@ -260,7 +316,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 +328,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/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index 79af6b917d1..92260042665 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 {Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext} from '../src/RadioGroup';
 import React 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}} />);
-
-describe('RadioGroup', () => {
+function RadioFieldItem(props) {
+  return (
+    <RadioField {...props}>
+      <RadioButton
+        className={props.buttonClassName}
+        onHoverStart={props.onHoverStart}
+        onHoverEnd={props.onHoverEnd}
+        onHoverChange={props.onHoverChange}>
+        {props.children}
+      </RadioButton>
+      {props.description && <Text slot="description">{props.description}</Text>}
+      <FieldError />
+    </RadioField>
+  );
+}
+
+describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
   let user;
   let testUtilUser = new User();
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  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 () => {
@@ -358,7 +393,7 @@ describe('RadioGroup', () => {
   });
 
   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>
               </>
             )}
diff --git a/packages/react-aria-components/test/Switch.test.js b/packages/react-aria-components/test/Switch.test.js
index 2b1d21f5985..c60919c28b3 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 {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 from 'react';
-import {Switch, SwitchContext} from '../src/Switch';
+import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-describe('Switch', () => {
+function SwitchExample(props) {
+  return (
+    <SwitchField {...props}>
+      <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>
+  );
+}
+
+function SwitchLegacy(props) {
+  return <AriaSwitch {...props} 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,39 @@ 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 support required state', () => {
+      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');
+    });
+  }
 });
diff --git a/packages/react-aria/src/checkbox/useCheckbox.ts b/packages/react-aria/src/checkbox/useCheckbox.ts
index 6180b322300..b57f8e7bd2c 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 {DOMAttributes, 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: DOMAttributes,
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: DOMAttributes,
   /** 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/radio/useRadio.ts b/packages/react-aria/src/radio/useRadio.ts
index c7ab30f7783..b510f43757a 100644
--- a/packages/react-aria/src/radio/useRadio.ts
+++ b/packages/react-aria/src/radio/useRadio.ts
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, FocusableProps, PressEvents, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, 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';
 import {radioGroupData} from './utils';
 import {RadioGroupState} from 'react-stately/useRadioGroupState';
+import {useField} from '../label/useField';
 import {useFocusable} from '../interactions/useFocusable';
 import {useFormReset} from '../utils/useFormReset';
 import {useFormValidation} from '../form/useFormValidation';
@@ -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: DOMAttributes,
   /** Whether the radio is disabled. */
   isDisabled: boolean,
   /** Whether the radio is currently selected. */
@@ -136,9 +139,15 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   useFormReset(ref, state.defaultSelectedValue, state.setSelectedValue);
   useFormValidation({validationBehavior}, state, ref);
 
+  let {labelProps: fieldLabelProps, fieldProps, descriptionProps} = useField({
+    ...props,
+    label: props.children
+  });
+
   return {
     labelProps: mergeProps(
       labelProps,
+      fieldLabelProps,
       useMemo(() => ({
         onClick: e => e.preventDefault(),
 
@@ -146,7 +155,7 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
         // Note, this does not prevent the input from being focused in the `click` event.
         onMouseDown: e => e.preventDefault()
       }), [])),
-    inputProps: mergeProps(domProps, {
+    inputProps: mergeProps(domProps, fieldProps, {
       ...interactions,
       type: 'radio',
       name,
@@ -163,6 +172,7 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
         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..3e593851484 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 {DOMAttributes, 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: DOMAttributes,
+  /** Props for the switch error message element, if any. */
+  errorMessageProps: DOMAttributes,
   /** 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..74ea7c805e9 100644
--- a/packages/react-aria/src/toggle/useToggle.ts
+++ b/packages/react-aria/src/toggle/useToggle.ts
@@ -10,14 +10,17 @@
  * 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, DOMAttributes, 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 {useField} from '../label/useField';
 import {useFocusable} from '../interactions/useFocusable';
 import {useFormReset} from '../utils/useFormReset';
+import {useFormValidation} from '../form/useFormValidation';
 import {usePress} from '../interactions/usePress';
 
 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: DOMAttributes,
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: DOMAttributes,
   /** Whether the toggle is selected. */
   isSelected: boolean,
   /** Whether the toggle is in a pressed state. */
@@ -55,10 +62,10 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     name,
     form,
     children,
+    isRequired,
+    validationBehavior = 'aria',
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
-    validationState = 'valid',
-    isInvalid,
     onPressStart,
     onPressEnd,
     onPressChange,
@@ -67,6 +74,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 +105,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,10 +166,20 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   useFormReset(ref, state.defaultSelected, state.setSelected);
 
+  let {labelProps: fieldLabelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
+    ...props,
+    label: props.children,
+    isInvalid,
+    errorMessage: validationErrors
+  });
+
   return {
-    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
-    inputProps: mergeProps(domProps, {
-      'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
+    labelProps: mergeProps(labelProps, fieldLabelProps, {onClick: e => e.preventDefault()}),
+    inputProps: mergeProps(domProps, fieldProps, {
+      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,
@@ -127,10 +191,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/starters/docs/src/Checkbox.css b/starters/docs/src/Checkbox.css
index 23b84a8d950..5bb4778d605 100644
--- a/starters/docs/src/Checkbox.css
+++ b/starters/docs/src/Checkbox.css
@@ -1,7 +1,18 @@
 @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);
+  }
+}
+
+.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/RadioGroup.css b/starters/docs/src/RadioGroup.css
index 326b156aac1..b07dbd59412 100644
--- a/starters/docs/src/RadioGroup.css
+++ b/starters/docs/src/RadioGroup.css
@@ -4,7 +4,10 @@
 .react-aria-RadioGroup {
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 100%;
   color: var(--text-color);
+  gap: var(--spacing-1);
 
   .radio-items {
     display: flex;
@@ -20,7 +23,16 @@
   }
 }
 
-.react-aria-Radio {
+.react-aria-RadioField {
+  display: flex;
+  flex-direction: column;
+
+  [slot=description] {
+    margin-left: calc(var(--spacing) * 6.5)
+  }
+}
+
+.react-aria-RadioButton {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
@@ -39,6 +51,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..4459d7731ca 100644
--- a/starters/docs/src/Switch.css
+++ b/starters/docs/src/Switch.css
@@ -1,7 +1,13 @@
 @import "./theme.css";
 @import "./utilities.css";
 
-.react-aria-Switch {
+.react-aria-SwitchField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.react-aria-SwitchButton {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
@@ -38,6 +44,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/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>
   );
 }

From c8ff97bf9e9198f0ece689c662e72a7d7d44f75f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 3 Apr 2026 17:49:01 -0700
Subject: [PATCH 2/6] fix

---
 packages/dev/s2-docs/pages/s2/home/Press.tsx       |  2 +-
 .../react-aria-components/test/Checkbox.test.js    | 14 +++++++-------
 .../react-aria-components/test/RadioGroup.test.js  |  8 ++++----
 packages/react-aria-components/test/Switch.test.js | 14 +++++++-------
 4 files changed, 19 insertions(+), 19 deletions(-)

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/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 59618278d8e..38194c0fac2 100644
--- a/packages/react-aria-components/test/Checkbox.test.js
+++ b/packages/react-aria-components/test/Checkbox.test.js
@@ -14,13 +14,13 @@ 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 from 'react';
+import React, {forwardRef} from 'react';
 import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-function CheckboxExample(props) {
+const CheckboxExample = forwardRef(function CheckboxExample(props, ref) {
   return (
-    <CheckboxField {...props}>
+    <CheckboxField {...props} ref={ref}>
       <CheckboxButton
         className={props.buttonClassName}
         onHoverStart={props.onHoverStart}
@@ -32,11 +32,11 @@ function CheckboxExample(props) {
       <FieldError />
     </CheckboxField>
   );
-}
+});
 
-function CheckboxLegacy(props) {
-  return <AriaCheckbox {...props} className={props.className || props.buttonClassName} />;
-}
+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;
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index 92260042665..d5f238caade 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -17,14 +17,14 @@ import {FieldError} from '../src/FieldError';
 import {Label} from '../src/Label';
 import {Modal} from '../src/Modal';
 import {Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext} from '../src/RadioGroup';
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {Text} from '../src/Text';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
-function RadioFieldItem(props) {
+const RadioFieldItem = forwardRef(function RadioFieldItem(props, ref) {
   return (
-    <RadioField {...props}>
+    <RadioField {...props} ref={ref}>
       <RadioButton
         className={props.buttonClassName}
         onHoverStart={props.onHoverStart}
@@ -36,7 +36,7 @@ function RadioFieldItem(props) {
       <FieldError />
     </RadioField>
   );
-}
+});
 
 describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
   let user;
diff --git a/packages/react-aria-components/test/Switch.test.js b/packages/react-aria-components/test/Switch.test.js
index c60919c28b3..9d59755f3c6 100644
--- a/packages/react-aria-components/test/Switch.test.js
+++ b/packages/react-aria-components/test/Switch.test.js
@@ -14,13 +14,13 @@ 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 from 'react';
+import React, {forwardRef} from 'react';
 import {Text} from '../src/Text';
 import userEvent from '@testing-library/user-event';
 
-function SwitchExample(props) {
+const SwitchExample = forwardRef(function SwitchExample(props, ref) {
   return (
-    <SwitchField {...props}>
+    <SwitchField {...props} ref={ref}>
       <SwitchButton
         className={props.buttonClassName}
         onHoverStart={props.onHoverStart}
@@ -32,11 +32,11 @@ function SwitchExample(props) {
       <FieldError />
     </SwitchField>
   );
-}
+});
 
-function SwitchLegacy(props) {
-  return <AriaSwitch {...props} className={props.className || props.buttonClassName} />;
-}
+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;

From 21cd465ea71ba605eb97293b29596c282f96359a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 6 Apr 2026 12:33:05 -0700
Subject: [PATCH 3/6] Fix checkbox styling when nested in collections

---
 starters/docs/src/GridList.css | 47 ++++++++++++++++++----------------
 starters/docs/src/Table.css    |  2 +-
 starters/docs/src/Tree.css     |  2 +-
 3 files changed, 27 insertions(+), 24 deletions(-)

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/Table.css b/starters/docs/src/Table.css
index 6e2e4149425..902a5cd669a 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);

From e934eeb7403338cc50309a6a5ff0f1dbdb596632 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 6 Apr 2026 12:57:17 -0700
Subject: [PATCH 4/6] A couple more tests

---
 .../test/CheckboxGroup.test.js                | 82 +++++++++++++------
 .../test/RadioGroup.test.js                   | 13 +++
 2 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/packages/react-aria-components/test/CheckboxGroup.test.js b/packages/react-aria-components/test/CheckboxGroup.test.js
index 15772d39ed6..14f76854543 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,7 +197,8 @@ 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', () => {
@@ -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/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index d5f238caade..733cae0e42d 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -392,6 +392,19 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
     expect(radio.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Error Description');
   });
 
+  if (comp === 'RadioField') {
+    it('supports help text on individual radios', () => {
+      let {getByRole} = renderGroup({}, {description: 'hello'});
+      let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
+      let radios = radioGroupTester.radios;
+
+      for (let radio of radios) {
+        expect(radio).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(radio.getAttribute('aria-describedby'))).toHaveTextContent('hello');
+      }
+    });
+  }
+
   it('should not navigate within the group using Tab', async () => {
     let {getAllByRole} = renderGroup({}, {buttonClassName: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
     let radios = getAllByRole('radio');

From b8ece8faf5906020e3574d702327338caadd35dc Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 6 Apr 2026 21:25:36 -0700
Subject: [PATCH 5/6] fix aria-describedby behavior

---
 packages/@react-types/shared/src/dom.d.ts     |  3 ++
 .../test/Checkbox.test.js                     | 21 +++++++-
 .../test/CheckboxGroup.test.js                |  4 +-
 .../test/RadioGroup.test.js                   | 30 ++++-------
 .../react-aria-components/test/Switch.test.js | 21 +++++++-
 .../react-aria/src/checkbox/useCheckbox.ts    |  6 +--
 .../src/checkbox/useCheckboxGroupItem.ts      |  2 +-
 packages/react-aria/src/radio/useRadio.ts     | 15 +++---
 packages/react-aria/src/switch/useSwitch.ts   |  6 +--
 packages/react-aria/src/toggle/useToggle.ts   | 27 +++++-----
 packages/react-aria/src/utils/useSlot.ts      | 53 +++++++++++++++++++
 11 files changed, 135 insertions(+), 53 deletions(-)
 create mode 100644 packages/react-aria/src/utils/useSlot.ts

diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index f231d08c45b..0a741c3c1b7 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-aria-components/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 38194c0fac2..91e467f98a7 100644
--- a/packages/react-aria-components/test/Checkbox.test.js
+++ b/packages/react-aria-components/test/Checkbox.test.js
@@ -278,9 +278,21 @@ describe.each(['Checkbox', 'CheckboxField'])('%s', (comp) => {
       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', () => {
+  it('should support required state', async () => {
     let {getByRole} = render(
       <Form>
         <Checkbox isRequired buttonClassName={({isRequired}) => isRequired ? 'required' : ''}>Test</Checkbox>
@@ -301,6 +313,13 @@ describe.each(['Checkbox', 'CheckboxField'])('%s', (comp) => {
       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 () => {
diff --git a/packages/react-aria-components/test/CheckboxGroup.test.js b/packages/react-aria-components/test/CheckboxGroup.test.js
index 14f76854543..688d0dc7dd6 100644
--- a/packages/react-aria-components/test/CheckboxGroup.test.js
+++ b/packages/react-aria-components/test/CheckboxGroup.test.js
@@ -205,7 +205,7 @@ describe.each(['CheckboxField', 'Checkbox'])('CheckboxGroup with %s', (comp) =>
     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>
@@ -217,7 +217,7 @@ describe.each(['CheckboxField', 'Checkbox'])('CheckboxGroup with %s', (comp) =>
 
     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', () => {
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index 733cae0e42d..f12aece756d 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -16,7 +16,7 @@ import {Dialog, DialogTrigger} from '../src/Dialog';
 import {FieldError} from '../src/FieldError';
 import {Label} from '../src/Label';
 import {Modal} from '../src/Modal';
-import {Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroup, RadioGroupContext} from '../src/RadioGroup';
+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';
@@ -33,7 +33,6 @@ const RadioFieldItem = forwardRef(function RadioFieldItem(props, ref) {
         {props.children}
       </RadioButton>
       {props.description && <Text slot="description">{props.description}</Text>}
-      <FieldError />
     </RadioField>
   );
 });
@@ -45,6 +44,7 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
+  let Radio = comp === 'RadioGroup' ? RadioLegacy : RadioFieldItem;
   let TestRadioGroupLegacy = ({groupProps, radioProps}) => (
     <RadioGroup {...groupProps}>
       <Label>Test</Label>
@@ -377,7 +377,7 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
     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>
@@ -389,22 +389,9 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
 
     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');
   });
 
-  if (comp === 'RadioField') {
-    it('supports help text on individual radios', () => {
-      let {getByRole} = renderGroup({}, {description: 'hello'});
-      let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
-      let radios = radioGroupTester.radios;
-
-      for (let radio of radios) {
-        expect(radio).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(radio.getAttribute('aria-describedby'))).toHaveTextContent('hello');
-      }
-    });
-  }
-
   it('should not navigate within the group using Tab', async () => {
     let {getAllByRole} = renderGroup({}, {buttonClassName: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
     let radios = getAllByRole('radio');
@@ -516,7 +503,7 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
     );
     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');
@@ -634,7 +621,7 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
       </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', () => {
@@ -652,12 +639,13 @@ describe.each(['RadioGroup', 'RadioField'])('%s', (comp) => {
   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 9d59755f3c6..cc1bbce8031 100644
--- a/packages/react-aria-components/test/Switch.test.js
+++ b/packages/react-aria-components/test/Switch.test.js
@@ -314,7 +314,19 @@ describe.each(['Switch', 'SwitchField'])('%s', (comp) => {
       expect(document.getElementById(checkbox.getAttribute('aria-describedby'))).toHaveTextContent('hello');
     });
 
-    it('should support required state', () => {
+    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>
@@ -338,6 +350,13 @@ describe.each(['Switch', 'SwitchField'])('%s', (comp) => {
 
       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/src/checkbox/useCheckbox.ts b/packages/react-aria/src/checkbox/useCheckbox.ts
index b57f8e7bd2c..fdc7b6ea02d 100644
--- a/packages/react-aria/src/checkbox/useCheckbox.ts
+++ b/packages/react-aria/src/checkbox/useCheckbox.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaToggleProps, useToggle} from '../toggle/useToggle';
-import {DOMAttributes, 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 {ToggleProps, ToggleState} from 'react-stately/useToggleState';
@@ -32,9 +32,9 @@ export interface CheckboxAria extends ValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the checkbox description element, if any. */
-  descriptionProps: DOMAttributes,
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
   /** Props for the checkbox error message element, if any. */
-  errorMessageProps: DOMAttributes,
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the checkbox is selected. */
   isSelected: boolean,
   /** Whether the checkbox is in a pressed state. */
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 b510f43757a..3bdb69b32b9 100644
--- a/packages/react-aria/src/radio/useRadio.ts
+++ b/packages/react-aria/src/radio/useRadio.ts
@@ -10,17 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, 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';
 import {radioGroupData} from './utils';
 import {RadioGroupState} from 'react-stately/useRadioGroupState';
-import {useField} from '../label/useField';
 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 {
   /**
@@ -47,7 +47,7 @@ export interface RadioAria {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the checkbox description element, if any. */
-  descriptionProps: DOMAttributes,
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the radio is disabled. */
   isDisabled: boolean,
   /** Whether the radio is currently selected. */
@@ -139,15 +139,11 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   useFormReset(ref, state.defaultSelectedValue, state.setSelectedValue);
   useFormValidation({validationBehavior}, state, ref);
 
-  let {labelProps: fieldLabelProps, fieldProps, descriptionProps} = useField({
-    ...props,
-    label: props.children
-  });
+  let descriptionProps = useSlotId2();
 
   return {
     labelProps: mergeProps(
       labelProps,
-      fieldLabelProps,
       useMemo(() => ({
         onClick: e => e.preventDefault(),
 
@@ -155,7 +151,7 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
         // Note, this does not prevent the input from being focused in the `click` event.
         onMouseDown: e => e.preventDefault()
       }), [])),
-    inputProps: mergeProps(domProps, fieldProps, {
+    inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',
       name,
@@ -168,6 +164,7 @@ 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
diff --git a/packages/react-aria/src/switch/useSwitch.ts b/packages/react-aria/src/switch/useSwitch.ts
index 3e593851484..a8a7f291544 100644
--- a/packages/react-aria/src/switch/useSwitch.ts
+++ b/packages/react-aria/src/switch/useSwitch.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaToggleProps, useToggle} from '../toggle/useToggle';
-import {DOMAttributes, InputDOMProps, RefObject, ValidationResult} from '@react-types/shared';
+import {DOMAttributesWithRef, InputDOMProps, RefObject, ValidationResult} from '@react-types/shared';
 import {InputHTMLAttributes, LabelHTMLAttributes} from 'react';
 import {ToggleProps, ToggleState} from 'react-stately/useToggleState';
 
@@ -30,9 +30,9 @@ export interface SwitchAria extends ValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the switch description element, if any. */
-  descriptionProps: DOMAttributes,
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
   /** Props for the switch error message element, if any. */
-  errorMessageProps: DOMAttributes,
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the switch is selected. */
   isSelected: boolean,
   /** Whether the switch is in a pressed state. */
diff --git a/packages/react-aria/src/toggle/useToggle.ts b/packages/react-aria/src/toggle/useToggle.ts
index 74ea7c805e9..d35be1ada26 100644
--- a/packages/react-aria/src/toggle/useToggle.ts
+++ b/packages/react-aria/src/toggle/useToggle.ts
@@ -10,18 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, AriaValidationProps, DOMAttributes, FocusableDOMProps, InputDOMProps, PressEvents, RefObject, ValidationResult} from '@react-types/shared';
+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 {useField} from '../label/useField';
 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 {
   /**
@@ -36,9 +36,9 @@ export interface ToggleAria extends ValidationResult {
   /** Props to be spread on the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the checkbox description element, if any. */
-  descriptionProps: DOMAttributes,
+  descriptionProps: DOMAttributesWithRef<HTMLElement>,
   /** Props for the checkbox error message element, if any. */
-  errorMessageProps: DOMAttributes,
+  errorMessageProps: DOMAttributesWithRef<HTMLElement>,
   /** Whether the toggle is selected. */
   isSelected: boolean,
   /** Whether the toggle is in a pressed state. */
@@ -66,6 +66,7 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     validationBehavior = 'aria',
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
     onPressStart,
     onPressEnd,
     onPressChange,
@@ -166,16 +167,13 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   useFormReset(ref, state.defaultSelected, state.setSelected);
 
-  let {labelProps: fieldLabelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
-    ...props,
-    label: props.children,
-    isInvalid,
-    errorMessage: validationErrors
-  });
+  // Copied from useField because we don't want the label behavior that provides.
+  let descriptionProps = useSlotId2();
+  let errorMessageProps = useSlotId2();
 
   return {
-    labelProps: mergeProps(labelProps, fieldLabelProps, {onClick: e => e.preventDefault()}),
-    inputProps: mergeProps(domProps, fieldProps, {
+    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
+    inputProps: mergeProps(domProps, {
       checked: state.isSelected,
       'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
       required: isRequired && validationBehavior === 'native',
@@ -183,6 +181,11 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
       '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}),
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
+  };
+}

From 94318981797d6e2694b4f7d503f2671b863ba757 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 6 Apr 2026 21:26:07 -0700
Subject: [PATCH 6/6] Add tests for CheckboxField in collections

---
 .../test/GridList.test.js                     | 22 ++++++++++++++-----
 .../react-aria-components/test/Table.test.js  | 21 +++++++++++++-----
 .../react-aria-components/test/Tree.test.tsx  | 14 ++++++++----
 3 files changed, 41 insertions(+), 16 deletions(-)

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/Table.test.js b/packages/react-aria-components/test/Table.test.js
index 7c9262292af..2dba25c1851 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 30eb7c111ca..ceb2c12151c 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');