diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index df81cb40008..8108cde8cb6 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -92,7 +92,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
+ data-invalid={state.isInvalid || undefined}
+ data-disabled={state.isDisabled || undefined} />
);
});
@@ -157,7 +158,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
+ data-invalid={state.isInvalid || undefined}
+ data-disabled={state.isDisabled || undefined} />
);
});
@@ -241,7 +243,7 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef
values={[
[DateFieldStateContext, state],
[InputContext, {...inputProps, ref: inputRef}],
- [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}]
+ [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]
]}>
@@ -261,7 +263,8 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef
+ isInvalid={state.isInvalid}
+ isDisabled={state.isDisabled}>
{state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
diff --git a/packages/react-aria-components/test/DateField.test.js b/packages/react-aria-components/test/DateField.test.js
index 6f467435f4b..5bb55d52e93 100644
--- a/packages/react-aria-components/test/DateField.test.js
+++ b/packages/react-aria-components/test/DateField.test.js
@@ -179,11 +179,15 @@ describe('DateField', () => {
it('should support render props', () => {
let {getByRole} = render(
-
+
{({isInvalid}) => (
<>
-
+
{segment => }
>
@@ -194,6 +198,24 @@ describe('DateField', () => {
expect(group).toHaveAttribute('data-validation-state', 'invalid');
});
+ it('should support disabled render prop', () => {
+ let {getByRole} = render(
+
+ {({isDisabled}) => (
+ <>
+
+
+ {segment => }
+
+ >
+ )}
+
+ );
+ let group = getByRole('group');
+ expect(group).toHaveAttribute('data-disabled-state', 'disabled');
+ });
+
it('should support form value', () => {
render(
diff --git a/packages/react-aria-components/test/TimeField.test.js b/packages/react-aria-components/test/TimeField.test.js
index 5978dd9e9f0..9315b8b91cb 100644
--- a/packages/react-aria-components/test/TimeField.test.js
+++ b/packages/react-aria-components/test/TimeField.test.js
@@ -112,6 +112,25 @@ describe('TimeField', () => {
expect(group).toHaveAttribute('data-validation-state', 'invalid');
});
+ it('should support disabled render prop', () => {
+ let {getByRole} = render(
+
+ {({isDisabled}) => (
+ <>
+
+
+ {segment => }
+
+ >
+ )}
+
+ );
+
+ let group = getByRole('group');
+ expect(group).toHaveAttribute('data-disabled-state', 'disabled');
+ });
+
it('should support form value', () => {
render(