Form Dialog

A modal dialog that renders a form.

FormDialog can be used to quickly request information from people without leaving the current page.

Import#

import { FormDialog } from '@saas-ui/react'

Do
Use FormDialog for simple forms to increase productivity.
Set focus on the first field.

Don't
Use more than 4/5 fields in a dialog.

Use initialFocusRef for fields that don't support autoFocus.

When you don't pass any children and supply a schema, the fields will be auto rendered.

To use Zod schemas, you can import FormDialog from @saas-ui/modals/zod.

To use Yup schemas, you can import FormDialog from @saas-ui/modals/yup.

Key	Action
`Enter`	When the dialog is open, submits the form.
`Escape`	When the dialog is open, closes the dialog.
`Tab`	Focus next field

Was this helpful?