The submit handler.
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/modals'
Best practises#
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.
Usage#
function Page() {const disclosure = useDisclosure()const onSubmit = async (data) => {disclosure.onClose()}return (<><Button onClick={() => disclosure.onOpen()}>Create new post</Button><FormDialogtitle="New post"defaultValues={{ title: '' }}{...disclosure}onSubmit={onSubmit}><FormLayout><Fieldname="title"label="Title"type="text"rules={{ required: 'Title is required' }}autoFocus/><Field name="description" type="textarea" label="Description" /></FormLayout></FormDialog></>)}
Focus first field#
Use initialFocusRef
for fields that don't support autoFocus
.
function Page() {const disclosure = useDisclosure()const initialRef = useRef()const onSubmit = async (data) => {disclosure.onClose()}return (<><Button onClick={() => disclosure.onOpen()}>Create new post</Button><FormDialogtitle="New post"defaultValues={{ title: '' }}{...disclosure}onSubmit={onSubmit}initialFocusRef={initialRef}><FormLayout><Fieldname="category"label="Category"type="select"options={[{value: 'general',label: 'General',},]}ref={initialRef}/><Fieldname="title"label="Title"rules={{ required: 'Title is required' }}/><Field name="description" type="textarea" label="Description" /></FormLayout></FormDialog></>)}
Auto form#
When you don't pass any children and supply a schema, the fields will be auto rendered.
function Page() {const disclosure = useDisclosure()const schema = Yup.object().shape({title: Yup.string().required().label('Title'),description: Yup.string().label('Description').meta({ type: 'textarea' }),})const onSubmit = async (data) => {disclosure.onClose()}return (<><Button onClick={() => disclosure.onOpen()}>Create new post</Button><FormDialogtitle="New post"{...disclosure}defaultValues={{title: '',description: '',}}onSubmit={onSubmit}{...yupForm(schema)}/></>)}
Custom footer#
function Page() {const disclosure = useDisclosure()const initialRef = React.useRef()const footer = (<ModalFooter><SubmitButton label="Save post" /></ModalFooter>)const onSubmit = async (data) => {disclosure.onClose()}return (<><ButtononClick={() => {disclosure.onOpen()}}>Create new post</Button><FormDialogtitle="New post"{...disclosure}onSubmit={onSubmit}initialFocusRef={initialRef}footer={footer}><FormLayout><Fieldname="title"label="Title"rules={{ required: 'Title is required' }}ref={initialRef}/><Field name="description" type="textarea" label="Description" /></FormLayout></FormDialog></>)}
Accessibility#
Keyboard Interaction#
Key | Action |
---|---|
Enter | When the dialog is open, submits the form. |
Escape | When the dialog is open, closes the dialog. |
Tab | Focus next field |
Props#
FormDialog Props#
onSubmit
required
onSubmit
required
SubmitHandler<TFieldValues>
cancelLabel
cancelLabel
The cancel button label
ReactNode
"Cancel"
children
children
If no children are passed, this will auto render fields based on the supplied schema.
ReactNode
criteriaMode
criteriaMode
CriteriaMode
defaultValues
defaultValues
{ [x: string]: any; }
delayError
delayError
number
fieldResolver
fieldResolver
A schema field resolver used to auto generate form fields.
FieldResolver
footer
footer
The modal footer, will be wrapped with ModalFooter
.
Defaults to a cancel and submit button.
ReactNode
hideCloseButton
hideCloseButton
Hide the close button
boolean
hideOverlay
hideOverlay
Hide the overlay
boolean
mode
mode
keyof ValidationMode
onChange
onChange
Triggers when any of the field change.
WatchObserver<TFieldValues>
onError
onError
Triggers when there are validation errors.
SubmitErrorHandler<TFieldValues>
ref
ref
ForwardedRef<UseFormReturn<TFieldValues, any>>
resolver
resolver
Resolver<TFieldValues, any>
reValidateMode
reValidateMode
"onBlur" | "onChange" | "onSubmit"
schema
schema
The form schema, currently supports Yup schema only.
any
shouldFocusError
shouldFocusError
boolean
shouldUnregister
shouldUnregister
boolean
shouldUseNativeValidation
shouldUseNativeValidation
boolean
submitLabel
submitLabel
The submit button label
ReactNode
"Submit"
title
title
The modal title
ReactNode
Was this helpful?