{"record":{"id":"df2a46af9928b777","repo":"tailwindlabs/headlessui","slug":"passing-props-on-fragment-the-current-componen","errorCode":null,"errorMessage":"Passing props on \"Fragment\"!\n\nThe current component <${name} /> is rendering a \"Fragment\".\nHowever we need to passthrough the following props:\n  - ${line}\n\nYou can apply a few solutions:\n  - Add an `as=\"...\"` prop, to ensure that we render an actual element instead of a \"Fragment\".\n  - Render a single element as the child so that we can forward the props onto that element.","messagePattern":"Passing props on \"Fragment\"!\n\nThe current component <(.+?) /> is rendering a \"Fragment\"\\.\nHowever we need to passthrough the following props:\n  - (.+?)\n\nYou can apply a few solutions:\n  - Add an `as=\"\\.\\.\\.\"` prop, to ensure that we render an actual element instead of a \"Fragment\"\\.\n  - Render a single element as the child so that we can forward the props onto that element\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@headlessui-react/src/utils/render.ts","lineNumber":197,"sourceCode":"    }\n\n    if (exposeState) {\n      dataAttributes['data-headlessui-state'] = states.join(' ')\n      for (let state of states) {\n        dataAttributes[`data-${state}`] = ''\n      }\n    }\n  }\n\n  if (isFragment(Component)) {\n    if (Object.keys(compact(rest)).length > 0 || Object.keys(compact(dataAttributes)).length > 0) {\n      if (\n        !isValidElement(resolvedChildren) ||\n        (Array.isArray(resolvedChildren) && resolvedChildren.length > 1) ||\n        isFragmentInstance(resolvedChildren)\n      ) {\n        if (Object.keys(compact(rest)).length > 0) {\n          throw new Error(\n            [\n              'Passing props on \"Fragment\"!',\n              '',\n              `The current component <${name} /> is rendering a \"Fragment\".`,\n              `However we need to passthrough the following props:`,\n              Object.keys(compact(rest))\n                .concat(Object.keys(compact(dataAttributes)))\n                .map((line) => `  - ${line}`)\n                .join('\\n'),\n              '',\n              'You can apply a few solutions:',\n              [\n                'Add an `as=\"...\"` prop, to ensure that we render an actual element instead of a \"Fragment\".',\n                'Render a single element as the child so that we can forward the props onto that element.',\n              ]\n                .map((line) => `  - ${line}`)\n                .join('\\n'),\n            ].join('\\n')","sourceCodeStart":179,"sourceCodeEnd":215,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-react/src/utils/render.ts#L179-L215","documentation":"Headless UI's render() cannot forward DOM props (className, event handlers, ids, aria-*) onto a React Fragment, because Fragments accept no attributes. When a component is rendered `as={Fragment}` (or as a component returning a Fragment) and there are props to passthrough, or the child resolution produces multiple children or a fragment instance, this error is thrown to tell you the props would be silently dropped.","triggerScenarios":"Using as={Fragment} on Menu.Button, Dialog.Panel, etc. while also passing className, onClick, data-* or ref; providing multiple children where a single child element is required; a custom `as` component whose root render is <></> while the Headless UI component needs to inject props.","commonSituations":"Trying to avoid an extra DOM element with as={Fragment} but still styling via className; wrapping the child in a fragment or comma-separated siblings; custom wrapper components that render fragments internally.","solutions":["Render a single element as the child (or the default `as` element) so props can be forwarded onto it.","Use a real element: as=\"div\" (or as={MyComponent} that renders a real root element) instead of as={Fragment}.","If a custom component is used for `as`, make sure its root output is a single DOM element that spreads all incoming props onto it."],"exampleFix":"// before\n<Dialog as={Fragment} className=\"z-10\"> {/* throws: props on Fragment */}\n  <div>...</div>\n</Dialog>\n\n// after\n<Dialog className=\"z-10\">\n  <div>...</div>\n</Dialog>","handlingStrategy":"validation","validationCode":"// Before rendering a Headless UI component with as={Fragment}, check what must be forwarded\nconst propsToForward = { className, onClick, 'data-testid': id } // etc.\nif (Object.keys(propsToForward).length > 0 && asIsFragment) {\n  // render a real element instead\n  as = 'div'\n}","typeGuard":"const isFragment = (as: unknown): as is React.Fragment => as === React.Fragment || as === Fragment","tryCatchPattern":"try { render } catch (e) { if (e instanceof Error && e.message.includes('Passing props on \"Fragment\"')) { /* re-render with as=\"div\" */ } else throw e }","preventionTips":["Avoid as={Fragment} whenever you need to pass className, refs, ids, or event handlers.","When using as={Fragment}, provide exactly one child element that accepts and spreads the incoming props.","Ensure custom `as` components render a single root DOM element and forward all props onto it."],"tags":["headlessui","react","fragment","props-forwarding","polymorphic-component"],"backgroundTag":"props-on-fragment-forwarding","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}