Skip to main content
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} />
  );
}