{"record":{"id":"a45465abbb11b6b9","repo":"tailwindlabs/headlessui","slug":"you-provided-an-open-prop-to-the-dialog-but-t-a45465","errorCode":null,"errorMessage":"You provided an `open` prop to the `Dialog`, but the value is not a boolean. Received: ${props.open}","messagePattern":"You provided an `open` prop to the `Dialog`, but the value is not a boolean\\. Received: (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@headlessui-react/src/components/dialog/dialog.tsx","lineNumber":405,"sourceCode":"    throw new Error(\n      `You have to provide an \\`open\\` and an \\`onClose\\` prop to the \\`Dialog\\` component.`\n    )\n  }\n\n  if (!hasOpen) {\n    throw new Error(\n      `You provided an \\`onClose\\` prop to the \\`Dialog\\`, but forgot an \\`open\\` prop.`\n    )\n  }\n\n  if (!hasOnClose) {\n    throw new Error(\n      `You provided an \\`open\\` prop to the \\`Dialog\\`, but forgot an \\`onClose\\` prop.`\n    )\n  }\n\n  if (!usesOpenClosedState && typeof props.open !== 'boolean') {\n    throw new Error(\n      `You provided an \\`open\\` prop to the \\`Dialog\\`, but the value is not a boolean. Received: ${props.open}`\n    )\n  }\n\n  if (typeof props.onClose !== 'function') {\n    throw new Error(\n      `You provided an \\`onClose\\` prop to the \\`Dialog\\`, but the value is not a function. Received: ${props.onClose}`\n    )\n  }\n\n  if ((open !== undefined || transition) && !rest.static) {\n    return (\n      <MainTreeProvider>\n        <Transition show={open} transition={transition} unmount={rest.unmount}>\n          <InternalDialog ref={ref} {...rest} />\n        </Transition>\n      </MainTreeProvider>\n    )","sourceCodeStart":387,"sourceCodeEnd":423,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-react/src/components/dialog/dialog.tsx#L387-L423","documentation":"After confirming `open`/`onClose` presence, Dialog validates types: unless an OpenClosed context provides state, `props.open` must be a strict boolean. Anything else (string 'true', number, null, undefined, object) throws with the received value interpolated, since truthy-based logic would break the controlled contract.","triggerScenarios":"`<Dialog open=\"false\">` (string); `open={user?.isActive}` where the value is undefined; `open={1}`; `open={status}` where status is an enum/string; binding to a nullable async value.","commonSituations":"JSX string attributes instead of braces; optional-chained values that are undefined before data loads; truthy APIs (counts, objects) used as booleans; state initialized to null.","solutions":["Coerce to boolean at the call site: `open={Boolean(isOpen)}` or `open={!!isOpen}`.","Initialize state properly: `useState<boolean>(false)`, not `useState(null)`.","Guard async values: render the Dialog only when the value is defined, or default it: `open={open ?? false}`."],"exampleFix":"// before\n<Dialog open={user?.hasSeenIntro} onClose={close}>\n\n// after\n<Dialog open={Boolean(user?.hasSeenIntro)} onClose={close}>","handlingStrategy":"type-guard","validationCode":"<Dialog open={Boolean(open)} onClose={close}>","typeGuard":"const isOpenBoolean = (v: unknown): v is boolean => typeof v === 'boolean'","tryCatchPattern":null,"preventionTips":["Type state as boolean with useState<boolean>(false).","Never pass optional-chained or nullable values without !! coercion.","Use braces {} not strings for boolean JSX props."],"tags":["headlessui","react","dialog","type-validation","boolean"],"backgroundTag":"invalid-prop-type","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}