Form Dialog

FormDialog is the page pattern for a form inside a dialog. Give it the fields, the copy, and an onSubmit that validates and saves. Do not assemble a Dialog, a Form and a discard prompt in a page. Coming from ui-forms ModalForm and useModal? packages/ui/docs/migrating-from-ui-forms.md covers controlled open in place of the modal registry, and returning Saved or Invalid from a react-hook-form submit. children are the fields (Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox (or CheckboxGroup), CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, or Slider; not a Switch, ADR 0023 decision 5), stacked in a column in the dialog's scrolling body. Give each field a name: the form data and the unsaved-edits check read named controls only. Pass requiredHint once to say what the required marker means ("Fields marked with * are required"); it sits above the fields, and each required field draws its own marker. onSubmit(event) runs on a native submit, so Enter in a single-line field submits. The block prevents the native navigation and ignores a repeat submit. Read the values with new FormData(event.currentTarget) and validate there. Closing a form with unsaved edits, by Cancel or Escape, opens a discard prompt (a ConfirmDialog) instead of closing. "Keep editing" returns to the form with its values and focus; "Discard" closes both. A pristine form closes at once. The edits are the named controls' data compared with their data when the form opened. Pass dirty to say so yourself, for edits the controls do not carry or a control that fills in after open. Uncontrolled, the trigger opens the dialog and defaultOpen opens it on mount. Controlled, pass open and onOpenChange. onOpenChange(false, details) is called for a pristine Cancel (close-press), a discard (close-press), a pristine Escape (close-request) and a saved submit (form-submit); details.cancel() keeps it open. It is not called for a close that is held or confirmed away. A backdrop press never closes the dialog. Load the stylesheets of what it composes: dialog/styles.css, form/styles.css, field/styles.css, button/styles.css, box/styles.css, alert-dialog/styles.css, and blocks/confirm-dialog/styles.css with its own list, plus the stylesheet of each control you pass.