Form Dialog

A modal dialog that renders a form.


FormDialog Props

isOpenrequiredbooleanIf true, the modal will be open.
onCloserequired() => voidCallback invoked to close the modal.
onSubmitrequiredSubmitHandler<TFieldValues>The submit handler.
allowPinchZoombooleanfalse.Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
autoFocusbooleantrueIf true, the modal will autofocus the first enabled and interactive element within the ModalContent
blockScrollOnMountbooleantrueIf true, scrolling will be disabled on the body when the modal opens.
childrenstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((props: FormRenderContext<...>) => ReactNode)The form children, can be a render prop or a ReactNode.
closeOnEscbooleantrueIf true, the modal will close when the Esc key is pressed
closeOnOverlayClickbooleantrueIf true, the modal will close when the overlay is clicked
contentPropsModalContentPropsProps for the modal content
defaultValuestype ONLY_FOR_FORMAT = | AsyncDefaultValues<TFieldValues> | DefaultValues<TFieldValues>
fieldResolverFieldResolverA schema field resolver used to auto generate form fields.
fieldsFormDialogFieldOverridesField overrides
finalFocusRefRefObject<FocusableElement>The ref of element to receive focus when the modal closes.
footerstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The modal footer, will be wrapped with ModalFooter. Defaults to a cancel and submit button.
footerPropsModalFooterPropsProps for the modal footer
formReftype ONLY_FOR_FORMAT = | (( instance: UseFormReturn<TFieldValues, TContext> | null, ) => void | (() => VoidOrUndefinedOnly)) | RefObject<UseFormReturn<TFieldValues, TContext>>The Hook Form state ref.
headerPropsModalHeaderPropsProps for the modal header
hideCloseButtonbooleanHide the close button
hideOverlaybooleanHide the overlay
idstringThe id of the modal
initialFocusRefRefObject<FocusableElement>The ref of element to receive focus when the modal opens.
isCenteredbooleanfalseIf true, the modal will be centered on screen.
lockFocusAcrossFramesbooleanfalseEnables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
mode"onBlur" | "onChange" | "onSubmit" | "all" | "onTouched"
motionPresetMotionPresetscaleThe transition that should be used for the modal
onChangeWatchObserver<TFieldValues>Triggers when any of the field change.
onCloseComplete() => voidFires when all exiting nodes have completed animating out
onErrorSubmitErrorHandler<TFieldValues>Triggers when there are validation errors.
onEsc() => voidCallback fired when the escape key is pressed and focus is within modal
onOverlayClick() => voidCallback fired when the overlay is clicked.
portalPropsPick< PortalProps, "appendToParentPortal" | "containerRef" >Props to be forwarded to the portal component
preserveScrollBarGapbooleantrueIf true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
resetOptionsPartial<{ keepDirtyValues: boolean keepErrors: boolean keepDirty: boolean keepValues: boolean keepDefaultValues: boolean keepIsSubmitted: boolean keepIsSubmitSuccessful: boolean keepTouched: boolean keepIsValidating: boolean keepIsValid: boolean keepSubmitCount: boolean }>
resolverResolver<TFieldValues, TContext>
returnFocusOnClosebooleantrueIf true, the modal will return focus to the element that triggered it when it closes.
reValidateMode"onBlur" | "onChange" | "onSubmit"
schemaNonNullable<TSchema>The form schema.
scrollBehaviorScrollBehavioroutsideWhere scroll behavior should originate. - If set to inside, scroll only occurs within the ModalBody. - If set to outside, the entire ModalContent will scroll within the viewport.
titlestring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The modal title
trapFocusbooleantrueIf false, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. ๐ŸšจWarning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.
useInertbooleantrueA11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**

Was this helpful?