Form Dialog

v0.4.4

Generic modal container for form content, with confirm/cancel actions, configurable sizes, a submitting (loading) state, and an optional DynamicForm renderer driven by a field config array.

View as Markdown

Install

npx shadcn@latest add @signalos/form-dialog

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/checkbox, @signalos/dialog, @signalos/input, @signalos/label, @signalos/select, @signalos/switch, @signalos/textarea, @signalos/scroll-area) are pulled automatically.

Preview

Example & code

form-dialog.example.tsx

// Example: form dialog with two inputs and a save action.
import { useState } from "react"

import { FormDialog } from "@/components/widgets/form-dialog/FormDialog"

export default function Example() {
  const [open, setOpen] = useState(false)

  return (
    <FormDialog
      open={open}
      onOpenChange={setOpen}
      title="Create User"
      description="Enter the user details below."
      onSubmit={() => console.info("submitted")}
    >
      <input placeholder="Name" />
      <input placeholder="Email" />
    </FormDialog>
  )
}

Props

FormDialogProps

Prop	Type	Default
open	`boolean \| undefined`	-
onOpenChange*	`(open: boolean) => void`	-
title*	`string`	-
description	`ReactNode`	-
children	`ReactNode`	-
onSubmit*	`() => void`	-
isSubmitting	`boolean \| undefined`	-
submitLabel	`string \| undefined`	-
cancelLabel	`string \| undefined`	-
size	`FormDialogSize \| undefined`	-
contentClassName	`string \| undefined`	-
dialogTestId	`string \| undefined`	-
submitTestId	`string \| undefined`	-
cancelTestId	`string \| undefined`	-
titleTestId	`string \| undefined`	-
footer	`ReactNode`	-
contentProps	`Record<string, string \| number \| boolean \| undefined> \| undefined`	-
fields	`FieldConfig[] \| undefined`	-
sections	`FormSection[] \| undefined`	-
values	`T \| undefined`	-
onChange	`((values: T) => void) \| undefined`	-

Supporting types

export type FormDialogSize =
  "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full"

npm dependencies

lucide-react@^1.7.0

Changelog

0.4.4

Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

form-dialog

0.4.3

format the code

0.4.2

Add "use client" directive to FormDialog.tsx.
Wrap dialog body in ScrollArea (max-h-[70vh]) so long forms scroll within the modal.
Make FormDialog generic (<T extends Record<string, unknown>>) so values/onChange are typed end-to-end.
Add titleTestId prop (default "form-dialog-title") for targeting the dialog title in tests.

0.4.1

Add DynamicForm component: renders fields driven by a FieldConfig[] or FormSection[] config array with responsive 12-column grid layout and conditional visibility support.
Add FieldRenderer with a renderer registry covering input, password, number, email, url, date, textarea, select, checkbox, switch, radio, and custom field types.
FormDialog now accepts optional fields, sections, values, and onChange props; when provided the dialog body renders DynamicForm automatically instead of children.
children made optional (was required).

0.2.1

Add footer prop to override or hide the default Cancel/Submit footer, and contentProps to pass extra attributes through to the dialog content.
Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: generic modal container for form content with confirm/cancel actions, configurable sizes, and a submitting (loading) state.