FormDialog

A consistent, production-ready dialog for forms with accessibility support

A consistent, production-ready dialog for forms.

Features:

• Accessible (keyboard nav, focus trap, screen reader support)
• Animated open/close transitions
• Consistent header, body, footer layout
• Loading state support
• Multiple sizes

Example:

<FormDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="Add New Item"
  description="Fill out the form below"
  onSubmit={handleSubmit}
  submitLabel="Create"
>
  <FormField label="Name">
    <Input value={name} onChange={(e) => setName(e.target.value)} />
  </FormField>
</FormDialog>

Props

open · boolean · required

open

onOpenChange · (open: boolean) => void · required

onOpenChange

title · string · required

title

description · string

description

children · React.ReactNode · required

children

onSubmit · (e: React.FormEvent) => void

onSubmit

submitLabel · string

submitLabel

cancelLabel · string

cancelLabel

isSubmitting · boolean

isSubmitting

submitDisabled · boolean

submitDisabled

className · string

className

size · sm | md | lg | xl | 2xl | 3xl | 4xl

size

Usage

import { FormDialog } from '@/components/FormDialog';

export default function Example() {
  return (
    <FormDialog open={open} onOpenChange={onOpenChange} title={title} children={children} />
  );
}