diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index f98abbff1c..52d371aab8 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
- Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
+- Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
## [2.0.0-alpha.4] - 2024-01-03
diff --git a/packages/@headlessui-react/src/components/field/field.test.tsx b/packages/@headlessui-react/src/components/field/field.test.tsx
index 0ec7dd2aa2..d1c8b880f6 100644
--- a/packages/@headlessui-react/src/components/field/field.test.tsx
+++ b/packages/@headlessui-react/src/components/field/field.test.tsx
@@ -14,6 +14,25 @@ describe('Rendering', () => {
expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
})
+ it('should render a `Field` component with a render prop', async () => {
+ let { container } = render(
+
+ {(slot) => {
+ return (
+
+
+
+ )
+ }}
+
+ )
+
+ expect(container.querySelector('[data-slot]')?.getAttribute('data-slot')).toEqual(
+ JSON.stringify({ disabled: false })
+ )
+ expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
+ })
+
it('should add `aria-disabled` when a `Field` is disabled', async () => {
let { container } = render(
diff --git a/packages/@headlessui-react/src/components/field/field.tsx b/packages/@headlessui-react/src/components/field/field.tsx
index 0a22218810..d770c162dd 100644
--- a/packages/@headlessui-react/src/components/field/field.tsx
+++ b/packages/@headlessui-react/src/components/field/field.tsx
@@ -53,7 +53,13 @@ function FieldFn(
ourProps,
theirProps: {
...theirProps,
- children: {theirProps.children},
+ children: (
+
+ {typeof theirProps.children === 'function'
+ ? theirProps.children(slot)
+ : theirProps.children}
+
+ ),
},
slot,
defaultTag: DEFAULT_FIELD_TAG,