Form Modal

Form submission modal template with built-in form handling. Perfect for user input, data collection, and form-based workflows.

Features

Built-in form submission handling
Automatic FormData collection
Customizable form content (children)
Loading states during submission
Customizable button text
Form validation support

Example

Create New Profile

Click the button below to open the form modal. Fill out the form fields and submit to see the form handling in action.

Usage

import { FormModal } from '@/components/ui/templates/modal'
import { Input } from '@/components/ui/primitives/input'
import { Field, FieldContent, FieldTitle } from '@/components/ui/primitives/field'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  
  const handleSubmit = (data: any) => {
    console.log('Form data:', data)
    setIsLoading(true)
    // Process form data
    setTimeout(() => {
      setIsLoading(false)
      setIsOpen(false)
    }, 1500)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Form
      </Button>
      
      <FormModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
        title="Create Profile"
        description="Fill out the form below to create your profile."
        isLoading={isLoading}
        submitText="Create"
        cancelText="Cancel"
      >
        <div className="space-y-4">
          <Field>
            <FieldTitle>Name</FieldTitle>
            <Input name="name" placeholder="Enter your name" />
          </Field>
          <Field>
            <FieldTitle>Email</FieldTitle>
            <Input name="email" type="email" placeholder="Enter your email" />
          </Field>
        </div>
      </FormModal>
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(data) => void	-	Callback with form data object
title	string	-	Modal title text
description	string	-	Optional modal description
children	ReactNode	-	Form content (input fields, etc.)
submitText	string	'Save'	Text for submit button
cancelText	string	'Cancel'	Text for cancel button
isLoading	boolean	false	Shows loading state on submit button
size	'sm' \| 'md' \| 'lg' \| 'full'	'md'	Modal size variant