Form Dialog
A modal dialog that renders a form.
Props#
FormDialog Props#
| Prop | Type | Default | Description |
|---|---|---|---|
isOpenrequired | boolean | If true, the modal will be open. | |
onCloserequired | () => void | Callback invoked to close the modal. | |
onSubmitrequired | SubmitHandler<TFieldValues> | The submit handler. | |
| allowPinchZoom | boolean | false. | Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. |
| autoFocus | boolean | true | If true, the modal will autofocus the first enabled and interactive
element within the ModalContent |
| blockScrollOnMount | boolean | true | If true, scrolling will be disabled on the body when the modal opens. |
| children | string | 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. | |
| closeOnEsc | boolean | true | If true, the modal will close when the Esc key is pressed |
| closeOnOverlayClick | boolean | true | If true, the modal will close when the overlay is clicked |
| contentProps | ModalContentProps | Props for the modal content | |
| context | TContext | ||
| criteriaMode | CriteriaMode | ||
| defaultValues | type ONLY_FOR_FORMAT =
| AsyncDefaultValues<TFieldValues>
| DefaultValues<TFieldValues> | ||
| delayError | number | ||
| fieldResolver | FieldResolver | A schema field resolver used to auto generate form fields. | |
| fields | FormDialogFieldOverrides | Field overrides | |
| finalFocusRef | RefObject<FocusableElement> | The ref of element to receive focus when the modal closes. | |
| footer | string | 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. | |
| footerProps | ModalFooterProps | Props for the modal footer | |
| formRef | type ONLY_FOR_FORMAT =
| ((
instance: UseFormReturn<TFieldValues, TContext> | null,
) => void | (() => VoidOrUndefinedOnly))
| RefObject<UseFormReturn<TFieldValues, TContext>> | The Hook Form state ref. | |
| headerProps | ModalHeaderProps | Props for the modal header | |
| hideCloseButton | boolean | Hide the close button | |
| hideOverlay | boolean | Hide the overlay | |
| id | string | The id of the modal | |
| initialFocusRef | RefObject<FocusableElement> | The ref of element to receive focus when the modal opens. | |
| isCentered | boolean | false | If true, the modal will be centered on screen. |
| lockFocusAcrossFrames | boolean | false | Enables 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" | ||
| motionPreset | MotionPreset | scale | The transition that should be used for the modal |
| onChange | WatchObserver<TFieldValues> | Triggers when any of the field change. | |
| onCloseComplete | () => void | Fires when all exiting nodes have completed animating out | |
| onError | SubmitErrorHandler<TFieldValues> | Triggers when there are validation errors. | |
| onEsc | () => void | Callback fired when the escape key is pressed and focus is within modal | |
| onOverlayClick | () => void | Callback fired when the overlay is clicked. | |
| portalProps | Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
> | Props to be forwarded to the portal component | |
| preserveScrollBarGap | boolean | true | If 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 |
| resetOptions | Partial<{
keepDirtyValues: boolean
keepErrors: boolean
keepDirty: boolean
keepValues: boolean
keepDefaultValues: boolean
keepIsSubmitted: boolean
keepIsSubmitSuccessful: boolean
keepTouched: boolean
keepIsValidating: boolean
keepIsValid: boolean
keepSubmitCount: boolean
}> | ||
| resolver | Resolver<TFieldValues, TContext> | ||
| returnFocusOnClose | boolean | true | If true, the modal will return focus to the element that triggered it when it closes. |
| reValidateMode | "onBlur" | "onChange" | "onSubmit" | ||
| schema | NonNullable<TSchema> | The form schema. | |
| scrollBehavior | ScrollBehavior | outside | Where 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. |
| shouldFocusError | boolean | ||
| shouldUnregister | boolean | ||
| shouldUseNativeValidation | boolean | ||
| title | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The modal title | |
| trapFocus | boolean | true | If 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. |
| useInert | boolean | true | A11y: 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** |
| values | TFieldValues |
Was this helpful?